@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
html, body {
    background: linear-gradient(orange, gold, red, darkred, red, gold, orange);
    color: black;
    font-family: "Creepster", system-ui;
    margin: 0;
    text-align: center;
    scroll-behavior: smooth;
}
::selection {
    background: rgba(255, 0, 0, 0.67);
}
header {
    background: rgba(255, 0, 0, 0.541);
    color: white;
    font-family: Arial, sans-serif;
    width: 94%;
    text-align: center;
    position: fixed;
    top: 1.5vh;
    left: 2.3%;
    border-radius: 10px;
    border: 1px solid white;
    box-shadow: 0 0 5px lightgray;
    z-index: 1;
    overflow: visible;
}
header a {
    color: white;
}
header h2 {
    margin: 0;
    padding: 0;
}
.headerNote {
    color: white;
    font-family: Arial, Arial, Helvetica, sans-serif;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.541);
}
.aboutUs {
    width: 100%;
    background: linear-gradient(#4D2C54, black);
    color: white;
    text-align: center;
}
footer {
    background: black;
    color: white;
    width: 100%;
}
footer a {
    color: white;
    font-size: 1.5em;
}
footer p {
    font-size: 1.2em;
}
footer a.websiteLink {
    color: red;
    font-family: Segoe UI Light, Segoe UI, Arial;
}
.bar {
    height: 50px;
    width: 80%;
    background: rgba(128, 128, 128, 0.541);
    border-radius: 8px;
}
.progress {
    height: 50px;
    width: 0px;
    background: rgba(255, 0, 0, 0.67);
    box-shadow: 0 0 5px red;
    transition: 1s ease-in-out;
    border-radius: 8px;
    animation: change 5s ease infinite;
}
@keyframes change {
    0%, 100% {
        background: rgba(255, 0, 0, 0.67);
        box-shadow: 0 0 10px red;
    }
    25% {
        background: rgba(255, 153, 0, 0.67);
        box-shadow: 0 0 20px orange;
    }
    50% {
        background: rgba(238, 255, 0, 0.67);
        box-shadow: 0 0 10px yellow;
    }
    75% {
        background: rgba(0, 255, 0, 0.67);
        box-shadow: 0 0 20px lime;
    }
}
.account {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(#4D2C54, rgba(255, 255, 255, 0.67));
    z-index: 1;
    color: white;
    display: none;
}
@keyframes switchBackgrounds {
    from {
        background: url("header.avif");
        background-size: 100% 100vh;
    }
    to {
        background: url("moon.jpg");
        background-size: 100% 100vh;
    }
}