@font-face {
    font-family: 'action_jacksonregular';
    src: url('actionj-webfont.woff2') format('woff2'),
         url('actionj-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root{
    --title-section: 20%;
    --timer-section: 10%;
    --share-section: 20%;
    --stats-section: 20%;


    --modal-title: 75%;
    --title-footer: 20%;
    --share: 100%;
    --normal-text:40%;
    --timer: 50%;
    --stats: 100%;

    --modal-ltl-gap: 10%;

    --modal-share-width: 60%;
    /* --big-gap: 2fr; */
}


.title-section{
    height: var(--title-section);
    width: 100%;
    /* background-color: gray; */
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.timer-section{
    height: var(--timer-section);
    
    width: 100%;
    /* background-color: goldenrod; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.share-section{
    height: var(--share-section);

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.stats-section{
    height: var(--stats-section);
    
    width: 100%;
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.modal-title{
    /* height: var(--modal-title); */
    
    width: 100%;
    /* background-color: blue; */

    color: #C2002F;
    font-size: 65PX;
    font-family: "action_jacksonregular";
    align-self: center;
    text-align: center;
    line-height: 120%;

}

.modal-ltl-gap{
    height: var(--modal-ltl-gap);
}
.modal-title-footer{
    height: var(--title-footer);
  
    
    width: 100%;
    /* background-color: red; */
}

.modal-win{
    font-size: 23PX;
    /* cursor: pointer; */
}

.modal-lose{
    font-size: 13PX;
    /* cursor: pointer; */
}
.share{
    height: 100%;
    width:var(--modal-share-width);
    background-color:#11D671;
    font-size: 30px;
    color: white;
    /* text-align: center;
    align-self: center;
    align-content: center;
    margin: auto; */
    /* justify-content: center; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.normal-text{
    /* height: var(--normal-text); */
    
    width: 100%;
    /* background-color: blue; */
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timer{
    height: var(--timer);
    
    width: 100%;
    /* background-color: cyan; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}

.stats-parent{
    display: grid;
    width: var(--modal-share-width);
    grid-template-columns: repeat(2, 50%);
    /* columns: 50% 2; */
    /* background-color: #11D671; */
    justify-content: space-between;
    column-gap: 0;
    
}

.stats{
    
    /* height: var(--stats); */
    font-size: small;
    /* justify-self: flex-start; */
    text-align: left;
    width: 100%;
    /* background-color: yellow; */
}

.stat-nums{
    /* background-color: cyan; */
    text-align: right;
    width: 100%;
     font-size: small;
     width: 100%;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
 
  .modal-content-endgame, .modal-content-question, .modal-content-about {
      /* display: flex;  */
    display: none;

      height: 100%;
    position: relative;
    width: 100%;
    /* background-color: #fefefe; */
    margin: auto;
    padding: 0;
    /* border: 1px solid #888; */
    /* width: 80%; */
    /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); */
    /* animation-name: animatetop; */
    /* animation-duration: 0.4s; */
      flex-direction: column;
      justify-content: space-between;
      padding-bottom: 20px;
  }

  .modal-content-endgame{
    /* display: flex; */
    display: none;

  }

  .modal-content-about{
    /* display: none; */
    display: flex;
    row-gap: 20px;
    flex-direction: column;
    overflow-y: auto;
    width: 80%;
    justify-content: start;
    /* overflow: hidden; */
    /* margin-left: 10px; */
    /* margin-right: 10px; */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .modal-content-question{
    display: none;
    /* display: flex; */
    row-gap: 20px;
    flex-direction: column;
    overflow-y: auto;
    width: 80%;
    justify-content: start;
    /* overflow: hidden; */
    /* margin-left: 10px; */
    /* margin-right: 10px; */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .modal-content-question::-webkit-scrollbar {
    display: none;
  }
  
 
  .modal-ins-title{
    font-size: 30px;
    font-weight: 100;

  }
  .modal-ins-sect-title{
    font-size: 17px;
    font-weight: 200;
  
  }
  .modal-ins-text{
      text-align: left;
      font-size: 15px;
    font-weight: 400;

  }

  .modal-ins-gap{
      height: 10px;
  }


  .modal-wrapper {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    /* width: 80%; */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s;
    display: flex; 
      flex-direction: column;
      justify-content: space-between;
  }
  
  /* Add Animation */
  @keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
  }