* {
  box-sizing: border-box;
}

html {
  height: 100vh;
  width: 100vw;
}

body {
  height: 98%;
  width: 98%;
  background: #440909;
  overflow: hidden;
  border: 7px double yellow;
}

.container {
  height: 100%;
}

/* /////////////////////////////////////////
            LOGO CONTAINER
///////////////////////////////////////// */

#head {
  margin-top: 2em;
}

#logoWrapper span {
  display: block;
  width: 100px;
  border: 2px solid #440909;
  height: 32px;
  position: absolute;
  top: 90px;
  left: 93px;
  background: linear-gradient( #440909,  yellow);
  transform-origin: top right;
  z-index: -4;
}

#logo {
  border-radius: 50%;
  border: 25px solid #440909;
  width: 195px;
  height: 195px;
  position: relative;
  left: 5px;
  top: 4px;
  z-index: -4;
}

span#logo1 { transform: translate(-35px, 55px) rotate(0deg); }

span#logo2 { transform: translate(-70px, 90px) rotate(45deg); }

span#logo3 { transform: translate(-130px, 70px) rotate(90deg); }

span#logo4 { transform: translate(-160px, 20px) rotate(135deg); }

span#logo5 { transform: translate(-145px, -35px) rotate(180deg); }

span#logo6 { transform: translate(-95px, -60px) rotate(225deg); }

span#logo7 { transform: translate(-45px, -45px) rotate(270deg); }

span#logo8 { transform: translate(-20px, 5px) rotate(315deg); }

h1 {
  font-family: "Univers LT 55";
  text-transform: upperCase;
  font-size: 80px;
  letter-spacing: 10px;
  position: absolute;
  top: 57px;
  left: 150px;
  text-align: left;
  line-height: 50px;
  color: yellowgreen;
  text-shadow: 0px 0px 12px black;
}

h1 span {
  font-family: "Univers CE 45 Light", "SF UI Text Medium Italic";
  font-size: 25px;
  display: block;
  letter-spacing: 20px;
  text-indent: 30px;
  color: yellow;
}

@keyframes spinner {
  0% {
      transform: translate(800px, -25px) rotate(378deg);
      opacity: 0.5;
      margin-left: 50%;
  }
  100% {
      transform: translate(2px, -25px) rotate(-56deg);
      opacity: 1;
      margin-left: 0%;
  }
}

#logoWrapper {
  position: relative;
  width: 200px;
  height: 200px;
  animation-name: spin;
  animation-duration: 2s;
  transform: rotate(-18deg);
  animation: spinner 1s 2s linear both;
}

/* /////////////////////////////////////////
            SLOT CONTAINER
///////////////////////////////////////// */

#slotMachine {
  display: flex;
  flex-flow: column;
  width: 75%;
  height: 69vh;
  justify-content: space-evenly;
  align-items: center;
  margin: auto;
  position: relative;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.jSlots-wrapper {
  overflow: hidden;
  height: 100px;
  width: 502px;
  display: inline-block;
  border: 5px solid yellow;
}

.slot {
  float: left;
}

.container .slot li {
  width: 98px;
  line-height: 48px;
  text-align: center;
  font-size: 77px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  font-family: 'Gravitas One', serif;
  border-left: 1px solid #999;
}

.container .slot:first-child li {
  border-left: none;
}

.container .slot li span {
  display: block;
}

#playSlot, #resetSlot {
  padding: 5px 20px;
  font-size: 25px;
  background: linear-gradient( #440909,  yellow);
  outline: none;
}

#playSlot:hover, #resetSlot:hover {
  text-shadow: 1px 1px 25px white;
}

#results {
  position: absolute;
  top: 1em;
  font-size: 34px;
  color: yellow;
  text-shadow: 1px 1px 1px black;
  text-align: center;
}

#attempts {
  position: absolute;
  top: 11em;
  font-size: 24px;
  line-height: 37px;
  color: yellow;
  text-shadow: 1px 1px 1px black;
}

/* /////////////////////////////////////////
              MEDIA QUERY
///////////////////////////////////////// */

@media screen and (max-width: 625px) {
  h1 {
    font-size: 60px;
  }

  h1 span {
    font-size: 15px;
    letter-spacing: 14px;
    text-indent: 20px;
  }

@keyframes spinner {
  0% {
    transform: translate(800px, -25px) rotate(378deg);
    opacity: 0.5;
    margin-left: 100%;
  }
  100% {
    transform: translate(2px, -25px) rotate(-56deg);
    opacity: 1;
    margin-left: 0%;
    }
  }

  #logoWrapper {
    animation-name: spin;
    animation-duration: 2s;
    transform: rotate(-18deg);
    animation: spinner 1.5s 2s linear both;
  }
  
  .jSlots-wrapper {
    overflow: hidden;
    height: 75px;
    width: 335px;
    display: inline-block;
    border: 5px solid yellow;
  }

  .container .slot li {
    width: 65px;
}

   span.imgDiv {
    width: 65px;
    height: 65px;
  }

  img {
    width: 100%;
    height: 100%;
  }
}