@font-face{
    font-family: "Liberator";
    src: url("Liberator-Heavy.ttf") format("truetype");
}
@font-face{
    font-family: "Ladi";
    src: url("Ladi-Dense.otf") format("truetype");
}
@font-face{
    font-family: "Geoeves";
    src: url("geoeves.otf") format("truetype");
}
body{
    
    
    background-color: powderblue;
    background-image: url("bc0.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;
  
}
.wholeNavigation {
    /*
    padding-top: 2%;
    */
    padding-top: 2vh;
}
h1 {
    font-family: "Ladi";
    color: aliceblue;
    color: #F5F5DC;
    /*font-size: 275px;*/
    font-size: 10vw;
    text-align: center;
    padding-top: 150px;
    text-shadow: 2px 2px 4px #000000;
    margin-bottom: 0px;
    
}
#navi{
    position: relative;
    text-align: center;
    padding-top: 150px;
}
#social{
    position: relative;
    text-align: center;
    padding-top: 45px;
}
a{
    font-family: "Liberator";
    font-size: 40px;
    /*
    color: yellow;
    */
    text-decoration: none;
    text-shadow: 2px 2px 4px #000000;
    padding-right: 25px;
    opacity: .80;
    filter: alpha(opacity=80);
}
.menu{
    /*
    color: #EED2CC;
    */
    color: #FF3232;
}
.soc{
    /*
    color: red;
    
    color: #9CF6F6;
    */
    color: #ffe9ca;
}
a:hover{
    opacity: 1.0;
    filter: alpha(opacity=100);
    /* color: darkorange; */
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    
}
@media only screen and (max-width: 1380px) {
    h1 {
    text-align: center;
    padding-top: 150px;
    }
}
@media only screen and (max-width: 1200px) {

    .wholeNavigation {
        padding-top: 30vh;   
    }
}