@font-face {
    font-family: hardpixel;
    src: url("fonts/Hardpixel.OTF")
}

.main {
    margin: 20px;
}

a {
    color: yellow;
}

/* navigation bar */ 
@media screen and (max-width: 9999999px) {
    .navdesk {
        display: block;
    }
    
    .navphone {
        display: none;
    }
}

@media screen and (max-width: 1250px) {
    .navdesk {
        display: none;
    }
    
    .navphone {
        display: block;
    }
}

.navdesk {
    position: fixed;
    width: 100%;
    text-align: center;
    bottom: 0;
    margin-bottom: -20px;
}

.navphone {
    position: fixed;
    width: 100%;
    margin-left: -7px;
    text-align: center;
    bottom: 0;
}

/* inactive buttons */
.navdesk a:link, a:visited {
    opacity: 0.6;
}

.navdesk a:hover, a:active {
    opacity: 1;
}

/* silly squares:tm: */
@keyframes rotate {
    0% {rotate: 0deg;}
    100% {rotate: 450deg;}
}

@keyframes fade {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes fall {
    0% {top: -60px; left: 0px;}
    100%  {top: 230px; left: 5px;}
}

.squares {
    width: 48px;
    height: 48px;
    position: absolute;
    animation: rotate 1.7s, fade 1.7s, fall 1.7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.squares2 {
    width: 48px;
    height: 48px;
    position: absolute;
    animation: rotate 1.7s, fade 1.7s, fall 1.7s;
    animation-delay: 0.33s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.squares3 {
    width: 48px;
    height: 48px;
    position: absolute;
    animation: rotate 1.7s, fade 1.7s, fall 1.7s;
    animation-delay: 0.66s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.squares4 {
    width: 48px;
    height: 48px;
    position: absolute;
    animation: rotate 1.7s, fade 1.7s, fall 1.7s;
    animation-delay: .99s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.squares5 {
    width: 48px;
    height: 48px;
    position: absolute;
    animation: rotate 1.7s, fade 1.7s, fall 1.7s;
    animation-delay: 1.33s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}