body {
  background-color: #4d3828;
  display: flex;
  justify-content: center;
}

#button {
  background: #240002;
  background: linear-gradient(0deg, #240002 0%, #71232b 44%, #a80000 100%);
  border-radius: 30px 0;
  color: #fffaf0;
  cursor: pointer;
  padding: 30px 25px;
  position: absolute;
  text-align: center;
  top: 160px;
  transform: skewY(-8deg);
  width: 160px;
  z-index: 10;
}
#button.hide {
  display: none;
}
#button #oath {
  font-family: 'Tangerine', cursive;
  font-size: 48px;
}
#button #instructions {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  margin-top: 25px;
}

#map {
  display: flex;
  height: 550px;
  margin-top: 30px;
  position: relative;
  width: 1800px;
}

.main {
  border: dashed 5px #8d7358;
  height: 90%;
  overflow: hidden;
  position: relative;
}

#cover {
  background-color: #dbc195;
  background-image: url("https://transparenttextures.com/patterns/low-contrast-linen.png");
  box-shadow: 5px 10px 18px #888888;
  height: 100%;
  position: relative;
  transform: skewY(-8deg);
  width: 20%;
}
#cover #cover-art {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  opacity: 0;
  position: relative;
  width: 100%;
}
#cover #cover-art.show {
  transition: 5000ms ease;
  opacity: 1;
}
#cover #title {
  background: #240002;
  background: linear-gradient(0deg, #240002 0%, #71232b 44%, #a80000 100%);
  font-family: 'Literata', serif;
  height: 150px;
  width: 150px;
}
#cover #title span {
  display: block;
  font-family: 'Tangerine', cursive;
}
#cover #title div {
  color: #fffaf0;
  font-size: 24px;
  font-weight: bold;
  position: relative;
  right: 10px;
  text-align: center;
  top: 30px;
  transform: rotate(-45deg);
}
#cover #castle-walls {
  align-items: center;
  border: solid 7px #8d7358;
  background-color: tan;
  display: flex;
  height: 180px;
  justify-content: center;
  position: relative;
  transform: rotate(45deg);
  width: 180px;
  z-index: 1;
}
#cover #castles {
  display: flex;
  height: 400px;
  justify-content: center;
  position: absolute;
  width: 100%;
}
#cover .castle {
  padding: 10px;
}
#cover .castle__bottom {
  border: solid 7px #8d7358;
  height: 120px;
  width: 36px;
}
#cover .castle__top {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #8d7358;
}
#cover .castle#castle2 {
  bottom: 40px;
  position: relative;
}
#cover .cover-text {
  border-bottom: dashed 5px #8d7358;
  border-top: dashed 5px #8d7358;
  height: 30px;
  position: absolute;
  width: 150px;
}
#cover .cover-text#text1 {
  top: 430px;
}
#cover .cover-text#text2 {
  top: 445px;
}

.dot {
  border-radius: 50%;
  cursor: pointer;
  height: 20px;
  width: 20px;
}

.info {
  background-color: #fffaf0;
  border-radius: 0 15px;
  display: none;
  font-family: 'Merriweather Sans', sans-serif;
  font-size: 12px;
  left: 25px;
  margin-left: 5px;
  overflow: hidden;
  padding: 5px;
  width: 100px;
}
.info div {
  margin: 5px;
}

.info.show {
  display: block;
}

.field {
  color: gray;
  font-weight: bold;
}

.wizard {
  display: flex;
  position: absolute;
  z-index: 5;
}

.circle {
  border-radius: 50%;
  position: relative;
}

.box {
  border: solid 7px #8d7358;
  position: absolute;
}

.line {
  background-color: #8d7358;
  position: absolute;
  width: 12px;
}

.block {
  border-radius: 15px;
  position: absolute;
}
.block__large {
  border: solid 15px #8d7358;
  transform: rotate(25deg);
}
.block__small {
  border: solid 10px #8d7358;
  transform: rotate(-25deg);
}
.block__smaller {
  border: solid 8px #8d7358;
  transform: rotate(-5deg);
}

.panel {
  align-items: center;
  background-color: #dbc195;
  background-image: url("https://transparenttextures.com/patterns/low-contrast-linen.png");
  box-shadow: 5px 10px 18px #888888;
  display: flex;
  justify-content: center;
  width: 20%;
}

