:root {
	--purple: rgb(208, 18, 222);
	--blue: rgb(51, 153, 255);
	--green: rgb(22, 215, 90);
}

html {
	scroll-behavior: smooth;
}

body {
	user-select: none;
	margin: 0rem;
	overflow: hidden;
	background: radial-gradient(rgb(35, 35, 35) 3%, rgb(0, 0, 0) 5%);
	background-size: 8vmin 8vmin;
	scroll-behavior: smooth;
	transform: scale(100%);
	font-family: sans-serif;
}

/* Home Page */
.page {
	position: absolute;
	height: 100vh;
	width: 100vw;
	box-shadow: inset 0vmin 0vmin 6vmin black, 0vmin 0vmin 6vmin black;
	scroll-snap-align: start;
	overflow: hidden;
}

.categories {
	position: absolute;
	z-index: -10;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	opacity: 30%;
	filter: blur(8vmin);
	animation: rotate2 15s linear infinite;
	transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;

}

.sphere {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 35vmax;
	height: 35vmax;
	top: 0%;
}


.design {

	left: 25%;
	animation: computer 6s cubic-bezier(.64, .21, .38, .8) infinite;
	background-color: var(--purple);
	border-radius: 50%;
}

.program {

	left: 50%;
	animation: computer 6s cubic-bezier(.64, .21, .38, .8) infinite;
	background-color: var(--blue);
	border-radius: 50%;
	animation-delay: 0.5s;
}

.model {

	left: 75%;
	animation: computer 6s cubic-bezier(.64, .21, .38, .8) infinite;
	background-color: var(--green);
	animation-delay: 1s;
	border-radius: 50%;
}

@keyframes computer {
	0% {
		top: 0%;
	}

	50% {
		top: 100%;
	}

	100% {
		top: 0%;
	}
}

@keyframes rotate {
	0% {
		rotate: 0deg;
	}

	100% {
		rotate: 360deg;
	}
}

.menu {
	margin-top: 24vmin;
	margin-left: 15vmin;
}

.menu:hover+.balance {
	opacity: 10%;
	filter: blur(1vmin);
}

.title {
	color: white;
	height: 15vmin;
	font-size: 15vmin;
	margin-bottom: 3vmin;
	transform-style: preserve-3d;
	white-space: nowrap;
	transition: all 0.2s ease-in-out;
	animation: rotation 4s infinite cubic-bezier(.64, .21, .38, .8)
}

.face {
	height: 15vmin;
	position: absolute;
}

.first {
	transform: translateZ(7.5vmin);
	animation: first-anim 4s infinite cubic-bezier(.64, .21, .38, .8);
}

.second {
	transform: rotateX(-90deg) translateZ(7.5vmin);
	animation: second-anim 4s infinite cubic-bezier(.64, .21, .38, .8);
}

.third {
	transform: rotateX(-180deg) translateZ(7.5vmin);
	animation: third-anim 4s infinite cubic-bezier(.64, .21, .38, .8);
}

@keyframes rotation {
	0% {
		transform: rotateX(180deg);
	}

	50% {
		transform: rotateX(90deg);
	}

	100% {
		transform: rotateX(0deg);
	}
}

