*{
  margin:0;
  padding:0;
}
header,section {
  width: 100vw;
  height: 100vh;
}
nav{
  position:fixed;
  top:2vh;
  right: 20px;
  

}
ul{
  list-style-type: none;
  /*buttons*/
}
figure{
  width: 2vw;
  height: 2vw;
  border: 0.2vw solid white;
  background-color: gray;
  border-radius: 50%;
  margin-bottom: 1vw;
}
figure:hover{
  background-color: white;
  border-color: gray;
 /*images*/
}
img{
  
  top:3%;
  left: 2%;
  width: 45%;
  height: auto;
  float: left;
  margin-right: 1%;
  margin-bottom: 1%;
  background-attachment: scroll;

}
.mobile{
  width:20%;
  height: auto;
}


/* css color classes */

.red{
  background-color: red;
}
.orange{
  background-color:orange;
}.yellow{
  background-color: yellow;
}.green{
  background-color:green;
}.blue{
  background-color: blue;
}
.purple{
  background-color: purple;
}
.olive{
  background-color: #a3bcb6;
}
.leaf{
  background-color: #39603d;
}
.tanly{
  background-color: #daded4;

}

/*try*/