* {
	margin: 0;
	padding: 0;
}

header {
background-color: #fcfafb;
width: 50vw;
height: 7vw;
}

main#canvas {background-color: #fcfafb;
width: 50vw;
height: 42vw;
}

section#container {background-color: #fcfafb;
width: 7vw;
height: 42vw;
}

section#containerdots {background-color: #fcfafb;
width: 36vw;
height: 35vw;
margin-left: 7.5vw;
}

.dot1 {
  height: 12px;
  width: 12px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
}

.dot3 {
  height: 30px;
  width: 30px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
}

.dot2 {
  height: 19px;
  width: 19px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
}

.row1 {
	background-color: #fcfafb;
	height: 2.15vw;
	display: flex;
	align-items: center;
}

section#dot1 {
  padding-right: 10%; 
}

section#dot2 {
  padding-right: 8%; 
}

section#dot3 {
  padding-right: 7.5%; 
}

section#dot4 {
  padding-right: 23%; 
}

section#dot5 {
  padding-right: 8%; 
}

section#dot6 {
  padding-right: 21%; 
}

section#dot8 {
  padding-left: 5%; 
  padding-right:21%;
}

section#dot9 {
  padding-right: 21%; 
}

section#dot10 {
  padding-right: 20%; 
}

section#dot11 {
  padding-right: 21%; 
}

section#dot12 {
  padding-right: 22%; 
}
section#dot13 {
  padding-right: 10%; 
}
section#dot14 {
  padding-right: 21%; 
}
section#dot15 {
  padding-right: 34.5%; 
}

section#dot17 {
  padding-left: 41%; 
}
section#dot18 {
  padding-left: 21%; 
}
section#dot19 {
  padding-left: 21%; 
}

section#dot20 {
  padding-left: 10.5%; 
}
section#dot21 {
  padding-left: 18%; 
}
section#dot22 {
  padding-left: 19%; 
}
section#dot23 {
  padding-left: 19%; 
}

section#dot24 {
  padding-left: 18%; 
}
section#dot25 {
  padding-left: 20%; 
}
section#dot26 {
  padding-left: 33.5%; 
}

section#dot27 {
padding-right: 10%;
}
section#dot28 {
  padding-right: 33.5%; 

}
section#dot29 {
  padding-right: 22%; 

}
section#dot30 {
  padding-right: 22.5%; 

}
section#dot31 {
}

section#dot32 {
padding-left: 5%;
}
section#dot33 {
padding-left: 21%;
}
section#dot34 {
padding-left: 20%;

}
section#dot35 {
padding-left: 21%;

}
section#dot36 {
padding-left: 9%;

}
section#dot37 {
padding-left: 10%;

}
section#dot38 {
padding-left: 19%;

}
section#dot39 {
padding-left: 54.5%;

}
section#dot40 {
padding-left: 65%;

}
section#dot41 {
padding-left: 8.5%;

}
section#dot42 {

}
section#dot43 {
padding-left: 10%;

}
section#dot44 {
padding-left: 9%;

}
section#dot45 {
padding-left: 22%;

}
section#dot46 {
padding-left: 8.5%;

}
section#dot47 {
padding-left: 20%;
}
section#dot48 {
padding-left: 10%;

}

section#dot49 {
padding-left: 18%;
}

section#dot50 {
padding-left: 20%;

}
section#dot51 {
padding-left: 43.5%;

}

section#dot52 {

}

section#dot53 {
padding-left: 18%;

}

section#dot54 {
padding-left: 18%;

}
section#dot55 {
padding-left: 29%;

}
section#dot56 {
padding-left: 6%;

}

section#dot57 {
padding-left: 32%;

}
section#dot58 {
padding-left: 20%;

}
section#dot59 {
padding-left: 20%;

}

section#dot60 {
padding-left: .5%;
}
section#dot61 {
padding-left: 21%;

}
section#dot62 {
padding-left: 45%;

}
section#dot63 {
padding-left: 22.5%;

}
section#dot64 {
padding-left: 17%;

}
section#dot65 {
padding-left: 9%;

}
section#dot66 {
padding-left: 20%;

}
section#dot67 {
padding-left: 21%;

}
section#dot68 {
padding-left: 8%;

}

section#dot69 {
  padding-left: .5%;
}

section#dot70 {
padding-left: 21%;

}
section#dot71 {
padding-left: 8.5%;

}
section#dot72 {
padding-left: 8%;

}
section#dot73 {
padding-left: 8%;

}
section#dot74 {
padding-left: 8%;

}
section#dot75 {
padding-left: 22.5%;

}

.dot1:hover {
  background-color: powderblue;
}

.dot2:hover {
  background-color: yellow;
}
.dot3:hover {
  background-color: magenta;
}