#canvas{
width: 60vmin;
height: 62vmin;
margin: 15vmin auto 0 auto;
position: relative;
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 2px black;
}

#beigering{
position: absolute;
left: 0vmin;
top: 0vmin;
width: 20vmin;
height: 21vmin;
background-color: rgb(225, 217, 195);
}

#bluering{
position: absolute;
left: 20vmin;
top: 0vmin;
width: 40vmin;
height: 21vmin;
background-color: rgb(30, 75, 149);  
}

#redring{
position: absolute;
left: 26vmin;
top: 23vmin;
width: 2vmin;
height: 2vmin;
background-color: rgb(206, 54, 43);
} 

#blackring{
position: absolute;
left: 28vmin;
top: 52vmin;
width: 32.2vmin;
height: 10vmin;
background-color: rgb(0, 0, 0);
}  

#blackring2{
position: absolute;
left: 26vmin;
top: 25vmin;
width: 2vmin;
height: 37vmin;
background-color: rgb(0, 0, 0);
}  

#blackring3{
position: absolute;
left: 22vmin;
top: 32vmin;
width: 1vmin;
height: 30vmin;
background-color: rgb(0, 0, 0);
}

#blackring4{
position: absolute;
left: 0vmin;
top: 56vmin;
width: 23vmin;
height: 6vmin;
background-color: rgb(0, 0, 0);
}  

#blackring5{
position: absolute;
left: 5vmin;
top: 59.5vmin;
width: 23vmin;
height: 2.5vmin;
background-color: rgb(0, 0, 0);
}  

#blackring6{
position: absolute;
left: 8vmin;
top: 32vmin;
width: 14vmin;
height: 11vmin;
background-color: rgb(0, 0, 0);
}

body{
  font-family: "Arial Narrow", "Helvetica Condensed", 
    "Myriad Pro Condensed", sans-serif;
}

nav{
  padding: 14px 16px;
  text-align: center;
  background-color: #333;
}

nav a{
  text-decoration: none;
  color: white;
  padding: 14px 16px;
}
a:hover{
  color: white;
  background-color: cadetblue;
}

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