.skillItem {
	align-content: center;
	contain: content;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: auto;
	max-width: 150px;
	min-width: 80px;
	padding: 45px;
	width: 100%;
}

@media only screen and (max-width: 500px) {
	.skillItem {
		margin: 0px;
		max-width: initial;
		min-width: auto;
		padding: 20px;
		width: auto;
	}
}

.skillItemImg {
	filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.1));
	height: auto;
	width: 100%;
}

.skillItem:hover {
	background-color: rgb(251, 251, 251);
	border-radius: 10px;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
}

.skillItemText {
	padding-top: 20px;
	text-align: center;
}

#webDev {
	padding-bottom: 100px;
	padding-left: 20px;
	padding-right: 20px;
}

.webProject {
	align-items: center;
	contain: content;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 550px;
	padding-top: 30px;
}

.websiteTitle {
	align-items: center;
	box-sizing: content-box;
	display: flex;
	justify-content: center;
}

.websiteTitle .centered .text {
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	width: 100%;
}

.websiteTitle .text h3 {
	font-size: 1.5em;
	margin: 0px;
}

.external {
	height: auto;
	padding-left: 7px;
	padding-top: 2px;
	width: 16px;
}

.websiteTitle:hover .text ~ .underline {
	background-color: #000;
	opacity: 100%;
	width: 100%;
}

.webImg {
	align-items: center;
	height: 100%;
	min-width: 200px;
	padding: 25px;
}

.webImg img,
.webImg svg {
	filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.1));
	height: auto;
	max-width: 700px;
	width: 100%;
}

.lazyLoadImgContainer {
	contain: content;
	display: grid;
}

.lazyLoadImgContainer .placeholderImg,
.lazyLoadImgContainer .fullImg,
.projectArrow {
	grid-column: 1;
	grid-row: 1;
}

.lazyLoadImgContainer .fullImg {
	z-index: 1;
}

.projectArrow {
	filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.5)) !important;
	height: auto;
	margin: auto;
	opacity: 0;
	padding-bottom: 0px;
	transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	width: 20%;
	z-index: 2;
}

.lazyLoadImgContainer:hover .projectArrow {
	opacity: 0.98;
	padding-bottom: 75px;
}

.placeholderImg.square {
	border-radius: 10px;
	z-index: 0;
}

.squareProjectBoxShadow {
	box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

.webText {
	contain: content;
	max-width: 700px;
	padding: 25px;
	padding-bottom: 0px;
}

/* 3D projects */

.label + hr {
	margin: 15px auto 10px auto;
	width: 80%;
}

.showcaseWrapper {
	contain: content;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 15px;
}

.showcaseWrapper a:hover img,
.showcaseWrapper a:focus img,
.showcaseWrapper a:hover svg,
.showcaseWrapper a:focus svg {
	border-radius: 30px;
	filter: contrast(110%) brightness(105%);
}

.showcaseWrapper a {
	cursor: pointer;
	min-width: 100px;
	padding: 35px;
	width: 350px;
}

.showcaseWrapper a picture img,
.showcaseWrapper a svg {
	border-radius: 25px;
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
	height: auto;
	margin: 0px;
	transition:
		filter 0.2s,
		border-radius 0.2s;
	width: 100%;
}

@media only screen and (max-width: 1100px) {
	.showcaseWrapper {
		flex-wrap: wrap;
	}
}

#gotoTopBtn {
	align-items: center;
	animation-fill-mode: forwards;
	background-color: rgb(49, 127, 230);
	background-image: radial-gradient(
		rgba(50, 50, 50, 0.3),
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 0)
	);
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	background-size: 100%;
	border-radius: 100%;
	bottom: 20px;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
	contain: content;
	display: flex;
	height: 50px;
	justify-content: center;
	left: 100%;
	margin: 20px;
	padding: 0px;
	position: sticky;
	transform: scale(0);
	transition:
		box-shadow 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55),
		filter 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	width: 50px;
	z-index: 100;
}

#gotoTopBtn:hover,
#gotoTopBtn:focus {
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
	filter: brightness(110%);
}

.upArrow {
	border: solid white;
	border-radius: 2px;
	border-width: 0 5px 5px 0;
	display: inline-block;
	margin-top: 3px;
	padding: 5px;
	transform: rotate(225deg);
	transition: margin 0.2s ease-in-out;
}