@keyframes first-anim {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes second-anim {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes third-anim {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

.options {
	margin-left: 1vmin;
	height: 8.5vmin;
	width: 69vmin;
	overflow: hidden;
	transition: height 0.2s ease-in-out;
}

.contact {
	height: 13.5vmin;
}

.options:hover {
	height: 13vmin;
}

.top-options {
	width: 69vmin;
}

.top-options:hover+.options {
	height: 6.5vmin;
}


.option {
	display: block;
	color: white;
	font-size: 7.4vmin;
	line-height: 7.4vmin;

}


.sub-option {
	display: inline-block;
	padding: 1vmin;
	padding-bottom: 0.7vmin;
	color: white;
	font-size: 2.7vmin;
	text-decoration: none;
	border-radius: 2.5vmin 0vmin;
	transition: background-color 0.2s ease-in-out;
}

.sub-option:hover {
	background-color: white;
	color: black;
}

.contacts {
	height: 6vmin;
	width: 6vmin;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 6vmin;
	overflow: visible;
	transition: background-size 0.3s ease-in-out, rotate 0.3s ease-in-out;
}

.contacts:hover {
	background-size: 6.5vmin;
	rotate: 10deg;
}

.insta {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='1.5' clip-rule='evenodd' viewBox='0 0 1000 1000'%3E%3Cpath fill='none' d='M-.03 0h1000v1000H-.03z'/%3E%3Ccircle cx='10992.7' cy='6819.8' r='46.24' fill='url(%23a)' transform='matrix(.6517 .6517 -.6517 .6517 -2009.5 -11319.45)'/%3E%3Cpath fill='none' stroke='url(%23b)' stroke-width='64.7' d='M11184 6785.09c0-105.11-85.4-190.45-190.5-190.45h-380.9c-105.1 0-190.4 85.34-190.4 190.45v380.92c0 105.12 85.3 190.46 190.4 190.46h380.9c105.1 0 190.5-85.34 190.5-190.46v-380.92Z' transform='matrix(.9293 0 0 .9293 -9539.14 -5982.27)'/%3E%3Ccircle cx='10779.7' cy='7033.52' r='167.48' fill='none' stroke='url(%23c)' stroke-width='60.13' transform='matrix(1 0 0 1 -10279.69 -6533.52)'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1' y1='0' y2='0' gradientTransform='scale(940.7982) rotate(1.86 -228 348.56)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23007aff'/%3E%3Cstop offset='.56' stop-color='%23b325cb'/%3E%3Cstop offset='1' stop-color='%23ff00b5'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='1' y1='0' y2='0' gradientTransform='rotate(46.11 -2565.73 15633.97) scale(925.683)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23007aff'/%3E%3Cstop offset='.56' stop-color='%23b325cb'/%3E%3Cstop offset='1' stop-color='%23ff00b5'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' x2='1' y1='0' y2='0' gradientTransform='scale(859.764) rotate(44.06 -3.6 18.97)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23007aff'/%3E%3Cstop offset='.56' stop-color='%23b325cb'/%3E%3Cstop offset='1' stop-color='%23ff00b5'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

.twit {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 1000 1000'%3E%3Cpath fill='none' d='M0 0h1000v1000H0z'/%3E%3Cpath fill='%231da1f2' d='M154.68 551.82C116.54 513 94.29 459.84 95.59 404.7a44.98 44.98 0 0 1 16.78-33.97C88.66 313 91.68 245.69 124.67 189.04a45.03 45.03 0 0 1 73.78-5.76c61 74.85 147.8 127.8 246.86 145.3 7.16-104 93.7-191.23 205.03-191.23 49.28 0 94.62 17.4 130.03 46.32a275.27 275.27 0 0 0 65.92-28.27 44.98 44.98 0 0 1 50.97 3.48 44.96 44.96 0 0 1 14.86 48.9c-.92 2.92-1.93 5.82-3 8.69a44.6 44.6 0 0 1 16.15 12.12 45.02 45.02 0 0 1 2.97 54 371 371 0 0 1-71.98 79.73c-1.24 241.35-184.55 500.33-501.27 500.33a498.94 498.94 0 0 1-270.15-79.18 45.03 45.03 0 0 1-18.07-53.06 45.02 45.02 0 0 1 47.65-29.51c40.9 4.82 81.82.62 120.06-11.99a205.65 205.65 0 0 1-80.59-107.42 44.97 44.97 0 0 1 .79-29.67Zm736.17-294.25a320.2 320.2 0 0 1-92.11 25.25 160.64 160.64 0 0 0 70.51-88.73 321.27 321.27 0 0 1-101.85 38.93 160.1 160.1 0 0 0-117.06-50.65c-103.54 0-179.63 96.6-156.24 196.89-133.25-6.68-251.42-70.52-330.53-167.55-42.02 72.08-21.8 166.38 49.6 214.13a159.7 159.7 0 0 1-72.6-20.07c-1.76 74.3 51.5 143.8 128.63 159.28a160.75 160.75 0 0 1-72.44 2.73c20.39 63.71 79.6 110.06 149.83 111.36-67.43 52.86-152.37 76.48-237.45 66.45A454 454 0 0 0 355 817.63c297.76 0 466-251.48 455.83-477.03a326.51 326.51 0 0 0 80.03-83.03Z'/%3E%3C/svg%3E");
}

.mail {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='1.5' clip-rule='evenodd' viewBox='0 0 1000 1000'%3E%3Cpath fill='none' d='M0 0h1000v1000H0z'/%3E%3Cpath fill='none' stroke='url(%23a)' stroke-width='45' d='M14430.8 5776.3c0-39.4-32-71.4-71.4-71.4h-565.2c-39.4 0-71.4 32-71.4 71.4v277c0 39.5 32 71.4 71.4 71.4h565.2c39.4 0 71.4-32 71.4-71.3v-277Zm-25.1-54.2-328.9 204.4-332.1-201.6' transform='matrix(1 0 0 1 -13576.8 -5270.8)'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1' y1='0' y2='0' gradientTransform='rotate(45 422.5 19022.7) scale(1414)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2354a5fd'/%3E%3Cstop offset='1' stop-color='%23004e93'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

.mail:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='1.5' clip-rule='evenodd' viewBox='0 0 1000 1000'%3E%3Cpath fill='none' d='M0 0h1001v1000H0z'/%3E%3Cpath fill='none' stroke='url(%23a)' stroke-width='45' d='M11732 7020v-345h469v349m0-154 98 88h0c13 13 22 31 22 51v309c0 38-32 69-70 69h-569c-38 0-69-31-69-69v-309c0-20 8-37 21-50h0l98-89m574 98-339 195m-333-204 333 204m-131-400h262m-262 77h262m-262 77h262' transform='translate(-11467 -6534)'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1' y1='0' y2='0' gradientTransform='rotate(45 -2156 17107) scale(1414)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2354a5fd'/%3E%3Cstop offset='1' stop-color='%23004e93'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

.mail:hover+.mail-adress {
	width: 36.6vmin;
	opacity: 100%;
}

.mail-adress:hover {
	width: 36.6vmin;
	opacity: 100%;
}


.mail-adress {
	width: 1vmin;
	opacity: 0%;
	transition: width 0.3s ease-in-out, opacity 0.1s ease-in-out;
	overflow: hidden;
	display: inline-block;
	padding: 1vmin;
	padding-bottom: 0.7vmin;
	color: white;
	font-size: 2.7vmin;

	border-radius: 2.5vmin 0vmin;
}

/* Home Page */



/* Skills Page */
.skills {
	left: 110%;

}

.home {
	position: absolute;
	background-color: rgba(255, 255, 255, 0.5);
	color: black;

	top: 6vmin;
	padding: 0.5vmin 0.5vmin 0.5vmin 0.5vmin;
	border-radius: 0vmin 0vmin 3vmin 0vmin;
	transition: top 0.2s ease-in-out, padding 0.2s ease-in-out, background-color 0.1s ease-in-out;
}

.logo {
	width: 8vmin;
	height: 8vmin;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 1501 1501'%3E%3Cpath fill='none' d='M0 0h1500.9v1500.9H0z'/%3E%3Cpath fill='%23191919' d='M1268.8 232.1v518.2a518.4 518.4 0 0 1-518.5 518.4H232.1V750.5a518.4 518.4 0 0 1 518.5-518.4h518.2ZM596.5 1079a363.6 363.6 0 0 0 410-71.6 363.1 363.1 0 0 0-102-585.5 363.3 363.3 0 0 0-410.2 71.5A363.1 363.1 0 0 0 596.5 1079Zm304.7-63.7A304.8 304.8 0 0 1 656 1040V873.7l245.3 141.6ZM445.8 748.5a304.5 304.5 0 0 1 101-224.8L691 606.9 445.8 748.5Zm609.3 3.8a304.5 304.5 0 0 1-101 224.8L809.9 894l245.2-141.6Zm-458.6 261.1a303.4 303.4 0 0 1-89-79c-28-37-46.3-78.4-55.2-121l144.2-83.2v283.2Zm3.2-527.8A304.8 304.8 0 0 1 845 460.7v166.5L599.7 485.6Zm304.7 1.8a303.3 303.3 0 0 1 144.2 200l-144.2 83.3V487.4Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10vmin;
	margin: 0vmin 0.5vmin 0vmin 0vmin;
	transition: margin 0.2s ease-in-out;
}

.logo-text {
	position: absolute;
	font-size: 5vmin;
	top: 3vmin;
	width: 0;
	overflow: hidden;
	left: 8.5vmin;
	opacity: 0%;
	transform: translateY(-50%);
	transition: opacity 0.2s cubic-bezier(.54, .11, .86, .44);
}

.underline {
	top: 5.5vmin;
	left: 8.5vmin;
	position: absolute;
	background: linear-gradient(270deg, var(--green), var(--blue), var(--purple));
	background-size: 200% 200%;
	animation: gradient-animation 3s linear infinite;
	opacity: 0%;
	height: 0.6vmin;
	width: 2vmin;
	border-radius: 0.25vmin;
	transition: opacity 0.2s cubic-bezier(.54, .11, .86, .44), width 0.2s ease-in-out;
	box-shadow: 0 0 0.2vmin rgba(0, 0, 0, 0.341);
}

@keyframes gradient-animation {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.home:hover {
	padding: 0.5vmin 7.8vmin 0.5vmin 0.5vmin;
	background-color: rgb(255, 255, 255);
}

.home:hover>.logo {
	margin: 0vmin 6vmin 0vmin 0vmin;
}

.home:hover>.logo-text {
	overflow: visible;
	opacity: 100%;
}

.home:hover>.underline {
	opacity: 100%;

	width: 13.3vmin;
}

.effect {
	background-color: var(--green);
	position: absolute;
	opacity: 20%;
	z-index: -10;
	height: 100vh;
	width: 100vh;
	border-radius: 50vh;
	filter: blur(5vmin);
	transform: translateX(-50%);
}

.subtitle {
	text-align: center;
	top: 15%;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	color: white;
	font-size: 8vmin;
	width: 109vmin;
}

.information {
	margin-top: 1vmin;
	margin-left: 1vmin;
	font-size: 3vmin;
}

.tools {
	top: 62.5%;
	position: absolute;
	color: gray;
	font-size: 4vmin;
	width: 100vw;
	text-align: center;
}

.slider-mask {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 109vmin;
	overflow: hidden;
}

.slider {
	display: flex;
	position: relative;
	font-size: 3vmin;
	transition: left 2s ease-in-out;
	animation: scroll 9s linear infinite;
}

.slider:hover {
	animation-play-state: paused;
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(calc(31.1vmin* -6));
	}
}


.tool {
	height: 20vmin;
	width: 30vmin;
	object-fit: contain;
	background-color: rgba(87, 87, 87, 0.416);
	margin: 0.6vmin 0vmin 0.6vmin 1vmin;
	border-radius: 1vmin;
	transition: background-color 0.3s ease-in-out;
}


.tool:hover {
	background-color: rgba(87, 193, 114, 0.29);
}

.portal {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-60vmin);
	background-color: black;
	width: 10vmin;
	height: 25vmin;
	border-radius: 100%;
	border: 1vmin solid var(--green);
	box-shadow: 0 0 1.5vmin var(--green);
}

.inner {
	margin-top: 1vmin;
	margin-left: 2.4vmin;
	width: 8vmin;
	height: 24vmin;
	border: none;
	background-color: transparent;
	box-shadow: inset 6vmin 0vmin 2vmin black;
}


.inner.mirror {
	margin-left: 1.5vmin;
}

.mirror {
	rotate: 180deg;
	transform: translateX(-49vmin);
}