:root {
	--main: #F02D3A;
	--second: #51f02d;
	--third: #3557ff;
}

@font-face {
	font-family: Ubuntu;
	src: url(fonts\Ubuntu.ttf) format("truetype");
}

@font-face {
	font-family: Ubuntu Condensed;
	src: url(fonts\UbuntuCondensed-Regular.ttf) format("truetype");
}

@font-face {
	font-family: Ubuntu Mono;
	src: url(fonts\UbuntuMono.ttf) format("truetype");
}


.header {
	display: flex;
	background-color: var(--main);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.692);
	margin: 0px;
}

.header-content {
	flex: 1;
	font-family: Ubuntu Condensed;
	font-size: 2vw;
	padding-bottom: 1.5%;
	padding-top: 1.5%;
	border: none;
	background-color: var(--main);
	color: aliceblue;
	margin: 0px;
	transition: filter 0.3s ease-in-out;
}

.header-content:hover {
	filter: grayscale(1);
}

body {
	margin: 0px;
	height: 3000px;
	background-color: aliceblue;
}

.header-block {
	position: absolute;
	background-color: white;
	border: none;
	width: 15vw;
	height: 8vw;
	left: -6vw;
	border-radius: 4vw;
	z-index: 15;
	box-shadow: 0 0 2vw rgba(0, 0, 0, 0.411);
}

.logo {
	width: 8vw;
	height: 8vw;
	position: absolute;
	z-index: 16;
	margin: 0px;
	padding: 0px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 1501 1501'%3E%3Cpath d='M350.1-2262.6H1851v1500.9H350.1z' style='fill:none' transform='translate(-350.1 2262.6)'/%3E%3Cpath d='M1596 390h-418.2a418.4 418.4 0 0 0-418.5 418.4v418.3h418.3a418.4 418.4 0 0 0 418.5-418.4V390Z' style='fill:%23f02d3a' transform='matrix(1.239 0 0 1.239 -708.6 -251)'/%3E%3Cpath d='M13217.3 22689.3a360.3 360.3 0 0 1-135.2-109.5 358.6 358.6 0 0 1-72.3-188.1 363.2 363.2 0 0 1 154-328.5 362.2 362.2 0 0 1 361.5-30.9 360.6 360.6 0 0 1 135.3 109.5 361.2 361.2 0 0 1 72.2 188.1 363.1 363.1 0 0 1-154 328.5 362 362 0 0 1-361.5 30.9Zm0-65.5v-283.2l-144.2 83.2c9 42.6 27.3 84 55.3 120.9 24.9 33 55.3 59.5 88.9 79.1Zm304.8 1.9-245.3-141.7v166.5a305 305 0 0 0 245.3-24.8Zm153.9-263-245.2 141.6 144.2 83.2a304.4 304.4 0 0 0 101-224.8Zm-150.7-264.9v283.2l144.2-83.2c-8.9-42.6-27.2-84-55.2-120.9a302 302 0 0 0-89-79.1Zm-304.7-1.9 245.3 141.7v-166.5a305 305 0 0 0-245.3 24.8Zm-154 263 245.3-141.6-144.2-83.2a304.2 304.2 0 0 0-101.1 224.8Z' style='fill:%23fff' transform='translate(-12620.9 -21610.4)'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 8vw;
	transition: transform 1s ease-in-out;
}

.logo:hover {
	transform: rotate(360deg);
}

.entry {
	width: 100%;
	height: 70vh;
	background-color: var(--main);
	box-shadow: inset 0 0 30vh black;
	overflow: hidden;
}

.entry-text {
	position: absolute;
	text-align: center;
	margin: auto;
	top: 22vh;
	left: 50%;
	transform: translate(-50%);
	color: aliceblue;
	font-family: Ubuntu;
	font-size: min(16vh, 190px);
	z-index: 20;
	pointer-events: none;
	text-shadow: 0 0 5px black;
}


/* FirstCube */

.cube {
	width: 40vh;
	height: 40vh;
	transform-style: preserve-3d;
	transform: translateZ(-20vh) rotateX(-45deg) rotateY(45deg) rotateZ(0deg);
	position: relative;
	transition: transform 1s ease-in-out;
	margin: auto;
	margin-top: 15vh;
	animation: rotation 10s infinite linear;
}


.face {
	position: absolute;
	width: 40.1vh;
	height: 40.1vh;
	box-shadow: inset 0 0 5vh black;
}


.front {
	background-image: linear-gradient(var(--main), black);
	transform: translateZ(20vh);
	transition: transform 0.5s ease-in-out;
}

.right {
	background-image: linear-gradient(var(--main), black);
	transform: rotateY(90deg) translateZ(20vh);
	transition: transform 0.5s ease-in-out;
}

.back {
	background-image: linear-gradient(var(--main), black);
	transform: rotateY(180deg) translateZ(20vh);
	transition: transform 0.5s ease-in-out;
}

.left {
	background-image: linear-gradient(var(--main), black);
	transform: rotateY(-90deg) translateZ(20vh);
	transition: transform 0.5s ease-in-out;
}

.top {
	background-color: var(--main);
	transform: rotateX(90deg) translateZ(20vh);
	transition: transform 0.5s ease-in-out;
}

