/*
 * Some general styling
 */

* {
  box-sizing: border-box;
}

:root {
  --item-height: 100px;
}

body {
  background-color: #171717;
  margin: 0;
}

.button-border {
  float: right;
  width: 9.9em;
  height: 9.9em;
  border-radius: 50%;
  margin: 3em 0 3em 2em;
  z-index: -1;
  background-image: linear-gradient(to bottom, #fcf8ad, #f8f3cd, #f9e13d);
  box-shadow: 0 6px 4px -5px #eca654 inset;
}

.start-button {
  background-image: radial-gradient(circle at center, red, darkred);
  color: whitesmoke;
  height: 4em;
  width: 4em;
  border: none;
  margin: 7px;
  font-size: 36px;
  border-radius: 50%;
}

/*
 * style the info box with the lies etc.
 */

.lies-border {
  position: absolute;
  width: 24em;
  height: 9.9em;
  margin: 3em 0 0 0;
  background-image: linear-gradient(to bottom, #fcf8ad, #f8f3cd, #f9e13d);
  box-shadow: 0 6px 4px -5px #eca654 inset;
}

.lies-container {
  position: absolute;
  width: 23em;
  height: 8.8em;
  margin: 10px;
  padding: 0 12px 0 12px;
  background-color: rgb(229, 248, 232);
  overflow: scroll;
  text-align: center;
  vertical-align: top;
}

.lies-text {
  font-family: "Courier New", Courier, monospace;
  line-height: 1.1;
  font-size: 16px;
}

.bold {
  font-family: "Eater", serif;
}

/* modal style */
/* Basic modal styling */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1;
  left: 1rem;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(80, 85, 81, 0.1);
}
h4 {
  font-size: 24px;
  margin: 0;
}
h5 {
  font-size: 16px;
  margin: 0;
}
.modal-content {
  background-color: rgb(242, 250, 243);
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  border-radius: 20px;
}

.close {
  color: #535252;
  font-size: 20px;
  font-weight: bold;
  padding: 0 20px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*
 * style the machine
 */

#container {
  background-image: linear-gradient(rgb(78, 110, 78), rgb(37, 52, 37));
  padding: 0 3em 0 3em;
  box-shadow: 0 10px 20px rgb(96, 132, 69);
  position: absolute;
  top: 32%;
  left: 50%;
  margin-left: -320px;
  margin-top: -220px;
  border-radius: 30px;
}

/*
 * style the title of the game
 */

.game-name {
  font-family: "Eater", serif;
  font-weight: 400;
  font-size: 22px;
  font-style: oblique -23deg;
  text-align: center;
}

/*
 * style the reels container
 */

.window {
  position: relative;
  overflow: hidden;
  height: calc(3 * var(--item-height));
}

.window::before {
  content: "";
  clear: both;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
}

.window::after {
  content: "";
  clear: both;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
}

.window-border {
  padding: 10px;
  background-image: linear-gradient(to bottom, #fcf8ad, #f8f3cd, #f9e13d);
  box-shadow: 0 6px 4px -5px #eca654 inset;
}

/*
 * Reels and icon styling
 */

.icon {
  width: 80px;
  height: var(--item-height);
  display: block;
  position: relative;

  /*animation: wiggle 0.1s linear infinite;*/
}

.outer-col {
  overflow-y: hidden;
  width: 100px;
  float: left;
  background-color: #eee;
  background-image: linear-gradient(#16013c, #741a5e, #430155, #16013c);
  height: calc(var(--item-height) * 3);
}

.outer-spacer {
  width: 8px;
  height: 100%;
  float: left;
  border-right: 2px solid #f7ce6c38;
  background-image: linear-gradient(#be4d01, #893802);
}

.col {
  padding: 0 10px;
  will-change: true;
  transform: translateY(calc(-100% + var(--item-height) * 3));
}

.col img {
  width: 100%;
  height: auto;
  margin: 10px 0;
  position: relative;
  z-index: 3;
}

/* shadow effect behind the items */
.col .icon::after {
  content: "";
  clear: both;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  background-color: white;
  box-shadow: 0 0 35px 30px rgba(12, 0, 14, 0.69);
  z-index: 2;
  border-radius: 100%;
}

/*
 * Spinning animation
 */

#container.spinning .outer-col:nth-of-type(2) .col {
  animation-delay: 0.01s;
}

#container.spinning .outer-col:nth-of-type(3) .col {
  animation-delay: 0.02s;
}

#container.spinning .outer-col:nth-of-type(4) .col {
  animation-delay: 0.03s;
}

#container.spinning .col {
  animation-name: scroll;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.65, 0.97, 0.72, 1);
}

