@font-face { 
    font-family: 'AgencyB';
    src: url('../fonts/agencyfb_bold.ttf');
  }
  @font-face { 
    font-family: 'AgencyR';
    src: url('../fonts/agencyfb_reg.ttf');
  }
  @font-face { 
    font-family: 'Atomic';
    src: url('../fonts/atomic.otf');
  }
  @font-face { 
    font-family: 'Black';
    src: url('../fonts/RevxNeueBlack.ttf');
  }
  @font-face { 
    font-family: 'Bold';
    src: url('../fonts/RevxNeueBold.ttf');
  }
  @font-face { 
    font-family: 'Medium';
    src: url('../fonts/RevxNeueMedium.ttf');
  }
  @font-face { 
    font-family: 'Regular';
    src: url('../fonts/RevxNeueRegular.ttf');
  }
  @font-face { 
    font-family: 'SemiBold';
    src: url('../fonts/RevxNeueSemiBold.ttf');
  }
    

* {
    margin: 0;
    padding: 0;
    user-select: none;
    color: white;
    font-style: normal;
    overflow: hidden;
    z-index: 9999;
}

body {
    transition: opacity 500ms ease-out;
    z-index: 9999;
}

#app {
    position: absolute;
    z-index: 9999;
    height: 100%;
    width: 100%;
}
.main_frame_reward {
  padding-top: 0.4688vw;
    position: relative;
    display: flex;
    flex-direction: column; 
    align-items: center;
    text-align: center;
    position: absolute;
    right: 15.6354vw;
    background: linear-gradient(180deg, rgba(255, 43, 43, 0.23) 0%, rgba(153, 83, 26, 0) 100%);
    border-top: 0.052vw solid #ff2b2b;
    min-width: 5vw;
    padding-left: 0.625vw;
    padding-right: 0.625vw;
    height: 7.7604vw;
}
.text_main {
    font-size: 1.042vw;
    font-family: 'AgencyB';
    text-shadow: 0 0 2.135vw rgba(255, 255, 255, 0.25);
}
.item_var {
    font-size: 0.7813vw;
    font-family: 'Medium';
    height: 1.1458vw;
    border-radius: 0.104vw;
    padding: 0.104vw 0.208vw;
    color: #fff826;
    background: rgba(255, 248, 38, 0.15);
}
.picture_box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 1.7708vw;
}
.picture_box img {
    height: 1.771vw;
}
.time_box {
    height: 1.1458vw;
    background: rgba(255, 43, 43, 0.15);
    border-radius: 0.104vw;
    padding: 0.104vw 0.208vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1563vw;
    margin-top: auto;
}
.time_box svg {
    width: 0.729vw;
    height: 0.7292vw;
}
.time_box span {
    font-size: 0.781vw;
    font-family: 'Medium';
    color: #ff2b2b;
    text-shadow: 0 0 1.302vw rgba(255, 43, 43, 0.45);
}

@media (min-width: 2560px) {
  .main_frame_reward {
    padding-top: 0.8334vh;
    position: relative;
    display: flex;
    flex-direction: column; 
    align-items: center;
    text-align: center;
    position: absolute;
    right: 27.7963vh;
    background: linear-gradient(180deg, rgba(255, 43, 43, 0.23) 0%, rgba(153, 83, 26, 0) 100%);
    border-top: 0.0924vh solid #ff2b2b;
    min-width: 8.8889vh;
    padding-left: 1.1111vh;
    padding-right: 1.1111vh;
    height: 13.7963vh;
}
.text_main {
    font-size: 1.8524vh;
    font-family: 'AgencyB';
    text-shadow: 0 0 3.7956vh rgba(255, 255, 255, 0.25);
}
.item_var {
    font-size: 1.389vh;
    font-family: 'Medium';
    height: 2.0369vh;
    border-radius: 0.1849vh;
    padding: 0.1849vh 0.3698vh;
    color: #fff826;
    background: rgba(255, 248, 38, 0.15);
}
.picture_box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 3.1481vh;
}
.picture_box img {
    height: 3.1484vh;
}
.time_box {
    height: 2.0369vh;
    background: rgba(255, 43, 43, 0.15);
    border-radius: 0.1849vh;
    padding: 0.1849vh 0.3698vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2779vh;
    margin-top: auto;
}
.time_box svg {
    width: 1.296vh;
    height: 1.2964vh;
}
.time_box span {
    font-size: 1.3884vh;
    font-family: 'Medium';
    color: #ff2b2b;
    text-shadow: 0 0 2.3146vh rgba(255, 43, 43, 0.45);
}
}