body {
  /*background-color: #e5e5f7;*/
   background-image: radial-gradient(#4333ff 1.4500000000000002px, transparent 1.4500000000000002px), radial-gradient(#4333ff 1.4500000000000002px, #e5e5f7 1.4500000000000002px); 
  background-size: 58px 58px;
  background-position: 0 0, 29px 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0;
  overflow-x: hidden;
}
#hand {
  width: 5rem;
  height: 5rem;
  margin-right: 0.4rem;
}
#wheel {
  width: 26rem;
  height: 26rem;
  transition: all 8s cubic-bezier(0,.57,.61,0.99);
  filter: drop-shadow(0px 0px 10px #000);   /*drop shadow through transparent png*/
}
#button { /*SPIN button*/
  margin-top: 1rem;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 18px 18px;
  border: 3px solid black;
  border-radius: 40px;
  box-shadow: 0 5px 1.5px #999;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 1.6rem;
  user-select: none;
}
#button:hover {
  background-color: rgba(0, 0, 0, 0.6)!important;
  cursor: pointer!important;
}
#button2 { /*history button*/
  position: absolute;
  right: 14rem;
  background-color: rgba(68,76,247,0.8);
  padding: 8px 8px;
  border: 3px solid black;
  border-radius: 12px;
  box-shadow: 0 5px 1.5px #999;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 1.6rem;
  user-select: none;
}
#button2:hover {
  background-color: rgba(68, 77, 249, 1);
  cursor: pointer;
}
#button2:active {
  background-color: rgba(108, 109, 128, 1);
  transform: translate(0%, 13%);
  box-shadow: 0 3px 1.5px #666;
}
.hide{ /*this class is for the history button to close/open the window*/
  visibility: hidden;
}
#history{ /*The history window*/
  top: 25rem;
  right: 15rem;
  position: absolute;
  width: 6rem;
  height: 6rem;
  border: 3px solid black;
  background-color: rgba(68,76,247,0.8);
  box-shadow: 0 5px 1.5px #999;
  border-radius: 12px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  text-align: center;
  user-select: none;
  overflow: auto;
}

#historytext{ /*The text inside the history window. Here javascript injects the array*/
  white-space: pre;
  font-size: 1.4rem;
}
#slot{ /*YOU WON window*/
  left: 15rem;
  position: absolute;
  width: 8rem;
  height: 5rem;
  border: 3px solid black;
  background-color: rgba(68,76,247,0.8);
  box-shadow: 0 5px 1.5px #999;
  border-radius: 12px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  text-align: center;
  font-size: 1.4rem;
  line-height: 3rem;
  user-select: none;
}
#slot>p{ /*Here javascript injects the amount you won*/
  position: relative;
  font-size: 1.4rem;
  top: -18%;
  text-align: center;
  line-height: 0;
}

#wallet{ /*The wallet window*/
  margin-top: 2rem;
  width: 7rem;
  height: 4rem;
  border: 3px solid black;
  background-color: rgba(68,76,247,0.8);
  border-radius: 12px;
  text-align: center;
  line-height: 3.6rem;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 1.4rem;
  user-select: none;
}
.reducted{ /*the reducted bet amount animation when you click spin*/
position: absolute;
top: 38.45rem;
margin-left: 0.8rem;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 1.45rem;
user-select: none;
color: rgb(187, 1, 1);
text-shadow: -0.4px 0.4px 0 black,
              0.4px 0.4px 0 black,
              0.4px -0.4px 0 black,
              -0.4px -0.4px 0 black;
}

/*styles for list & pictures for win/bet amount information*/
.info{
  margin-top: 20rem;
  position: absolute;
  left: 14rem;
  font-size: 1.4rem;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  list-style-type:none;
}
.pic{
  width: 2rem;
  height: 2.5rem;
  user-select: none;
}
.pic1{
  width: 1.8rem;
  height: 1.8rem;
  user-select: none;
}
.pic2{
  width: 2.2rem;
  height: 2.2rem;
  user-select: none;
}
.pic3{
  width: 2.5rem;
  height: 2.5rem;
  user-select: none;
}
li{
  margin-bottom: 0.2rem;
  user-select: none;
}


@media (max-width: 1139px) { /*tablet,ipad mode*/
  #slot{left: 2rem;}
  .info{left: 2rem;}
  #button2{right: 2rem;}
  #history{right: 3rem;}
}

@media (max-width: 700px) { /*phone mode*/
  #slot{font-size: 1.3rem; width: 7rem; height: 5rem;left: 0.5rem; top: 0.5rem;}
  .info{left: 0rem; padding-left: 25px; top: 12rem;}
  #wheel{width: 25rem; height: 25rem;}
  #wallet{position: absolute; top: 0.8rem; right: 0.5rem; margin-top: 0;}
  .reducted{top: 0.7rem; right: 2.6rem;}
  #button2{position: static; margin-top: 1.4rem;}
  #history{position: static; margin-top: 1rem;}
}