@keyframes scroll {
  to {
    transform: translateY(0);
  }
}

/*@keyframes wiggle {
    0% {
        transform: rotate(7deg);
    }
    50% {
        transform: rotate(-7deg);
    }
    100% {
        transform: rotate(7deg);
    }
}*/

/*  different backing for the guage  not sure it would work
.meter {
  position: absolute;
  top: 50.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 230px;
  width: 475px;
  border-radius: 238px 238px 0 0;
  background-image: repeating-conic-gradient(
    at 50% 100%,
    #835454 0deg 13deg,
    black 13deg 14deg,
    #835483 14deg 39deg,
    black 39deg 41deg,
    #545483 41deg 65deg,
    black 65deg 66deg,
    #548383 66deg 89deg,
    black 89deg 92deg,
    #548354 92deg 111deg,
    black 111deg 112deg,
    #778354 112deg 137deg,
    black 137deg 138deg,
    #836b54 138deg 165deg,
    black 165deg 166deg,
    #835454 166deg 180deg
  );
}
*/
/*
 * style the meter on top of the machine
 */

/*.meter-container {
  position: absolute;
  top: -17%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 275px;
  width: 550px;
  border-radius: 275px 275px 0 0;
  background-color: #6b8354;
}

.meter-border {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 250px;
  width: 500px;
  border-radius: 250px 250px 0 0;
  background-image: linear-gradient(to bottom, #fcf8ad, #f8f3cd, #f9e13d);
  box-shadow: 0 6px 4px -5px #eca654 inset;
}

.meter1 {
  position: absolute;
  top: 42%;
  left: 18%;
  height: 225px;
  width: 103px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(103deg);
  background-image: linear-gradient(to right, #992b2b, #f18181, #992b2b);
}

.meter2 {
  position: absolute;
  top: 24%;
  left: 22.4%;
  height: 225px;
  width: 103px;
  background-color: #836b54;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(128.7deg);
  background-image: linear-gradient(to left, #836b54, #facb9f, #b87a41);
}

.meter3 {
  position: absolute;
  top: 11.5%;
  left: 30.2%;
  height: 225px;
  width: 103px;
  background-color: #836b54;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(154.3deg);
  background-image: linear-gradient(to left, #52641c, #99c417, #556526);
}

.meter4 {
  position: absolute;
  top: 7.2%;
  left: 40%;
  height: 225px;
  width: 103px;
  background-color: #836b54;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(180deg);
  background-image: linear-gradient(to left, #835483, #f296f2, #835483);
}

.meter5 {
  position: absolute;
  top: 11.5%;
  left: 49.8%;
  height: 225px;
  width: 103px;
  background-color: #836b54;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(205.6deg);
  background-image: linear-gradient(to left, #835454, #f45050, #835454);
}

.meter6 {
  position: absolute;
  top: 24%;
  left: 57.6%;
  height: 225px;
  width: 103px;
  background-color: #836b54;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(231.4deg);
  background-image: linear-gradient(to left, #548383, #27f1f1, #548383);
}

.meter7 {
  position: absolute;
  top: 42%;
  left: 61.95%;
  height: 225px;
  width: 103px;
  background-color: #836b54;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(257deg);
  background-image: linear-gradient(to left, #688354, #78f418, #688354);
}

.meter-pivot {
  position: absolute;
  top: 89%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40px;
  width: 80px;
  border-radius: 40px 40px 0 0;
  background-image: radial-gradient(circle at center, rgb(88, 86, 86), black);
}

.needle {
  position: absolute;
  top: 18%;
  width: 100%;
  height: 150%;
  background-image: linear-gradient(#f2f1ee, #f3e4a8);
  clip-path: polygon(50% 0%, 51% 48%, 50% 52%, 49% 48%);
  transform: rotate(270deg);
  z-index: 20;
}
*/

/*
 * style the spin button
 */