body {
  background: #FDFFEA;
  font-family: 'DM Sans', sans-serif;
  transform: scale(0.4.0.4);
  transform-origin: 0 0;
  padding: 50px;
  color:#4444dd;
}

.zoom {
  zoom: 60%;
}

.img{
  position: absolute;
  width: 1321px;
  height: 1478px;
  left: 100px;
  top: 100px;
  background: url(assets/ctown.jpeg);
  background-repeat: no-repeat;
  z-index:-3
}


.rectangle {
  box-sizing: border-box;

  position: absolute;
  width: 428.4px;
  height: 1800px;
  left: -50px;
  top: -171px;

  background: #FDFFEA;
  transform: rotate(3.63deg);
  z-index:-1;

}

.rectangle2 {
  box-sizing: border-box;

  position: absolute;
  width: 310px;
  height: 1563px;
  left: 750px;
  top: -900px;

  background: #FDFFEA;
  transform: rotate(100deg);
  z-index:-5;

}

.circle{
  position: absolute;
  width: 352px;
  height: 243px;
  left: 25px;
  top: 104px;

  background: radial-gradient(50% 50% at 50% 50%, #FCFF70 13.02%, rgba(252, 255, 115, 0) 100%);
}

.circlered {
  box-sizing: border-box;
position: absolute;
width: 352px;
height: 243px;
left: 25px;
top: 104px;
background: radial-gradient(50% 50% at 50% 50%, #FCFF70 13.02%, #FF0303 100%);
border-radius: 352px;
z-index: 2;
filter: drop-shadow(10px 10px 4px #4444dd);
}

.circlegold {
  box-sizing: border-box;
position: absolute;
width: 100px;
height: 30px;
left: 220px;
top: 180px;
background: #ffcc00;
border-radius: 352px;
z-index: 1;
filter: drop-shadow(10px 10px 4px #4444dd);
}

.circlegold2 {
  box-sizing: border-box;
position: absolute;
width: 100px;
height: 30px;
left:220px;
top: 390px;
background: #ffcc00;
border-radius: 352px;
z-index: 1;
filter: drop-shadow(10px 10px 4px #4444dd);
}

.line2 {
  box-sizing: border-box;
position: absolute;
width: 5px;
height: 300px;
left: 0px;
top: 300px;
background: #FF0303;
z-index: 2;
}
.line3 {
  box-sizing: border-box;
position: absolute;
width: 5px;
height: 299.5px;
left: -10px;
top: 0px;
background: #FF0303;
z-index: 2;
}
.line4 {
  box-sizing: border-box;
position: absolute;
width: 5px;
height: 299px;
left: 20px;
top:0px;
background: #FF0303;
z-index: 2;
}


.line {
  box-sizing: border-box;
position: absolute;
width: 15px;
height: 500px;
left: 264px;
top: -100px;
background: #FF0303;
z-index: 0;
}

.text {
width: 300px;
height: 60px;
left: 117px;
top: 200px;
display: flex;
justify-content: center;
align-items: center;
padding: 100px;
line-height: 13px;
font-family: 'DM Sans', sans-serif;
color:#4444dd;
}

.invisiblebox {
  position: absolute;
  width: 428.4px;
  height: 1600.33px;
  left: -100px;
  top: -171px;
}

.rectanglebrowngrey {
  box-sizing: border-box;

  position: absolute;
  width: 77.37px;
  height: 100.32px;
  left: 0px;
  top: 500px;

  background: #D1D1D1;
z-index: 2;
}

.rectanglebrowngreyinvisiblebox {
  position: absolute;
  width: 100px;
  height: 120px;
  left: 50px;
  top: -0px;
  z-index: 3;
}

.rectanglebrowngreyinvisiblebox2 {
  position: absolute;
  width: 100px;
  height: 120px;
  left: 0px;
  top: -0px;
  z-index: 3;
}

.rectanglebrowngreyinvisiblebox:hover {
  position: absolute;
  width: 150px;
  height: 250px;
  left: 500px;
  top: -70px;

  background: #EC0997;
  border: 10px solid #663A2E;
  filter: drop-shadow(10px 10px 4px #4444dd);
}

.text2 {
  position: relative;
  left: -50px;
  top: 3px;
  font-size: 12px;
  color: #4444dd;
}

.octagon {
  position: absolute;
  left: 48px;
  top: 150px;
  width: 80px;
  height: 40px;
  background: #D1D1D1;
}

.octagon:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0px;
  width: 40px;
  height: 0px;
  border-bottom: 20px solid;
  border-bottom-color: #D1D1D1;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  z-index: 1;
}

.octagon:after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: 0px;
  width: 40px;
  height: 0px;
  border-top: 20px solid;
  border-top-color: #D1D1D1;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  z-index: 1;
}

.octagoninvisible {
  position: absolute;
  width: 100px;
  height: 90px;
  left: -10px;
  top: -20px;
  z-index: 3;
}

.octagoninvisible:hover {
  background: url(assets/hex.svg);
  position: absolute;
  background-repeat: no-repeat;
  width: 150px;
  height: 250px;
  left: 480px;
  top: 30px;
  filter: drop-shadow(10px 10px 4px #4444dd);

}

.polygon {
  position: absolute;
  top: 100px;
  width: 140px;
  height: 140px;
  clip-path: polygon(0 0, 51% 18%, 49% 98%, 2% 100%);
  z-index: 3;
  background-color: #D1D1D1;

}

.polygoninvisible {
  position: absolute;
  top: 100px;
  width: 100px;
  height: 100px;
  z-index: 3;
}

.polygoninvisible:hover {
  position: absolute;
  top: -380px;
  left: 580px;
  width: 600px;
  height: 600px;
  background: url(assets/polygon.svg) no-repeat;
  z-index: 5;
  filter: drop-shadow(10px 10px 4px #4444dd);

}

.text3 {
  position: relative;
  left: -50px;
  top: 3px;
  font-size: 12px;
  color: #4444dd;
}

.text4 {
  position: relative;
  left: -50px;
  top: 130px;
  font-size: 12px;
  color: #4444dd;
}