@charset "utf-8";
@font-face{
    font-family: "Spincycle";
    src: url("spincycle_3d_ot.otf") format("truetype");
}
@font-face{
    font-family: "Liberator";
    src: url("Liberator-Heavy.ttf") format("truetype");
}
@font-face{
    font-family: "Verti";
    src: url("vertiup2.ttf") format("truetype");
}

@font-face{
    font-family: "Geoeves";
    src: url("geoeves.otf") format("truetype");
}
body{
    
    background-color: powderblue;
    background-image: url("bc2.gif");
    background-position: center center;

    /* Background image doesn't tile */
    background-repeat: no-repeat;

    /* Background image is fixed in the viewport so that it doesn't move when 
    the content's height is greater than the image's height */
    background-attachment: fixed;

    /* This is what makes the background image rescale based
    on the container's size */
    background-size: cover;
    overflow: hidden;    
  
}
h1{
    font-family: "Liberator";
    color: aliceblue;
    font-size: 12vw;
    text-align: center;
    text-shadow: 2px 2px 4px #000000;
    overflow: hidden;   
}
.HeaderText{
    color: aliceblue;
    text-align: center;
    text-shadow: 2px 2px 4px #000000;
}
a{
    color: aliceblue;
    text-decoration: none;
    font-size: 3vw;
    text-shadow: 2px 2px 4px #000000;
    opacity: .8;
    filter: alpha(opacity=80);
}
a:hover{
    
    opacity: 1;
    filter: alpha(opacity=100);
}
h2{
    font-size: 3vw;
}
h3{
    font-size: 3vw;
}
@media screen and (max-width: 780px) {
    #wholeNav{
        padding: 30vw 20px;
    }
}