*{
    margin: 0;
    padding: 0;
    
}

/* HTML5 Semantic Tags */
header, section, footer {
    width: 100vw;
    height: 100vh;
}

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

ol {
    list-style-type: none;
}


a:link{
    display: inline-block;
    width: 2vw;
    height: 2vw;
    border: 0.2vw solid black;
    border-radius: 50%;
    background-color: aquamarine;
    margin-bottom: 2vh;
    text-decoration: none;
    color: black;
}

a:visited{
    text-decoration: none;
    color: black;
}

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

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

h3{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size: 6em;
    text-align: center;
    padding-top: 40vh;
    color: white;
}
 

/* Color Classes */

.yellow{
    background-color: #FFC43D;
}

.pink{
    background-color: #F4AFAB;
}

.red{
    background-color: #BB4430;
}

.lime{
    background-color: #C3F73A;
}

.light-green{
    background-color: #95E06C;
}

.mint{
    background-color: #68B684;
}

.ocean{
    background-color: #094D92;
}

.licorice{
    background-color: #1C1018;
}