@charset "utf-8";
/* CSS Document */
* {
		margin: 0;
		padding: 0;
		color: #000;
	}



#canvas{
	padding-top: 100px;
	
	
}


.dot1 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot2 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot3 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot4 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot5 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot6 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot7 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot8 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot9 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot10 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot11 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot12 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot13 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot14 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot15 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot16 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot17 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot18 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot19 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot20 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot21 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot22 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot23 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot24 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot25 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot26 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot27 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot28 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot29 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot30 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot31 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot32 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot33 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot34 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot35 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot36 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot37 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot38 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot39 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot40 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot41 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot42 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot43 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot44 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot45 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot46 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot47 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot48 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot49 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot50 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot51 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot52 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot53 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot54 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot55 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot56 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot57 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot58 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot59 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot60 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot61 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot62 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot63 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot64 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot65 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot66 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot67 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot68 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot69 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot70 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot71 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot72 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot73 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot74 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot75 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot76 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot77 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot78 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot79 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}
.dot80 {
  height: 1vw;
  width: 1vw;
  background-color: thistle;
  border-radius: 50%;
  display: inline-block;
margin:10px;
}

/* Hover */


.dot1:hover {
  background-color: #05c3c9;

}
.dot2:hover {
   background-color: #7755fc;
}
.dot3:hover {
   background-color: #d43bfc;
 
}
.dot4:hover {
   background-color: #cabe49;
 }
.dot5:hover {
    background-color: #c7dd78;
 }
.dot6:hover {
   background-color: #460a68;
 }
.dot7:hover {
   background-color: #e9dd9f;
 }
.dot8:hover {
    background-color: #d292be;
  }
.dot9:hover {
  background-color: #b5df6f;
}
.dot10:hover {
  background-color: #fdfd77;
}
.dot11:hover {
  background-color: #cff686;
}
.dot12:hover {
  background-color: #b9eb7a;
}
.dot13:hover {
  background-color: #77faf2;
}
.dot14:hover {
  background-color: #084b1e;
}
.dot15:hover {
  background-color: #3a4251;
}
.dot16:hover {
  background-color: #127a76;
}
.dot17:hover {
  background-color: #909a97;
}
.dot18:hover {
  background-color: #cf23c8;
}
.dot19:hover {
  background-color: #36b10d;
}
.dot20:hover {
  background-color: #b306e8;
}
.dot21:hover {
  background-color: #28427d;
}
.dot22:hover {
  background-color: #98d0d0;
}
.dot23:hover {
  background-color: #c5c5f8;
}
.dot24:hover {
  background-color: #a27d27;
}
.dot25:hover {
  background-color: #277437;
}
.dot26:hover {
  background-color: #dd6a49;
}
.dot27:hover {
  background-color: #ee6844;
}
.dot28:hover {
  background-color: #624624;
}
.dot29:hover {
  background-color: #4ff1e5;
}
.dot30:hover {
  background-color: #ca69e2;
}
.dot31:hover {
  background-color: #9c2eb4;
}
.dot32:hover {
  background-color: #70dfa4;
}
.dot33:hover {
  background-color: #edd766;
}
.dot34:hover {
  background-color: #711c91;
}
.dot35:hover {
  background-color: #3c5e64;
}
.dot36:hover {
  background-color: #810ae2;
}
.dot37:hover {
  background-color: #5c3dbe;
}
.dot38:hover {
  background-color: #7ac532;
}
.dot39:hover {
  background-color: #41b9c1;
}
.dot40:hover {
  background-color: #a7dc2d;
}
.dot41:hover {
  background-color: #daa0ff;
}
.dot42:hover {
  background-color: #813931;
}
.dot43:hover {
  background-color: #9bb00a;
}
.dot44:hover {
  background-color: #1cbdcb;
}
.dot45:hover {
  background-color: #af6e49;
}
.dot46:hover {
  background-color: #e5df0b;
}
.dot47:hover {
  background-color: #c037f8;
}
.dot48:hover {
  background-color: #0433d9;
}
.dot49:hover {
  background-color: #6de40e;
}
.dot50:hover {
  background-color: #7cb524;
}
.dot51:hover {
  background-color: #53b73d;
}
.dot52:hover {
  background-color: #642c55;
}
.dot53:hover {
  background-color: #f27c84;
}
.dot54:hover {
  background-color: #0f6c5b;
}
.dot55:hover {
  background-color: #d58b8f;
}
.dot56:hover {
  background-color: #a32aa4;
}
.dot57:hover {
  background-color: #04bf8a;
}
.dot58:hover {
  background-color: #fc5788;
}
.dot59:hover {
  background-color: #c2a4af;
}
.dot60:hover {
  background-color: #83d8b4;
}
.dot61:hover {
  background-color: #fbac1a;
}
.dot62:hover {
  background-color: #f8ad93;
}
.dot63:hover {
  background-color: #e174c6;
}
.dot64:hover {
  background-color: #78645d;
}
.dot65:hover {
  background-color: #f41604;
}
.dot66:hover {
  background-color: #1b4115;
}
.dot67:hover {
  background-color: #37bbb8;
}
.dot68:hover {
  background-color: #aed570;
}
.dot69:hover {
  background-color: #823c30;
}
.dot70:hover {
  background-color: #e968e5;
}
.dot71:hover {
  background-color: #ca0927;
}
.dot72:hover {
  background-color: #eb6b18;
}
.dot73:hover {
  background-color: #a28f27;
}
.dot74:hover {
  background-color: #4dbd4f;
}
.dot75:hover {
  background-color: #e88627;
}
.dot76:hover {
  background-color: #914854;
}
.dot77:hover {
  background-color: #ef9194;
}
.dot78:hover {
  background-color: #d472ba;
}
.dot79:hover {
  background-color: #fe30c4;
}
.dot80:hover {
  background-color: #1b94a0;
}