@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: 0px;
      padding: 0px;
      box-sizing: border-box;
      user-select: none;  
  }
  
  body, html {
      position: relative;
      height: 100%;
      width: 100%;
      font-size: 0.7292vw;
      overflow: hidden;
      color: white;
      scroll-behavior: smooth;
  }
  
  
  #BG {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .main_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cont_wrap {
    width: auto;
    display: flex;
    flex-direction: column;
    height: auto;
      background-image: url('../images/bg.png');
      border-radius: 0.625vw;
      padding: 1.25vw;
      background-size: 100% 100%;
      overflow: hidden;
    padding-bottom: 3vw;
  }
  .icon_hd {
      margin-top: -0.3646vw;
      margin-left: -0.3646vw;
      width: 2.8125vw;
      height: 2.8125vw;
      background-image: url('../images/tringle.png');
      background-size: 100% 100%;
      filter: drop-shadow(0 0.208vw 0.898vw rgba(255, 138, 43, 0.95));
  }
  .buttons {
    margin-left: auto;
    margin-right: auto;
    margin-top: -60px;
  }
  .start {
    width: 203px;
    font-size: 15px;
    font-family: 'SemiBold';
    color: white;
    height: 38px;
    border: none;
    border-radius: 0.1042vw;
    cursor: pointer;
    box-shadow: 0 0.469vw 1.406vw rgba(255, 138, 43, 0.25);
    background: #ff8a2b;
  }
  .winning-card {
    position: relative;
  }
  .line_w {
    width: 3px;
    height: 63%;
    background: rgba(255, 255, 255, 0.021);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
  }
  .icon_hd svg {
      width: 0.8854vw;
      height: 0.8854vw;
  }
  .left_block {
      gap: 0.0521vw;
  }
  .flex_hd span:first-child {
      font-size: 2.2917vw;
      font-family: 'AgencyB';
      letter-spacing: -0.03em;
      text-shadow: 0 0 2.135vw rgba(255, 255, 255, 0.25);
  }
  .flex_hd span:last-child {
      margin-left: -0.7583vw;
      width: 4.2708vw;
      height: 2.6563vw;
      margin-top: 0.1vw;
      background-image: url('../images/city_text.png');
      background-size: 100% 100%;
      filter: drop-shadow(0 0 0.835vw rgba(255, 138, 43, 0.85));
  }
  .name_ui {
      margin-top: 0.1563vw;
      font-size: 1.0313vw;
      font-family: 'AgencyR';
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: 0.35em;
  }
  .flex_hd {
      height: 1.9479vw;
  }
  .header {
      align-items: flex-start;
  }
  .close_pannel {
      height: 1.4063vw;
      border-radius: 0.156vw;
      padding: 0.156vw 0.156vw 0.156vw 0.313vw;
      background: rgba(255, 59, 59, 0.11);
      gap: 0.2604vw;
      margin-left: auto;
  }
  .close_box {
      width: 1.0938vw;
      height: 1.0938vw;
      background-image: url('../images/close_box.png');
      background-size: 100% 100%;
      border-radius: 0.1042vw;
      box-shadow: 0 0.208vw 0.625vw rgba(255, 52, 52, 0.15);
  }
  .close_pannel span {
      font-size: 0.7292vw;
      font-family: 'Medium';
      color: #ff3434;
      letter-spacing: -0.03em;
      text-shadow: 0 0 0.833vw rgba(255, 52, 52, 0.25);
  }
  .info_block {
      gap: 0.3125vw;
      width: 18.3958vw;
      margin-top: 0.5208vw;
  }
  .info_block svg {
      width: 0.8333vw;
      height: 0.8333vw;
      flex-shrink: 0;
  }
  .info_block span {
      font-size: 0.7292vw;
      font-family: 'Regular';
      letter-spacing: -0.03em;
      color: rgba(255, 255, 255, 0.65);
  }
  .flex {
    display: flex;
  }
  .alcn {
    display: flex;
    align-items: center;
  }
  .jlcn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .clmn {
    display: flex;
    flex-direction: column;
  }
  .viewport {
    transform: scale(0.8);
  }
  
  .close {
    position: absolute;
    left: 76.5%;
    top: 1%;
    cursor: pointer;
    font-size: xx-large;
    background: transparent;
    border: none !important;
    opacity: 0;
  }
  
  
  
  .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-position-x: center; 
  }
  
  .viewport {
    margin: 0 auto;
    width: 1096px;
    height: 400px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .winning-card {
    z-index: 100;
  }
  
  
  .slider {
    display: inline-block;
  }
  
  .slider > ul li {
    color: white;
    text-decoration: none;
    list-style-type: none;
    display: inline-block;
    width: 250px;
    height: 250px;
    background: linear-gradient(180deg, #F8F8F8 0%, #C7C7C7 100%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-right: 24px;
    position: relative;
    border-radius: 2px;
    transform: translateX(-125px);
  }
  
  /* Rarity gradients */
  .slider > ul li.very-high {
    background-image: url('../images/green.png');
  }
  .slider > ul li.high {
    background-image: url('../images/purple.png');
  }
  
  .slider > ul li.mid  {
    background-image: url('../images/lightpurple.png');
  }
  
  .slider > ul li.low {
    background-image: url('../images/red.png');
  }
  
  .slider > ul li.very-low {
    background-image: url('../images/yellow.png');
  }
  
  
  
  .absolute {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  span.item-detail {
    position: relative;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    padding: 4px 8px;
    border-radius: 100px;
    margin-bottom: 4px;
  }
  
  span.schwarzgeld {
    background: #ff3f4259;
    color: #FF3F42;
    font-size: 14px;
    font-family: 'Medium';
    border-radius: 2px;
  }
  
  span.wear {
    background: #f89406;
    display: none;
  }
  
  .item-details {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 8px;
  }
  
  span.no-schwarzgeld {
    display: none;
  }
  
  .cover {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 9px;
    padding-left: 16px;
    width: 100%;
    text-align: left;
  }
  .cover span:first-child {
    font-size: 18px;
    font-family: 'SemiBold';
    text-shadow: 0 0 24px  rgba(255, 255, 255, 0.25);
  }
  .cover span:last-child {
    font-size: 15px;
    font-family: 'Medium';
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.5);
  }
  
  
  /* Images */
  img {
    object-fit: fit;
    width: 35%;
    margin: 0 auto;
    padding-bottom: 71px;
  }
  
  .slider > ul {
    padding-left: 0;
    display: flex;
    flex-direction: row;
    margin: 0;
  }
  