.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;

}
.space-background {
    background-image: url("img/background.jpg");
    background-size: cover;
}

.rings {
    background-image: url("img/rings.png");
    background-size: cover;
}

.planets {
    background-image: url("img/planets.png");
    background-size: cover;
}

.sun {
    background-image: url("img/sun.png");
    background-size: cover;
}

.hidden-preload {
    display: none;
}

#loading_bar {
    border:1px solid #448;
    padding:2px;
    height: 25px;
    width: 200px;
    display:flex;
    justify-items: left;
}

#loading_bar_progress {
    background: #448;
    height: 100%;

}

#loading_modal {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:black;
    z-index:10;
    display:none;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s;
    pointer-events: none;
}

.qwarq-robotics-text {
    /*position:fixed;*/
    font-family: monospace;
    color:white;
    /*bottom:18%;*/
    /*font-size: 7vh;*/
    /*right:5%;*/
    text-shadow: 2px 2px 5px black;
    cursor: pointer;
    width: 100%;
    filter: saturate(1.5) contrast(1.5) brightness(1.3) drop-shadow(2px 4px 4px black);
}

.link-text {
    box-sizing: border-box;
    border: 3px solid transparent;
    padding: 10px;
}

.link-text:hover {
    border: 3px solid white;
    border-radius: 10px;
}

.enter-text {
    position: relative;
    font-family: Exo2, monospace;
    color:white;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    /*bottom:5%;*/
    /*right:8%;*/
    font-size: 20pt;
    text-shadow: 2px 2px 5px black;
}

.floating-tau {
    position: fixed;
    top: 10%;
    left:15%;
    filter: drop-shadow(2px 8px 16px black);
    aspect-ratio: auto;
    max-height: 70%;
    animation-name: tauFloat;
    animation-duration: 6s;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes tauFloat {
    0% {top: 18%; left: 10%}
    100% {top: 32%; left: 7%}
}

.floating-qwarqbot {
    position: fixed;
    top: 7%;
    left:30%;
    filter: drop-shadow(2px 4px 8px black);
    aspect-ratio: auto;
    max-height: 20%;
    animation-name: qwarqbotFloat;
    animation-duration: 5s;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.hidden-preload {
    display: none;
}

@keyframes qwarqbotFloat {
    0% {top: 5%; left: 50%}
    100% {top: 20%; left: 52%}

}

@font-face {
    src: url("/8bitoperator_jve.ttf");
    font-family: "8bitoperator";
}

@font-face {
    src: url("/Exo2.ttf");
    font-family: "Exo2";
}