@charset "utf-8";


/* Font Import */

@font-face {
font-family: "Enupra Display";
src: url("fonts/Enupra-Display.ttf") format("truetype");
}

@font-face {
font-family: "LinLibertine_R";
src: url("fonts/LinLibertine_R.otf") format("truetype");
}


/* Presettings */

* {
box-sizing: border-box;
color: inherit;
cursor: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
line-height: 100%;
margin: 0;
padding: 0;
text-decoration: none;
}

html {
background-color: blue;
color: white;
cursor: default;
font-family: "LinLibertine_R", serif;
font-size: 1.6071428571428572vw;
}

html,
body {
height: 100%;
overflow: hidden;
width: 100%;
}


/* Header */

header {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}

#header_animation {
height: 20vw;
perspective: 100vw;
width: 20vw;
}

#cube {
animation: rotation 10s infinite alternate-reverse linear;
height: 100%;
transform-style: preserve-3d;
width: 100%;
}

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

100% {
transform: rotateX(-360deg) rotateY(-360deg);
}
}

#cube div {
color: greenyellow;
font-family: "Enupra Display", sans-serif;
font-size: 25vw;
height: 30vw;
position: absolute;
text-transform: uppercase;
width: 30vw;
}

#front {
transform: rotateY(0deg) translateZ(10vw);
}

#back {
transform: rotateY(180deg) translateZ(10vw);
}

#right {
transform: rotateY(90deg) translateZ(10vw);
}

#left {
transform: rotateY(-90deg) translateZ(10vw);
}

#top {
transform: rotateX(90deg) translateZ(10vw);
}

#bottom {
transform: rotateX(-90deg) translateZ(10vw);
}


/* Backdrop Filter */

#backdrop_filter {
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}


/* Footer */

footer {
bottom: 0;
display: flex;
left: 0;
padding: 0 0.9876543209876543rem 0.7818930041152263rem 0.9876543209876543rem;
position: fixed;
width: 100%;
}

footer a {
letter-spacing: 0.2em;
text-transform: uppercase;
transition: filter 0.4s linear;
}

footer a:hover {
cursor: alias;
filter: blur(0.1646090534979424rem);
}

footer a:last-child {
margin-left: auto;
}


/* Window Size A Start */

@media screen and (max-width: 1100px) {


/* Presettings */

html {
font-size: 20px;
}


/* Window Size A End */

}


/* Window Size B Start */

@media screen and (max-width: 570px) {


/* Presettings */

html {
font-size: 3.9vw;
}


/* Window Size B End */

}