#gotoTopBtn:hover .upArrow {
	margin-top: -5px;
}

.zoomOut {
	animation: zoomOut 0.2s linear;
}

.zoomIn {
	animation: zoomIn 0.2s linear;
}

/* Contact Section */

#ContactForm {
	background-color: #fefefe;
	border-radius: 5px;
	box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.2);
	margin-bottom: 55px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	max-width: 1000px;
	padding: 35px;
	padding-bottom: 30px;
	padding-top: 30px;
	position: relative;
	width: 60%;
}

@media only screen and (max-width: 550px) {
	#ContactForm {
		padding: 0px;
		padding-top: 30px;
		padding-bottom: 30px;
		width: 80%;
	}

	.contactImg {
		padding: 10px;
		width: 70px !important;
	}

	.virticalLine,
	.contactText {
		display: none;
	}
}

.contactTypes {
	contain: content;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 50px;
	margin-top: 50px;
}

.contactMethod {
	align-items: center;
	contain: content;
	display: flex;
	justify-content: center;
	margin: 20px;
}

.virticalLine {
	background-color: #000;
	height: 40px;
	margin-left: 10px;
	margin-right: 10px;
	width: 2px;
}

.contactImg {
	height: auto;
	width: 50px;
}

/* Footer */

footer {
	align-items: center;
	background-color: rgb(220, 220, 220);
	contain: strict;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75em;
	height: 50px;
	justify-content: space-between;
	min-width: 50px;
	padding: 15px 15px 15px 15px;
}

.footerLinks {
	contain: content;
	display: flex;
}

/* CSS for 3D model showcase */

#description {
	color: hsl(213, 5%, 35%);
	font-family:
		"Roboto-Light", "Open Sans", "Helvetica Neue", "Helvetica", "Arial",
		sans-serif;
	font-size: 1rem;
	letter-spacing: 0;
	line-height: 1.5rem;
	margin: 0px;
}

#webGLViewer {
	/*contain:content;*/
	border-radius: 10px;
	box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
	display: none;
	grid-template-columns: 50% 50%;
	margin: 0 auto;
	margin-bottom: 20px;
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 30px;
	opacity: 0;
}

@media only screen and (max-width: 1000px) {
	#webGLViewer {
		grid-template-columns: 100%;
	}

	#additionalOptionsContainer {
		grid-column: auto !important;
		grid-row: 2;
	}
}

#viewer3d {
	background-color: rgb(214, 211, 202);
	contain: none;
	grid-column: 1;
	grid-row: 1;
}

.defaultViewer3D {
	position: relative;
}

.fullscreenViewer3d {
	height: 100%;
	left: 0px;
	min-width: 500px;
	overflow-x: hidden;
	position: fixed;
	scrollbar-width: thin;
	top: 0px;
	z-index: 2;
}

.closeBtn {
	background-color: rgba(255, 255, 255, 0.75);
	border-radius: 100%;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
	contain: strict;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 30px;
	justify-content: center;
	margin-right: 10px;
	margin-top: 10px;
	padding: 15px;
	position: fixed;
	right: 5px;
	top: 0px;
	transition: 0.2s;
	width: 30px;
	z-index: 3;
}

.closeBtn:hover {
	background-color: rgba(255, 255, 255, 0.95);
}

.xTop,
.xBot {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-color: rgba(30, 30, 30, 1);
	border-radius: 2px;
	height: 6px;
	outline: 1px solid transparent;
	transition: 0.2s;
	width: 100%;
}

.xTop {
	transform: translate(0px, 50%) scale(1.2, 1.2) rotate(45deg);
}

.xBot {
	transform: translate(0px, -50%) scale(1.2, 1.2) rotate(-45deg);
}

#additionalOptionsContainer {
	align-content: space-around;
	background-color: #eee;
	contain: content;
	display: flex;
	flex-flow: row wrap;
	grid-column: 1/3;
	justify-content: center;
	min-height: 120px;
	overflow: hidden;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	width: calc(100% - 20px);
}

#additionalOptionsContainer img {
	border-radius: 5px;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
	height: 100px;
	margin-bottom: 10px;
	margin-right: 10px;
	transition: 0.05s ease-in-out;
	width: 100px;
}

#additionalOptionsContainer img:hover {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
}

ul.specs {
	align-items: center;
	contain: content;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 300px;
	justify-content: space-evenly;
	list-style-type: none;
	padding-left: 0px;
}