#panel1 {
  border-right: solid 1px #dac8b9;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  transform: skewY(-8deg);
  width: 20%;
}
#panel1 .main {
  border-right: none;
  margin-left: 20px;
  width: 95%;
}
#panel1 #circle1 {
  background-color: tan;
  border: solid 2px #8d7358;
  height: 150px;
  left: 260px;
  top: 300px;
  width: 150px;
  z-index: 1;
}
#panel1 #circle2 {
  background-color: rgba(100, 66, 32, 0.3);
  border: solid 10px #8d7358;
  height: 210px;
  left: 220px;
  top: 110px;
  width: 210px;
}
#panel1 #circle3 {
  border: solid 11px #8d7358;
  height: 330px;
  left: 160px;
  top: -180px;
  width: 330px;
}
#panel1 #circle4 {
  border: solid 11px #8d7358;
  height: 440px;
  left: 120px;
  top: -580px;
  width: 440px;
}
#panel1 #circle5 {
  border: dashed 11px #8d7358;
  height: 620px;
  left: 30px;
  top: -1130px;
  width: 620px;
}
#panel1 #circle5 .line1 {
  top: -10px;
  height: 90px;
  left: 279px;
  transform: rotate(-5deg);
}
#panel1 #circle5 .line2 {
  top: 11px;
  height: 90px;
  left: 195px;
  transform: rotate(-23deg);
}
#panel1 #circle5 .box1 {
  top: 24px;
  left: 192px;
  height: 10px;
  transform: rotate(-14deg);
  width: 80px;
}
#panel1 #circle5 .line3 {
  top: 40px;
  height: 90px;
  left: 144px;
  transform: rotate(-35deg);
}
#panel1 #circle5 .line4 {
  top: -75px;
  height: 270px;
  left: 35px;
  transform: rotate(-45deg);
}
#panel1 #circle5 .box2 {
  top: 80px;
  left: 87px;
  height: 15px;
  transform: rotate(-40deg);
  width: 54px;
}
#panel1 #circle5 .box3 {
  top: 107px;
  left: 115px;
  height: 15px;
  transform: rotate(-40deg);
  width: 42px;
}
#panel1 #circle5 .line5 {
  top: 155px;
  height: 90px;
  left: 53px;
  transform: rotate(-65deg);
  width: 8px;
}
#panel1 #circle5 .line6 {
  top: 233px;
  height: 90px;
  left: 30px;
  transform: rotate(-85deg);
}
#panel1 #circle5 .line7 {
  top: 302px;
  height: 90px;
  left: 35px;
  transform: rotate(-95deg);
  width: 8px;
}
#panel1 #circle5 .box4 {
  top: 395px;
  left: 5px;
  height: 10px;
  transform: rotate(-17deg);
  width: 84px;
}
#panel1 #circle6 {
  border: double 10px #8d7358;
  height: 720px;
  left: -30px;
  top: -1820px;
  width: 720px;
}

#panel2 {
  height: 100%;
  overflow: hidden;
  position: relative;
  transform: skewY(8deg);
  width: 20%;
}
#panel2 .main {
  border-left: none;
  border-right: none;
  width: 100%;
}
#panel2 #block1 {
  height: 150px;
  top: 350px;
  width: 100px;
}
#panel2 #block2 {
  height: 50px;
  left: -30px;
  top: 225px;
  width: 60px;
}
#panel2 #block3 {
  height: 75px;
  left: 70px;
  top: 240px;
  width: 40px;
}
#panel2 #block4 {
  height: 75px;
  left: 145px;
  top: 270px;
  width: 25px;
}
#panel2 #block5 {
  border: dashed 15px #8d7358;
  height: 175px;
  left: -65px;
  top: -10px;
  width: 150px;
}
#panel2 #block6 {
  height: 120px;
  left: 145px;
  top: 70px;
  width: 55px;
}
#panel2 #block7 {
  border-left: dashed 15px #8d7358;
  height: 375px;
  left: 200px;
  top: 170px;
  width: 75px;
}

#panel3 {
  border-right: solid 1px #dac8b9;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  position: relative;
  transform: skewY(8deg);
}
#panel3 .main {
  border-left: none;
  border-right: none;
  width: 100%;
}
#panel3 #block8 {
  height: 50px;
  left: 20px;
  top: 400px;
  width: 75px;
}
#panel3 #block9 {
  border-top: dashed 10px #8d7358;
  height: 80px;
  left: 130px;
  top: 355px;
  width: 120px;
}
#panel3 #block10 {
  height: 40px;
  left: 10px;
  top: 320px;
  width: 80px;
}
#panel3 #block11 {
  height: 40px;
  left: 115px;
  top: 280px;
  width: 65px;
}
#panel3 #block12 {
  height: 50px;
  left: 200px;
  top: 240px;
  width: 70px;
}
#panel3 #block13 {
  height: 90px;
  left: 50px;
  top: 150px;
  width: 110px;
}
#panel3 #block14 {
  border: dashed 10px #8d7358;
  height: 75px;
  left: 10px;
  top: 74px;
  width: 110px;
}
#panel3 #block15 {
  height: 65px;
  left: 195px;
  top: 95px;
  width: 30px;
}
#panel3 #circle6 {
  border: solid 9px #8d7358;
  border-radius: 50%;
  height: 75px;
  left: 140px;
  position: absolute;
  top: 20px;
  width: 75px;
}

#panel4 {
  border-right: solid 1px #fffaf0;
  height: 100%;
  overflow: hidden;
  position: relative;
  transform: skewY(-8deg);
}
#panel4 .main {
  border-left: none;
  margin-right: 20px;
  width: 95%;
}
#panel4 #block16 {
  height: 60px;
  left: 50px;
  top: 400px;
  width: 125px;
}
#panel4 #block17 {
  height: 50px;
  left: 30px;
  top: 325px;
  width: 90px;
}
#panel4 #block18 {
  border: dashed 8px #8d7358;
  height: 50px;
  left: 150px;
  top: 315px;
  width: 80px;
}
#panel4 #block19 {
  border: dashed 8px #8d7358;
  height: 40px;
  left: 20px;
  top: 250px;
  width: 65px;
}
#panel4 #block20 {
  height: 40px;
  left: 110px;
  top: 240px;
  width: 110px;
}
#panel4 #block21 {
  height: 60px;
  left: 30px;
  top: 150px;
  width: 40px;
}
#panel4 #block22 {
  height: 60px;
  left: 100px;
  top: 144px;
  width: 55px;
}
#panel4 #block23 {
  height: 60px;
  left: 185px;
  top: 138px;
  width: 40px;
}
#panel4 #block24 {
  height: 60px;
  left: 20px;
  top: 44px;
  width: 55px;
}
#panel4 #block25 {
  height: 60px;
  left: 100px;
  top: 38px;
  width: 35px;
}
#panel4 #block26 {
  border: dashed 8px #8d7358;
  height: 60px;
  left: 160px;
  top: 34px;
  width: 65px;
}