/* *********CSS RESET ***************** */

* {
margin: 0;
padding: 0;
text-decoration: none;

}

/* 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: rgb(255, 255, 255);
   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: 0;
    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: 3em;
    text-align: center;
    padding-top: 40vh;
    color: white;


}
.red {
    background-color: #FA3C30;
}

.coral {
    background-color: #F57B5C;
}

.redorange {
    background-color: #F5854D;
}

.orange {
    background-color: #FAA85B;
}

.orangeyellow {
    background-color: #FAD08C;
}

.yellow {

background-color: rgb(253, 255, 154);
}

.green { 
    background-color: rgb(216, 255, 149);
}

.teal {
    background-color: rgb(151, 255, 207);
}