@font-face {
    font-family: "Lexend";
    src: url("/resources/Lexend.ttf") format("truetype");
}
@font-face {
    font-family: "Space Grotesk";
    src: url("/resources/SpaceGrotesk.ttf") format("truetype");
}
html {
    background-color: #070707;
    color: #ffffff;
    font-family: "Space Grotesk";
    font-size: 20px;
}
#main {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%; height: 100%;
    left: 0; top: 0;
    text-align: center;
}
@keyframes BlurIn {
    0% { opacity: 0; filter: blur(30px); }
    60% { opacity: 0; filter: blur(30px); }
    100% { opacity: 1; filter: blur(0px); }
}
#maintitle {
    font-size: 60px;
    color: #ffffff49;
    animation: BlurIn 3s ease forwards;
}
#maintitle #highlighted {
    color: #ffffff;
}
@keyframes Pulse {
    0% { color: #ffffff }
    50% { color: #ffffff49 }
    10% { color: #ffffff }
}
.subheading {
    opacity: 0;
    animation: Pulse 2s ease infinite, BlurIn 3s ease forwards;
}
@keyframes FadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}
.particles {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    filter: blur(25px);
    animation: FadeIn 3s ease forwards;
}
.FGparticles {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    animation: BlurIn 3s ease forwards;
}
.cube {
    width: 400px; height: 400px;
    margin-bottom: 20px; margin-top: 20px;
    filter: drop-shadow(0 0 200px #ffffff53);
    animation: BlurIn 3s ease forwards;
}