*{
  box-sizing: border-box;
}
@font-face {
	font-family: Pirate;
	src: url("PoE.ttf");
}
body{
    margin: 0;
    font-family: Pirate;
    background-image: url("images/mapbackground.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    overflow: hidden;
}

.mainbox{
  width: 500px;
  height: 500px;
}
.arrow{
  position: relative;
  content: '';
  width: 100px;
  height: 76px;
  background: url('images/arrow-left-sm.png') no-repeat;
  right: -480px;
  top: -72%;
  z-index: 2;
}
.box{
  width: 100%;
  height: 100%;
  position: relative;
  font-weight: bold;
  border-radius: 50%;
  border: 10px solid #fff;
  overflow: hidden;
  transition: all ease 5s;
  box-shadow: 10px 10px 20px rgba(0,0,0,0.2), -10px -10px 20px rgba(0,0,0,0.2), 10px -10px 20px rgba(0,0,0,0.2), -10px 10px 20px rgba(0,0,0,0.2);
}
.wheelSpan{
  width: 50%;
  height: 50%;
  display: inline-block;
  position: absolute;
}
.span1{
  clip-path: polygon(0 92%, 100% 50%, 0 8%);
  background-color: #000;
  top: 120px;
  left: 0;
}
.span2{
  clip-path: polygon(100% 92%, 0 50%, 100% 8%);
  background-color: #000;
  top: 120px;
  right: 0;
}
.span3{
  clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
  background-color: #000;
  bottom: 0;
  left: 120px;
}
.span4{
  clip-path: polygon(50% 100%, 92% 0, 8% 0);
  background-color: #000;
  top: 0;
  left: 120px;
}
.box1 .span3 b{
    font-size:60px;
    text-shadow:
    2px 2px 0 #FCF5E5,
    -2px 2px 0 #FCF5E5,
    -2px -2px 0 #FCF5E5,
    2px -2px 0 #FCF5E5;
   transform: translate(-50%, -50%) rotate(-270deg);
}
.box1 .span1 b,
.box2 .span1 b{
    font-size:60px;
    text-shadow:
    2px 2px 0 #FCF5E5,
    -2px 2px 0 #FCF5E5,
    -2px -2px 0 #FCF5E5,
    2px -2px 0 #FCF5E5;
  transform: translate(-50%, -50%) rotate(185deg);
}
.box2 .span3 b{
    font-size:60px;
    text-shadow:
    2px 2px 0 #FCF5E5,
    -2px 2px 0 #FCF5E5,
    -2px -2px 0 #FCF5E5,
    2px -2px 0 #FCF5E5;
  transform: translate(-50%, -50%) rotate(90deg);
}
.box1 .span4 b,
.box2 .span4 b{
    font-size:60px;
    text-shadow:
    2px 2px 0 #FCF5E5,
    -2px 2px 0 #FCF5E5,
    -2px -2px 0 #FCF5E5,
    2px -2px 0 #FCF5E5;
  transform: translate(-50%, -50%) rotate(-85deg);
}

span b{
  position: absolute;
  top: 50%;
  left: 50%;
    font-size:60px;
    text-shadow:
    2px 2px 0 #FCF5E5,
    -2px 2px 0 #FCF5E5,
    -2px -2px 0 #FCF5E5,
    2px -2px 0 #FCF5E5;
  transform: translate(-50%, -50%);

}

.box2{
  width: 100%;
  height: 100%;
  transform: rotate(-135deg);
}

.spin{
  position: relative;
  top: -58%;
  left: 43%;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 4px solid #FCF5E5;
  background-color: #EB1D21;
  color: #FCF5E5;
  box-shadow: 0 5px 20px #000;
  font-weight: bold;
  font-size: 22px;
  cursor: pointer;
}
.spin:active{
  font-size: 20px;
}

.round{
    border: 4px solid #FCF5E5;
    font-size: 30px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #222;
    color: white;
    display: table-cell; 
    vertical-align: middle;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.2), -10px -10px 20px rgba(0,0,0,0.2), 10px -10px 20px rgba(0,0,0,0.2), -10px 10px 20px rgba(0,0,0,0.2);
}
.title {
    background-image: url("images/banner.png");
    text-align:center;
    font-family:Pirate;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    height: 130px;
    width: 600px;
    line-height: 200%;
}
.PP {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    text-shadow:
    2px 2px 0 #FCF5E5,
    -2px 2px 0 #FCF5E5,
    -2px -2px 0 #FCF5E5,
    2px -2px 0 #FCF5E5;
}
.WoB {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    text-shadow:
    2px 2px 0 #FCF5E5,
    -2px 2px 0 #FCF5E5,
    -2px -2px 0 #FCF5E5,
    2px -2px 0 #FCF5E5;
}