@font-face {
  font-family: 'FC Friday Medium';
  font-style: normal;
  font-weight: normal;
  src: url('../font/FC-Friday-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'FC Friday Medium ltalic';
  font-style: normal;
  font-weight: normal;
  src:  url('../font/FC-Friday-Medium-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Aero';
  font-style: normal;
  font-weight: 400;
  src: local('Aero'), url('../font/Aero.woff') format('woff');
}

@font-face {
  font-family: 'Super Playful';
  font-style: normal;
  font-weight: normal;
  src: url('../font/Super-Playful.ttf') format('truetype');
}
#Event-canvas {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    display: none;
    animation: popup-fade-in 3s;
  }

#event7Dayboard-canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
}

  
#Event-canvas-index {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    display: none;
    animation: popup-fade-in 3s;
  }

  #Succeed7Day{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    /* display: none; */
    animation: popup-fade-in 2s;
  }
  #Fail7Day{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    /* display: none; */
    animation: popup-fade-in 4s;
  }

  .time-7-Day{
    position: absolute;
    height: 5%;
    width: 9%;
    top: 27.6%;
    left: 21.2%;
    transform: rotate(-10deg);
    color: white;
    margin: auto;
    padding: 5px;
    font-size: 1.5vw;
    font-family: 'Super Playful', sans-serif;
  }

  #Day7-canvas {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    /* display: none; */
    animation: popup-fade-in 2s;
  }

  .x-button{
    height: 10%;
    position: absolute;
    top: 22%;
    right: 18%;
    cursor: pointer;
  }

 

  .x-button:active {
    content: url("../img/Tournament board_7 days ver4 edit font/x-pass.png");
  }

  .info-button{
    height: 10%;
    position: absolute;
    bottom: 10%;
    left: 18%;
    cursor: pointer;
  }

  .info-button:active{
    content: url("../img/Tournament board_7 days ver4 edit font/info-pass.png");
  }

  .Study-Daily{
    height: 15%;
    position: absolute;
    top: 44%;
    left: 18%;
    transform: translate(-50%, -50%);
  }

  .top-line{
    height: 3%;
    position: absolute;
    top: 46%;
    left: 51%;
    transform: translate(-50%, -50%);
  }

  .under-line{
    height: 3%;
    position: absolute;
    bottom: 25%;
    left: 51%;
    transform: translate(-50%, -50%);
  }

  .Day-7-layout{
    position: absolute;
    transform: translate(-9%, -55%);
  }

  .layoutDay-top {
    height: 50%;
    width: 62%;
    position: absolute;
    top: 33%;
    left: 21%;
    transform: translate(0%);
  }

  /* .layoutDay-top {
    display: grid;
    grid-template-columns: auto auto auto auto;
    height: 50%;
    width: 62%;
    position: absolute;
    top: 35%;
    left: 21%;
    transform: translate(0%);
  } */
  .layoutDay-under {
    height: 50%;
    width: 62%;
    position: absolute;
    bottom: -8%;
    left: 21%;
    transform: translate(0%);
  }

  .Day-img{
    position: absolute;
    height: 43%;
  
  }

  #Gift-7-Day{
    filter: grayscale(1);
    /* animation: jump-shaking 1.83s infinite; */
  }

  #Exp-canvas {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    /* display: none; */
    animation: popup-fade-in 2s;
  }
  
  .Event-canvas{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    /* display: none; */
    animation: popup-fade-in 2s;
  }
  
  .Event-mask {
    background-color: #00000088;
    width: 100%;
    height: 100%;
  }
  
  .Event-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-height: 90vh;
    height: 50vw;
  }
  
  .Event-bg {
    height: 100%;
    
  }

  .Event-bander {
    position: absolute;
    top: 60.5%;
    left: 33%;
    color: #e7ebf2;
    font-size: larger;
  }

  .Event-time {
    position: absolute;
    top: 71%;
    left: 49%;
    transform: translate(-50%, -50%);
    color: #e7ebf2;
    font-size: 2.2vw;
    font-family: 'FC Friday Medium', sans-serif;
    text-shadow:
        0 0 5px #000,
        0 0 10px #fff,
        0 0 20px #fff,
        0 0 40px #fff;
    
  }
  .Event-time-icon-clock {
    position: absolute;
    top: 71%;
    left: 42%;
    height: 4%;
    transform: translate(-50%, -50%);
    
  }


  .Event-button {
    position: absolute;
    height: 8%;
    top: 80%;
    left: 40.5%;
    cursor: pointer;
  }

  .Event-button-x {
    position: absolute;
    height: 12%;
    top: 77%;
    left: 37%;
    cursor: pointer;
  }

  #download-rewards{
    cursor: pointer;
  }
  
  .Event-button-x-cham {
    position: absolute;
    height: 12%;
    top: 82%;
    left: 35%;
    cursor: pointer;
  }

  .Event-button-x-exp {
    position: absolute;
    height: 12%;
    top: 83%;
    left: 33%;
    cursor: pointer;
  }

  .Event-button-x-exp-succe {
    position: absolute;
    height: 12%;
    top: 75%;
    left: 37%;
    cursor: pointer;
  }
  
  .Event-title {
    position: absolute;
    height: 18%;
    top: 59%;
    left: 30.5%;
  }

  .button-DSA {
    position: absolute;
    height: auto;
    top: 75%;
    left: 40%;
    font-size: 1.5vw;
    transform: translate(0%, 0%);
    color: #e7ebf2;
    background-color: inherit;
    font-family: 'FC Friday Medium', sans-serif;
    border: inherit;
  }

  .button-DSA input[type="checkbox"] {
    width: clamp(18px, 1vw, 32px);
    height: clamp(18px, 1vw, 32px);
    accent-color: #27ae60;
}

  .Event-X {
    position: absolute;
    height: 6%;
    cursor: pointer;
  }

  
  .Event-content {
    position: absolute;
    width: 79%;
    height: 73%;
    top: 53%;
    left: 54%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    white-space: nowrap;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  
  /* Track */
  .Event-content::-webkit-scrollbar {
    width: min(2vh, 20px);
  }
  
  /* Track */
  .Event-content::-webkit-scrollbar-track {
    background-color: #e7ebf2;
    border-radius: 100px;
    border-style: solid;
    border-color: #b0bbd4;
    border-width: 1%;
  }
  
  /* Handle */
  .Event-content::-webkit-scrollbar-thumb {
    background-color: #ed4300;
    border-radius: 100px;
  }
  
  .Event-content-item {
    width: 94%;
    height: 20%;
    margin-top: 2%;
    margin-bottom: 2%;
    position: relative;
  }
  
  .Event-ranking-bullet {
    position: absolute;
    bottom: 20%;
    left: 3%;
    height: 50%;
  }
  
  .Event-ranking-bullet img {
    height: 100%;
  }
  
  .Event-ranking-bullet p{
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: min(min(3vh, 20px), 2vw);
    transform: translateX(-50%) translateY(-50%);
    color: black;
  }
  
  .Event-profile-image {
    position: absolute;
    bottom: 35%;
    left: 14.6%;
    /* height: 55%; */
    height: 7vh;
    width: 7vh;
    max-height: min(4vw, 40px);
    max-width: min(4vw, 40px);
    border-radius: 30%;
    object-fit: cover;
  }
  
  .Event-profile-name {
    position: absolute;
    bottom: 6%;
    left: 18%;
    font-size: min(min(1.5vh, 10px), 1vw);
    transform: translateX(-50%);
    color: white;
  }
  
  .Event-level {
    position: absolute;
    top:50%;
    left: 30%;
    text-align: center;
    transform: translateX(-50%) translateY(-50%);
    font-size: min(min(3vh, 18px), 2vw);
    color: white;
    line-height: 1;
  }
  
  .Event-progress {
    position: absolute;
    top:50%;
    left: 60%;
    height: 75%;
    transform: translateX(-50%) translateY(-50%);
  }
  
  .Event-progress-empty {
    height: 100%;
  }
  
  .Event-progress-full {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: 2s;
    animation: full-in 2s;
  }
  
  .Event-rocket {
    position: absolute;
    height: 40%;
    bottom: 15%;
    transform: translateX(30%) translateY(50%);
    animation: rocket-in 2s;
  }
  
  .Event-km {
    position: absolute;
    right: 7.5%;
    bottom: 3%;
    transform: translateX(50%) translateY(50%);
    text-align: center;
    font-size: min(min(3vh, 18px), 2vw);
    color: white;
  }
  
  #Event-close-button {
    height: 9%;
    position: absolute;
    right: 7%;
    top: 5%;
  }
  
  #Event-close-button:active {
    content: url("https://d2xqr36243ptw0.cloudfront.net/img/register/close-button-pressed.png");
  }

 
  /* @keyframes full-in {
    0% {
      clip-path: inset(0 100% 0 0);
    }
    100% {
    }
  }
  
  @keyframes rocket-in {
    0% {
      right: 100%;
    }
    100% {
    }
  } */

  @keyframes fade-in {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  

  @keyframes popup-fade-in {
    0% {
      opacity: 0;
    }
  
    60% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }

  @keyframes jump-shaking {
    0% { transform: translateX(0) }
    15% { transform: translateY(0) }
    25% { transform: translateY(0) }
    35% { transform: translateY(0) rotate(10deg) }
    55% { transform: translateY(0) rotate(-10deg) }
    65% { transform: translateY(0) rotate(10deg) }
    75% { transform: translateY(0) rotate(-10deg) }
    100% { transform: translateY(0) rotate(0) }
  }