@font-face {
    font-family: 'blacklisted';
    src: url(fonts/Blacklisted.ttf)
}

@font-face {
    font-family: 'cdlight';
    src: url(fonts/CreatoDisplay-Light.otf)
}

@font-face {
    font-family: 'cdblack';
    src: url(fonts/CreatoDisplay-Black.otf)
}



h2{
    font-family: 'cdblack';
    margin: auto;
    text-align: center;
    font-size: 10vw;

}

*{
    margin: 0;
    padding: 0;
}

header, section, footer{
    width: 100vw;
    height: 100vh;
}

nav{
    position: fixed;
    top: 25vh;
    right: 1vw;
   
}

ul{
    list-style: none;
}

a:link{
    display: inline-block;
    width: 4vw;
    height: 4vw;
    border: #FF9B42;
    border-radius: 50%;
    background-color: #ffffff;
    margin-bottom: 1vh;
    text-decoration: none;
    color: #000000;
    font-family: cdlight;
}

span {
    font-size: 3vw;
    opacity: 0;
    position: relative;
    top: 0.2vw;
    right: 3.5vw;
    white-space: nowrap;
    transition: right 0.2s, opacity 0.2s;
}

a:hover span {
    font-size: 1.2 vw;
   right: 9vw;
   opacity: 1;


}

    /* COLOR CLASSES */
.red{
    background-color: red;
}

.forestgreen{
    background-color: #ACF39D;
}

.sandybrown{
    background-color: #FF9B42;
}

.pictonblue{
    background-color: #00A7E1;
}

.vanilla{
    background-color: #EDDEA4;
}

.honeydew{
    background-color: #D9E5D6;
}

.candet grey{
    background-color: #9DB4C0;
}

.gunmetal{
    background-color: #253237;
}

.salmon{
    background-color: #F49097;
}

.maize{
    background-color: #F5E960;
}