.wrapper {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 28% 72%;
}


/* GAMEBOARD ELEMENTS */

.gameboard {
    display: flex;
    grid-area: 2 / 2 / 3 / 2;
    align-items: flex-end;
}

.column {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    background-color: white;
    width: 10%;
    flex-grow: 1;
    margin-bottom: 3%;
    height: 65%;
    border-radius: 10%;
}

.glowingLeftLine{
    -webkit-animation-name: leftColumnBorder;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

.glowingRightLine{
    -webkit-animation-name: rightColumnBorder;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

.coin {
    width: 50%;
    padding-top: 50%;
    height: auto;
    border-radius: 50%;
    margin-bottom: 10%;
}

#coinPlayer1 {
    
    -webkit-animation-name: greenPulse, bounceInDown;
    -webkit-animation-duration: 2s, 1s;
    -webkit-animation-iteration-count: infinite, 1;
  }

#coinPlayer2 {
    -webkit-animation-name: bluePulse, bounceInDown;
    -webkit-animation-duration: 2s, 1s;
    -webkit-animation-iteration-count: infinite, 1;
}

#coinEmily {
    -webkit-animation-name: redPulse, bounceInDown;
    -webkit-animation-duration: 2s, 1s;
    -webkit-animation-iteration-count: infinite, 1;
}

.welcomeMessage {
    width: 50vw;
    height: 40vw;
    text-align: center;
    line-height: 15vw;
    position: absolute;
    z-index: 999;
    top: 25%;
    left: 25%;
    font-family: 'Orbitron', sans-serif;
    font-size: 3vh;
    color: rgba(173, 173, 173, 0.753);
    line-height: 1.5;
}

.arrowContainer {
    display: flex;
    margin-top: 10%;
}

.arrow {
    flex-grow: 1;
}

.emily {
    color: #d81616;
}

/* SCORE BOARDS ELEMENT */

.score.left {
    grid-area: 2 / 1 / 3 / 2; 
}

.score.right {
    grid-area: 2 / 3 / 3 / 4; 
}

.score {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.playerTitle {
    grid-area: 1 / 2 / 2 / 3; 
    justify-self: center;
    align-self: end;
}

.scoreNumber {
    grid-area: 2 / 2 / 3 / 3;
    width: 50%;
    height: 38%;
    text-align: center;
    line-height: 11vh;
    border-radius: 10%;
    justify-self: center;
    align-self: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 7vh;
    color:rgba(224, 224, 224, 0.329);   
}

.player1TurnBox {
    -webkit-animation-name: greenPulseBorder;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

.player2TurnBox {
    -webkit-animation-name: bluePulseBorder;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

.emilyTurnBox {
    -webkit-animation-name: redPulseBorder;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

/* TOP RESPONSIVE BOARD */

.topboard {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.topEmilySwitch{
    width: 20%;
    height: auto;
    font-size: 2vh;
    font-family: 'Orbitron', sans-serif;
}

.emilyOn {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

#activateEmily {
    width: 100%;
    font-size: 2vh;
}



/* ANIMATIONS */

@-webkit-keyframes greenPulse {
    from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
    50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
    to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
  }

  @-webkit-keyframes bluePulse {
    from { background-color: #3b4ad4; -webkit-box-shadow: 0 0 9px #333; }
    50% { background-color: #3b4ad4; -webkit-box-shadow: 0 0 18px #3b4ad4; }
    to { background-color: #3b4ad4; -webkit-box-shadow: 0 0 9px #333; }
  }

  @-webkit-keyframes redPulse {
    from { background-color: #d81616; -webkit-box-shadow: 0 0 9px #333; }
    50% { background-color: #d81616; -webkit-box-shadow: 0 0 18px #d81616; }
    to { background-color: #d81616; -webkit-box-shadow: 0 0 9px #333; }
  }

  @-webkit-keyframes greenPulseBorder {
    from { border-bottom-color: #749a02; -webkit-box-shadow: 0 0 12px #333; }
    50% { border-bottom-color: #91bd09; -webkit-box-shadow: 0 0 12px #91bd09; }
    to { border-bottom-color: #749a02; -webkit-box-shadow: 0 0 12px #333; }
  }

  @-webkit-keyframes bluePulseBorder {
    from { border-bottom-color: #3b4ad4; -webkit-box-shadow: 0 0 12px #333; }
    50% { border-bottom-color: #3b4ad4; -webkit-box-shadow: 0 0 12px #3b4ad4; }
    to { border-bottom-color: #3b4ad4; -webkit-box-shadow: 0 0 12px #333; }
  }

  @-webkit-keyframes redPulseBorder {
    from { border-bottom-color: #d81616; -webkit-box-shadow: 0 0 12px #333; }
    50% { border-bottom-color: #d81616; -webkit-box-shadow: 0 0 12px #d81616; }
    to { border-bottom-color: #d81616; -webkit-box-shadow: 0 0 12px #333; }
  }

  @-webkit-keyframes leftColumnBorder {
    from { border-left: solid 2px #749a02;}
    25% { border-left: solid 2px #333;}
    50% { border-left: solid 2px #91bd09; }
    75% { border-left: solid 2px #333;}
    to { border-left: solid 2px #749a02; }
  }

  @-webkit-keyframes rightColumnBorder {
    from { border-right: solid 2px #3b4ad4;}
    25% { border-right: solid 2px #333;}
    50% { border-right: solid 2px #3b4ad4; }
    75% { border-right: solid 2px #333;}
    to { border-right: solid 2px #3b4ad4; }
  }


  .hvr-float-shadow {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
  }

  .hvr-float-shadow:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
    /* W3C */
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
  }
  .hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    /* move the element up by 5px */
  }
  .hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
  }