.bottom {
	background-color: #000000;
	transform: rotateX(-90deg) translateZ(20vh);
	transition: transform 0.5s ease-in-out;
}


.cube:hover .top {
	transform: rotateX(90deg) translateZ(49vh);
}

.cube:hover .front {
	transform: translateZ(49vh);
}

.cube:hover .left {
	transform: rotateY(-90deg) translateZ(49vh);
}

.cube:hover .right {
	transform: rotateY(90deg) translateZ(49vh);
}

.cube:hover .back {
	transform: rotateY(180deg) translateZ(49vh);
}

.cube:hover .bottom {
	transform: rotateX(-90deg) translateZ(49vh);
}

@keyframes rotation {
	from {
		transform: translateZ(-20vh) rotateX(-45deg) rotateY(45deg) rotateZ(0deg);
	}

	to {
		transform: translateZ(-20vh) rotateX(-45deg) rotateY(405deg) rotateZ(0deg);
	}
}

/* Second Cube */

.cube-small {
	width: 20vh;
	height: 20vh;
	transform-style: preserve-3d;
	transform: translateX(10vh) translateY(10vh);
	position: relative;
	transition: transform 1s ease-in-out;
	animation: rotationsmall 10s infinite linear;
}


.face-small {
	position: absolute;
	width: 20.1vh;
	height: 20.1vh;
	box-shadow: inset 0 0 5vh black;
}


.front-small {
	background-color: var(--second);
	transform: translateZ(10vh);
	transition: transform 0.5s ease-in-out;
}

.right-small {
	background-color: var(--second);
	transform: rotateY(90deg) translateZ(10vh);
	transition: transform 0.5s ease-in-out;
}

.back-small {
	background-color: var(--second);
	transform: rotateY(180deg) translateZ(10vh);
	transition: transform 0.5s ease-in-out;
}

.left-small {
	background-color: var(--second);
	transform: rotateY(-90deg) translateZ(10vh);
	transition: transform 0.5s ease-in-out;
}

.top-small {
	background-color: var(--second);
	transform: rotateX(90deg) translateZ(10vh);
	transition: transform 0.5s ease-in-out;
}

.bottom-small {
	background-color: var(--second);
	transform: rotateX(-90deg) translateZ(10vh);
	transition: transform 0.5s ease-in-out;
}


.cube-small:hover .top-small {
	transform: rotateX(90deg) translateZ(30vh);
}

.cube-small:hover .front-small {
	transform: translateZ(30vh);
}

.cube-small:hover .left-small {
	transform: rotateY(-90deg) translateZ(30vh);
}

.cube-small:hover .right-small {
	transform: rotateY(90deg) translateZ(30vh);
}

.cube-small:hover .back-small {
	transform: rotateY(180deg) translateZ(30vh);
}

.cube-small:hover .bottom-small {
	transform: rotateX(-90deg) translateZ(30vh);
}

@keyframes rotationsmall {
	from {
		transform: translateX(10vh) translateY(10vh) rotateY(0deg) rotateX(0deg);
	}

	to {
		transform: translateX(10vh) translateY(10vh) rotateY(-360deg) rotateX(-360deg);
	}
}

/* third Cube */
.cube-smaller {
	width: 10vh;
	height: 10vh;
	transform-style: preserve-3d;
	transform: translateX(10vh) translateY(10vh);
	position: relative;
	transition: transform 1s ease-in-out;
	animation: rotationsmaller 10s infinite linear;

}


.face-smaller {
	position: absolute;
	width: 10.1vh;
	height: 10.1vh;
	box-shadow: inset 0 0 5vh black;
	transition: box-shadow 1s ease-in-out
}


.front-smaller {
	background-color: var(--third);
	transform: translateZ(5vh);
	transition: background-color 1s ease-in-out;
}

.right-smaller {
	background-color: var(--third);
	transform: rotateY(90deg) translateZ(5vh);
	transition: background-color 1s ease-in-out;
}

.back-smaller {
	background-color: var(--third);
	transform: rotateY(180deg) translateZ(5vh);
	transition: background-color 1s ease-in-out;
}

.left-smaller {
	background-color: var(--third);
	transform: rotateY(-90deg) translateZ(5vh);
	transition: background-color 1s ease-in-out;
}

.top-smaller {
	background-color: var(--third);
	transform: rotateX(90deg) translateZ(5vh);
	transition: background-color 1s ease-in-out;
}

.bottom-smaller {
	background-color: var(--third);
	transform: rotateX(-90deg) translateZ(5vh);
	transition: background-color 1s ease-in-out;
}



.cube-smaller:hover .face-smaller {
	box-shadow: 0 0 15px var(--third)
}

.cube-smaller:hover .top-smaller {
	background-color: white
}

.cube-smaller:hover .front-smaller {
	background-color: white
}

.cube-smaller:hover .left-smaller {
	background-color: white
}

.cube-smaller:hover .right-smaller {
	background-color: white
}

.cube-smaller:hover .back-smaller {
	background-color: white
}

.cube-smaller:hover .bottom-smaller {
	background-color: white
}



@keyframes rotationsmaller {
	from {
		transform: translateX(5vh) translateY(5vh) rotateX(0deg) rotateZ(0deg);
	}

	to {
		transform: translateX(5vh) translateY(5vh) rotateX(360deg) rotateZ(360deg);
	}
}