*{
    margin: 0;
    padding: 0;
}

/* HTML5 Semantic Tags */

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

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

ul{
    list-style-type: none;
}

a:link{
    display: inline-block;
    width: 3vw;
    height: 3vw;
    border: 0.2vw solid black;
    border-radius: 50%;
    background-color: beige;
    margin-bottom: 2vh;
    text-decoration: none;
    color: black;
    font-family: 'Courier New', Courier, monospace;
}

a:visited{
    text-decoration: none;
    color: #575A4B;
}

a:hover span{
    font-size: 2vw;
    right: 18vw;
    opacity: 1;
    margin-bottom: 2vh;
}

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

h3{
    font-family: inside-out;
    font-size: 4em;
    text-align: center;
    padding-top: 40vh;
    color: #272D2D;
}

/* Color Classes*/

.eggshell{
    background-color: #FAF3DD;
}

.green{
    background-color: #C8D5B9;
}

.blue{
    background-color: #8FC0A9;
}

.verdigris{
    background-color: #68B0AB;
}

.grey{
    background-color: #696D7D;
}

.dark-green{
    background-color: #4E6E5D;
}

.davy{
    background-color: #4D5057;
}

.alice{
    background-color: #EDF5FC;
}


/* Fonts */
@font-face {
    font-family: inside-out;
    src: url(../../../fonts/InsideOut-DAp0.ttf)
}