* {
  margin: 0;
  pdding: 0;
}

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

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.purple {
  background-color: purple;
}


section {
  width: 100vw; /* LIKE THIS */
  height: 100vh; /* LIKE THIS */
}

nav {
  position: fixed;
  top: 25vh; /* LIKE THIS */
  right: 2vw; /* LIKE THIS */
}

ul {
  list-style-type: none; /* NOW THIS RULE GETS RID OF THE NUMBERS IN THE LIST */
}

a:link {
  display: inline-block;
  width: 2vw;  /* LIKE THIS */
  height: 2vw; /* LIKE THIS */
  border: 0.2vw solid black;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.2);
  margin-bottom: 1vh; /*THIS DIMENSION SHOULD BE CHANGED TO VW INSTEAD OF PX */
}

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

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