ul.specs li {
	min-width: 177px;
	padding-bottom: 20px;
}

ul.specs li hr {
	border-bottom: 0px;
	border-top: 1px solid;
	margin-left: 0px;
	margin-top: 0px;
	min-width: 30%;
}

#webTextureRezInfo {
	bottom: 0px;
	font-size: 8pt;
	position: absolute;
}

.arrow {
	border: solid black;
	border-radius: 5px;
	border-width: 0 5px 5px 0;
	display: inline-block;
	padding: 15px;
	transition: opacity 0.2s;
}

#nextBtn {
	transform: rotate(-45deg);
}

#nextBtnWrapper {
	cursor: pointer;
	height: 40px;
	opacity: 0.2;
	padding: 20px;
	padding-bottom: 50px;
	padding-right: 30px;
	padding-top: 50px;
	position: absolute;
	right: 0px;
	top: 40%;
	transition: 0.2s ease-in-out;
	width: 40px;
	z-index: 3;
}

#nextBtnWrapper:hover {
	filter: invert(100%);
	opacity: 0.7;
}

#previousBtn {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}

#previousBtnWrapper {
	cursor: pointer;
	height: 40px;
	left: 0px;
	opacity: 0.2;
	padding: 20px;
	padding-bottom: 50px;
	padding-left: 30px;
	padding-top: 50px;
	position: absolute;
	top: 40%;
	transition: 0.2s ease-in-out;
	width: 40px;
	z-index: 3;
}

#previousBtnWrapper:hover {
	filter: invert(100%);
	opacity: 0.7;
}

#fullscreenBtn {
	background-color: white;
	background-image: url(../images/fullscreen32.png);
	background-position: center;
	background-repeat: no-repeat;
	bottom: 0px;
	cursor: pointer;
	filter: invert(10%);
	height: 32px;
	opacity: 0.6;
	padding: 5px;
	position: absolute;
	right: 0px;
	transition: filter 0.1s ease-in-out;
	width: 32px;
	z-index: 3;
}

#fullscreenBtn:hover {
	filter: invert(90%);
}

#itemInformation {
	background: #fafafa;
	contain: content;
	padding: 20px;
	padding-top: 0px;
}

#itemInformation h2 {
	text-align: center;
}

#modelCopyright {
	bottom: 0px;
	font-family: "Roboto", "Arial", sans-serif;
	font-size: 8pt;
	opacity: 0.5;
	position: absolute;
	text-align: center;
	user-select: none;
	width: 100%;
	z-index: 2;
}

#loadingBar {
	background-color: rgb(49, 127, 230);
	bottom: 0px;
	height: 5px;
	position: absolute;
	transition: width 0.4s ease-out;
	width: 0%;
}

#viewerImg img {
	height: auto;
	margin-right: -50%;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.defaultViewer3D #viewerImg img {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.fullscreenViewer3d #viewerImg img {
	left: 0px;
	top: 0px;
}

model-viewer {
	--progress-bar-color: rgb(49, 127, 230);
	display: block;
	height: 100%;
	left: 0px;
	position: absolute;
	top: 0px;
	width: 100%;
}

#poster {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	bottom: 0;
	filter: blur(10px);
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}

#loadingSpinner {
	left: 0;
	margin: 0 auto;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 30%;
	width: 80px;
	z-index: 3;
}

#loadingSpinner:after {
	animation: lds-dual-ring 2.5s linear infinite;
	border: 6px solid #fff;
	border-color: #fff transparent #fff transparent;
	border-radius: 50%;
	content: " ";
	display: block;
	height: 64px;
	margin: 8px;
	position: absolute;
	width: 64px;
}

.fadeIn {
	animation: fadeIn 0.5s ease;
}

.fadeOut {
	animation: fadeout 0.3s linear;
}

.fadeInOnScroll {
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.fadeInOnScroll {
		animation: fade_in_on_scroll 0.4s ease forwards;
		animation-play-state: paused;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fadeInOnScroll {
		animation: fade_in 0.4s ease forwards;
		animation-play-state: paused;
	}
}

.-fade-in-animation {
	animation-play-state: running;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fadeout {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fade_in_on_scroll {
	from {
		opacity: 0;
		transform: translateY(clamp(0.5rem, 7%, 1rem));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes zoomIn {
	0% {
		transform: scale(0);
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes zoomOut {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(0);
	}
}