.gd-timer-nav{

}
    .gd-timer-nav:hover{
        cursor: pointer;
    }

    .gd-timer-nav .pause-icon{
        border: 0;
        background-color: transparent;
        color: rgb(255,255,255);
    }

    .gd-timer-nav:hover .pause-icon{
        color: black;
    }



.gd-game-wrapper{
    width: 80%;
    margin: 20px auto;
    max-width: 600px;
    position: relative;

    

  }

    .gd-overlay{
        display: none;

        background-color: white;
        
        position: absolute;
        z-index: 2;

        align-items: center;
        justify-content: center;
        flex-direction: column;
        
        border: 1px solid #424242;
        margin-top: 10px;
        padding: 10px;
        border-radius: 10px;

        left: max(10vw, calc(50vw - 300px));
        right: max(10vw, calc(50vw - 300px));

        min-height: max(70%, 400px);
        
    }


    .gd-overlay h2, .gd-overlay h3, .gd-overlay div, .gd-overlay button{
        text-align: center;
        margin: 10px 0
    }

    /* .gd-game-wrapper[data-overlay]:not([data-overlay=""]) > div:not(.gd-game-wrapper-overlay, .gd-game-wrapper-overlay *){
        filter: blur(10px);
    } */
    
    /* .gd-game-wrapper[data-overlay]:not([data-overlay=""]) *:not(.gd-game-wrapper-overlay, .gd-game-wrapper-overlay *) button{
        background-color: rgba(158,158,158,.2);
    } */

    [data-overlay="start"] .gd-overlay#start-overlay,
    [data-overlay="pause"] .gd-overlay#pause-overlay,
    [data-overlay="complete"] .gd-overlay#complete-overlay{
        display: flex;
    }


  .gd-big-square{
      
      
      /* https://stackoverflow.com/questions/10062811/can-i-set-the-height-of-a-div-based-on-a-percentage-based-width */
      
      /* this can be 100% & 50% for a true square */
      width: 100%;
      padding: 46.5%; 
      
      box-sizing: border-box;
      position: relative;
      
  }