button{
    height: 40px;
    width: 24%;
    border: none;
}

#gameArea{
    min-height: 75vh;
}

.centered-game-area{
    text-align: center;
}

#scoreArea{
    font-size: 32pt;
    font-weight: bolder;
    text-align: center;
}

#prevNextContainer{
    text-align: center;
}

.game-button{
    width: 60%;
    height: 80px;
    margin-top: 40vh;
    font-size: 24pt;
    text-align: center;
}

#start-button{
    width: 60%;
    height: 80px;
    font-size: 24pt;
    text-align: center;
}

.game-card{
    width: 50%;
    position: relative;
    margin-top: 40px;
}

@media (min-width: 800px) {
    .game-card:hover{
        animation-name: move-up;
        animation-duration: .5s;
        animation-fill-mode: forwards;
    }
}

.button-container{
    text-align: center;
}

#review{
    font-size: 32pt;
    font-weight: bold;
    text-align: center;
}

#timer{
    font-size: 48pt;
    font-weight: bolder;
}

.blink {
    animation: blink-animation .25s steps(5, start) infinite;
    -webkit-animation: blink-animation .25s steps(5, start) infinite;
}

.shake {
    animation: shake .5s infinite, blink-animation .10s steps(5, start) infinite;
    -webkit-animation: shake .5s infinite, blink-animation .10s steps(5, start) infinite;
}

@media (max-width: 1000px) {
    button{
        width: 48%;
    }

    #review{
        font-size: 24pt;
    }

    #scoreArea{
        font-size: 24pt;
    }
}

@media (max-width: 600px) {
    #review{
        font-size: 16pt;
    }

    #scoreArea{
        font-size: 16pt;
    }
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes move-up {
  
  0% { transform: translate(0px, 0px); }
  100% { transform: translate(0px, -20px); }
}