/* MAIN */
body {
    background-color: black;
    font-family: 'Advent Pro', sans-serif;
    font-weight: 700;
    text-shadow: 1px 1px black;
    color: #fff;
    z-index: 0;
}

h1 {
    font-family: 'Special Elite', cursive;
    font-weight: 700;
    font-size: 5em;
    pointer-events: none;
    line-height: 1.2em;
}

h1.pulsing {
    -webkit-animation-name: pulsing;
    animation-name: pulsing;
    animation-duration: 1000ms;
    animation-iteration-count:infinite;
}

@keyframes pulsing {
    50% {
        font-size: 5.2em;
    }
}

@-webkit-keyframes pulsing {
  50% {
    font-size: 5.2em;
    }
}

#background {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1;
    opacity: 0.8;
}

.stretch {
    width:100%;
    height:100%;
}

footer {
    color:white;
    margin-bottom: -5px;
}

.border-btn {
    border: 2px solid sienna;
}

/* START-MENU */
#start-menu {
    width: 70%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.operation-button {
    font-size: 1.5em;
    width:18%;
    margin-bottom: 20px;
    padding:0;
    margin: 5px;
    color: white;
}

.operation-button:hover {
    border: 1px solid lightblue;
    cursor: pointer;
}

#start-game {
    border: 1px solid #66B39C;
    margin-bottom: 20px;
}

.high-score-p {
    font-size: 2em;
    color: #ffc107;
}

.lead {
    font-size: 1.5em;
    font-weight: 900;
}

/* COUNTDOWN */
#countdown {
    width: 70%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#start-countdown {
    font-size: 10em;
}

/* IN-GAME */
#in-game {
    width: 70%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#score-board {
    position: absolute;
    width: 100%;
    top: -150px;
}

.board {
    background: #ffc107;
    width: 20%;
    margin: 0 auto;
    color: sienna;
    text-shadow: none;
    border: 4px solid sienna;
    box-shadow: 0 8px 5px 1px black;
    border-radius: 20px;
}

.board h2 {
    margin-bottom: 0;
}

#current-score {
    font-size: 2em;
    color: sienna;
}


#mathable {
    font-size: 5em;
    color: white;
}

#user-input {
    width: 100%;
    text-align: center;
    border: 2px solid white;
    font-size: 6em;
    height: 1.2em;
    text-align: center;
    padding: 10px;
    background:transparent;
    color: white;
    font-weight: 900;
    margin-bottom: 0.5em;
}

#user-input:focus {
    outline: 0;
    color: white;
}

::placeholder {
    color: white;
}

#user-input.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
    animation-duration: 600ms;
    border: 2px solid lime;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
}

25%,
75% {
    opacity: 0;
}
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
}

25%,
75% {
    opacity: 0;
}
}

#user-input.shake {
    animation-name: shaker;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    border: 2px solid red;

}

@keyframes shaker {
   0% {
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.8;
  }
  10% {
      transform: translate(10px, 7px) rotate(-9deg);
      opacity: 0.6;
  }
  20% {
      transform: translate(13px, -19px) rotate(-3deg);
      opacity: 0.3;
  }
  30% {
      transform: translate(-6px, -6px) rotate(2deg);
      opacity: 0.4;
  }
  40% {
      transform: translate(-9px, -18px) rotate(-5deg);
      opacity: 0.4;
  }
  50% {
      transform: translate(10px, -8px) rotate(5deg);
      opacity: 0.7;
  }
  60% {
      transform: translate(-10px, 14px) rotate(-6deg);
      opacity: 1;
  }
  70% {
      transform: translate(10px, 3px) rotate(6deg);
      opacity: 0.1;
  }
  80% {
      transform: translate(-2px, 20px) rotate(-6deg);
      opacity: 1;
  }
  90% {
      transform: translate(-7px, -19px) rotate(4deg);
      opacity: 0.5;
  }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#time-bar {
    position: absolute;
    width: 100%;
    height: 115px;
    z-index: -1;
    border-radius: 5px;
    border-right: 1px solid white;
}

#time-bar.colorchange {
    animation: colorchange 30s;
    -webkit-animation: colorchange 30s;
}

@keyframes colorchange {
    0% {
        background: green;
    }
    50% {
        background: green;
    }
    80% {
        background: orange;
    }
    100% {
        background: red;
    }
}

.game-instructions-container {
    pointer-events: none;
    font-size: 2em;
    position: fixed;
    width: 100%;
    align-items: center;
    align-content: center;
    bottom: -30%;
    background-color: rgb(0,0,0,0.5);
    height: 25%;
    padding-bottom: 10px;
    border-radius: 10px;
    right: 0;
}

.game-instructions span {
    background-color: whitesmoke;
    font-weight: 700;
    color: black;
    border-radius: 4px;
    padding: 10px 20px;
    text-shadow: 1px 1px white;
    box-shadow: 2px 5px 0 2px grey;
    margin-right: 10px;
}

#space {
    padding: 10px 60px;
}

/* PAUSED-SCREEN */

#paused-screen {
    width: 70%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

/* END-GAME */

#end-game {
    width: 70%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#end-game-p {
    font-size: 3em;
}