body {
    background-image: url("../images/flames.gif");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: bottom 0px;
    background-size: cover;
    background-color: #000;
    display:block;
    color: #fff;
    margin: 0;
    padding: 0;
    max-width:100vw;

    font-family: hwygoth, sans-serif;
}

a {
    text-decoration-line: none;
}

a.navtext {
    transition: color 0.1s;
    color: #000;
}

a.navtext:hover {
    color:white;
    transition: color 0.1s;
}

.navbar {
    animation: navcolor 5s linear 0s infinite normal;
    display: flex;
    background-image: url("../images/cd.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom 0px;
    background-repeat: no-repeat;
    background-color: #CCCCCC;
    
    min-height: 60px;
    margin: 0;
    top: 0;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    font-family: calvera, "Impact", "Impact Condensed", sans-serif;

}

.home-buttons-container {
    display: flex;
    margin: 0;
    justify-content: center;
    flex-wrap: wrap;
}

.navitem {
    text-align: center;
    margin: 0.5em;
    margin-left: 1em;
    margin-right: 1em;
    padding: 0em;
    font-size: 2em;
    min-width: 200px;
    width: 13vw;
    color: black;
    transition: color 0.3s;
}

.navitem:hover {
    transition: color 0.3s;
    color:white;
}

.homebutton {
    text-decoration: none;
    text-decoration-line: none;
    border-radius: 0.15em;
    background-color: #CCCCCC;
    margin: 0.5em;
    padding: 0.25em;
    font-size: 4em;
    min-width: 160px;
    width: 20vw;
    color: black;

    font-family: blackmustang, sans-serif;

    text-align: center;
}

#title {
    text-align: center;
    font-size: 6em;
    color: #FF9900;
    text-shadow: 0px 1px 1px #dd8500, 0px 2px 2px #bb7000, 0px 4px 4px #995c00;
    font-family: calvera, "Impact", "Impact Condensed", sans-serif;
}

#subtitle {
    font-weight:normal;
    text-align: center;
    font-size: 4em;
    color: white;
    font-family: blackmustang, sans-serif;
}

#header {
    font-weight:normal;
    text-align: left;
    margin-left: 1em;
    font-size: 6em;
    color: #FFFFFF;
    font-family: calvera, "Impact", "Impact Condensed", sans-serif;
    line-height: 40%;
}

#subheader {
    font-weight:normal;
    text-align: left;
    margin-left: 3em;
    font-size: 2em;
    color: #FFFFFF;
    line-height: 40%;
}

#subheader a {
    text-decoration: none;
    color: #FF9900;
}

@keyframes navcolor {
    0% {
        filter: saturate(50%) hue-rotate(0);
    }

    100% {
        filter: saturate(50%) hue-rotate(360deg);
    }
}

@font-face {
    font-family: calvera;
    src: url(../misc/Calvera.ttf);
  }

  @font-face {
    font-family: blackmustang;
    src: url(../misc/BlackMustang.ttf);
  }

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


  @media only screen and ((max-width: 759px) or (max-width:5in)){
    #header {
        font-size: 4em;
        text-align: center;
        margin-left: 0;
    }
        body {
            background-attachment: scroll;
            background-size: 250% 250%; /* this is bad but it will work. it doesn't properly fix the problem, but it fixes the page on the one device i've actually tested this with.
            frankly, if your device is taller than mine, fuck you, i can't be assed to fix it.
            
            
            fuck this language*/
        }

  }

  @media ((max-width: 1050px) or (max-width:5in)){
    .homebutton {
        font-size: 4em;
        width: 60vw;
    }
  }


  /* not css3 compliant i think. idfc */