html {
    scroll-behavior:smooth;
    overflow-x: hidden;
  }
  body {
    background-color:#000;
    width:100%;
    height:100vh;
    margin:0;
    font-family: 'Philosopher', 'Noto Color Emoji', sans-serif;
    font-size:17px
  }
  a {
    color:rgba(204,184,109,0.9);
    text-decoration:none !important
  }
  a:hover {
    color:rgba(204,184,109,0.9);
    text-decoration:underline
  }
  a:active {
    color:rgba(204,184,109,0.9)
  }
  a:visited {
    color:rgba(204,184,109,0.9)
  }
  @keyframes fadeInUp {
    from {
      opacity:0;
      transform:translateY(20px)
    }
    to {
      opacity:1;
      transform:translateY(0)
    }
  }
  @keyframes fadeOutDown {
    from {
      opacity:1;
      transform:translate3d(0,0,0)
    }
    to {
      opacity:0;
      transform:translate3d(0,100%,0)
    }
  }
  .modal-closing {
    animation:fadeOutDown .5s ease-out forwards
  }
  .modal-closing-purchase {
    animation:fadeOutDown .5s ease-out forwards
  }
  .btn:focus,
  .btn:active {
    outline:0
  }
  .btn.btn-primary:focus,
  .btn.btn-primary:active {
    outline:none !important
  }
  .shiny-top-button {
    position:relative;
    overflow:hidden;
    background-color:#000;
    color:white;
    border:2px solid #555;
    height:50px;
    width:190px;
    border-radius:5px;
    cursor:pointer
  }
  .shiny-top-button::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(to right,transparent 0,rgba(255,255,255,0.2) 50%,transparent 100%);
    animation:shine-slide 3s infinite
  }
  .shiny-top-button-onhover {
    position:relative;
    overflow:hidden;
    background-color:#000;
    color:white;
    border:2px solid #555;
    height:50px;
    width:190px;
    border-radius:5px;
    cursor:pointer;
    transition:background-color .3s,color .3s
  }
  .shiny-top-button-onhover:hover {
    background-color:#111
  }
  .shiny-top-button-onhover:hover::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(to right,transparent 0,rgba(255,255,255,0.2) 50%,transparent 100%);
    animation:shine-slide 3s infinite
  }
  @keyframes shine-slide {
    0 {
      transform:translateX(-100%)
    }
    50% {
      transform:translateX(0)
    }
    100% {
      transform:translateX(100%)
    }
  }
  .navbar-nav.me-auto {
    margin-left:50px;
    font-family:'Source Sans Pro',sans-serif
  }
  .nav-link {
    margin-right:50px;
    font-size:13px !important;
    font-family:'Montserrat',sans-serif
  }
  #nav-2 {
    margin-right:1px
  }
  #left {
    margin-right:100px
  }
  .logo-image {
    margin-left:10px
  }
  .navbar.navbar-dark.navbar-expand-md.fixed-top {
    background-color:#000 !important
  }
  #header-container {
    padding-top:250px;
    text-align:center
  }
  #header-top {
    margin-top:30px
  }
  #feature-row {
    margin-top:90px;
    text-align:center
  }
  .col {
    color:#fff
  }
  #feature-paragraph {
    text-align:center
  }
  #feature-container {
    margin-top:330px
  }
  #slide {
    margin-top:30px
  }
  #slide-text {
    margin-top:400px
  }
  #tab-stages {
    margin-top:40px
  }
  #slider-paragraph {
    margin-top:350px
  }
  #carousel {
    margin-top:20px
  }
  .nav-item:hover {
    filter:brightness(120%)
  }
  @media(min-width:1200px) {
    #paragraph-stage {
      width:715px
    }
  }
  @media(min-width:1400px) {
    #paragraph-stage {
      width:895px
    }
  }
  #line {
    border-color:#84704a
  }
  #line:hover {
    border-color:#84704a
  }
  .button:hover {
    filter:brightness(140%)
  }
  #button:hover {
    filter:brightness(140%)
  }
  .nav-menu:hover {
    filter:brightness(130%)
  }
  .nav-link:hover {
    color:rgb(142,124,97,1.0) !important
  }
  .nav-link.active {
    color:rgb(57,48,37,1.0) !important;
    filter:brightness(300%)
  }
  #border-line {
    opacity:.4
  }
  @media(min-width:300px) {
    #promo-section {
      height:1250px
    }
  }
  @media(min-width:1200px) {
    #promo-section {
      height:650px
    }
  }
  @media(min-width:300px) {
    #header-section1 {
      height:1350px
    }
  }
  @media(min-width:1200px) {
    #header-section1 {
      height:1000px;
      background: url(../img/bg/bg-repeat.jpg) top !important;
    }
  }
  @media(min-width:300px) {
    #section-1 {
      height:1400px
    }
  }
  @media(min-width:1200px) {
    #section-1 {
      height:1000px
    }
  }
  @media(min-width:300px) {
    #section-3 {
      height:1430px
    }
  }
  @media(min-width:1200px) {
    #section-3 {
      height:600px
    }
  }
  @media(min-width:1200px) {
    #key-column {
      width:550px
    }
  }
  @media(min-width:1400px) {
    #key-column {
      width:660px
    }
  }
  @media(min-width:300px) {
    #footer-list {
      padding-top:16px
    }
  }
  @media(min-width:1200px) {
    #footer-list {
      padding-top:29px
    }
  }
  #icon {
    width:10% !important;
    height:auto !important;
    transition:transform .3s ease-in-out
  }
  #icon:hover {
    filter:brightness(130%);
    transform:translateY(-5px)
  }
  .footer-basic {
    background-color:rgb(60,60,60,0.1)
  }
  .item {
    transition:transform .3s ease-in-out
  }
  .item:hover {
    transform:translateY(-10px)
  }
  #icon-img {
    transition:transform .3s ease-in-out
  }
  #icon-img :hover {
    transform:translateY(-10px)
  }
  .card-icon {
    transition:transform .3s ease-in-out
  }
  .card-icon:hover {
    transform:translateY(-10px)
  }
  @keyframes enter-animation {
    0 {
      transform:translateY(100px);
      opacity:0
    }
    100% {
      transform:translateY(0);
      opacity:1
    }
  }
  @media(prefers-reduced-motion:no-preference) {
    .image-animation {
      animation:enter-animation .8s 1
    }
  }
  .underline-on-hover {
    color:rgba(204,184,109,0.9);
    opacity:.5;
    text-decoration:none
  }
  .underline-on-hover:hover {
    color:rgba(204,184,109,0.9);
    opacity:.7;
    text-decoration:underline !important
  }
  .popup-modal {
    backdrop-filter: blur(10px);
    display:none;
    position:fixed;
    padding-top:100px;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    z-index:5000;
    display:none;
    background-color:rgba(255,255,255,0.1);
    overflow:auto
  }
  .popup-modal-content {
    position:relative;
    top:auto;
    background:rgba(51,42,34,0.03);
    border-radius:16px;
    border:1px solid;
    border-color:rgba(50,43,33,0.8);
    color:white;
    margin:auto;
    padding:30px;
    width:25%;
    z-index:5000;
    animation:fadeInUp 1 ease-out
  }
  .popup-modal-content-register form {
    position:relative;
    z-index:2;
    font-weight:600;
    color:#81725b;
    display:flex;
    flex-direction:column;
    gap:5px;
    margin:25px;
    padding:10px;
    width:68%;
    line-height:20px
  }
  .popup-modal-content-register label {
    margin-bottom:5px;
    display:block
  }
  .popup-modal-content-register input,
  .popup-modal-content-register button {
    color:grey;
    padding:5px;
    background-color:rgba(50,43,33,0.05);
    border:2px solid rgba(50,43,33,0.4);
    border-radius:4px
  }
  .popup-modal-content-register input:hover {
    padding:5px;
    background-color:rgba(50,43,33,0.1);
    border:2px solid rgba(50,43,33,0.7);
    border-radius:4px
  }
  .popup-modal-content-register button {
    width:auto;
    height:45px;
    background:linear-gradient(rgba(51,42,34,0.37),rgba(14,11,6,0.37));
    border:1px solid;
    border-color:rgba(255,255,255,0.1)
  }
  .popup-modal-content-register button:hover {
    width:auto;
    height:45px;
    background:linear-gradient(rgba(51,42,34,0.77),rgba(14,11,6,0.77));
    border:1px solid;
    border-color:rgba(255,255,255,0.2)
  }
  .popup-modal-content form {
    font-weight:600;
    color:#81725b;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:15px;
    padding:10px
  }
  .popup-modal-content label {
    margin-bottom:5px;
    display:block
  }
  .popup-modal-content input,
  .popup-modal-content button {
    color:grey;
    padding:5px;
    background-color:rgba(50,43,33,0.05);
    border:2px solid rgba(50,43,33,0.4);
    border-radius:4px
  }
  .popup-modal-content input:hover {
    padding:5px;
    background-color:rgba(50,43,33,0.1);
    border:2px solid rgba(50,43,33,0.7);
    border-radius:4px
  }
  .popup-modal-content button {
    width:auto;
    height:45px;
    background:linear-gradient(rgba(51,42,34,0.37),rgba(14,11,6,0.37));
    border:1px solid;
    border-color:rgba(255,255,255,0.1)
  }
  .popup-modal-content button:hover {
    width:auto;
    height:45px;
    background:linear-gradient(rgba(51,42,34,0.77),rgba(14,11,6,0.77));
    border:1px solid;
    border-color:rgba(255,255,255,0.2)
  }
  .close {
    position:relative;
    z-index:2
  }
  .close,
  .closeLogin,
  .closeMail,
  .closeDonate,
  .closeConfirm,
  .closeActivate,
  .closeReward,
  .closeRecover,
  .closePass,
  .closeCode,
  .closeAvatar {
    color:#aaa;
    float:right;
    font-size:32px;
    font-weight:bold
  }
  .close:hover,
  .close:focus,
  .closeReward:hover,
  .closeReward:focus,
  .closeLogin:hover,
  .closeLogin:focus,
  .closeMail:hover,
  .closeMail:focus,
  .closeDonate:hover,
  .closeActivate:hover,
  .closeCode:hover,
  .closeAvatar:hover,
  .closeActivate:focus,
  .closeConfirm:hover,
  .closeRecover:hover,
  .closeRecover:focus .closePass:hover,
  .closePass:focus,
  .closeCode:focus,
  .closeAvatar:focus {
    color:#fff;
    text-decoration:none;
    cursor:pointer
  }
  .closePass:hover {
    cursor:pointer;
    filter:brightness(150%)
  }
  .dropdown:hover .dropdown-menu {
    display:block;
    border-radius:16px;
    font-size:16px;
    border-radius:4px
  }
  .dropdown .dropdown-menu {
    display:none;
    position:absolute;
    color:white;
    background-color:rgba(0,0,0,1.0);
    min-width:290px;
    top:35px;
    box-shadow:0 8px 16px 0 rgba(0,0,0,1.0)
  }
  .dropdown-item:hover {
    background-color:rgba(0,0,0,0.8);
    color:white
  }
  .dropdown-menu .dropdown-divider {
    border-top:1px solid rgba(255,255,255,0.03)
  }
  .dropdown-menu .dropdown-item {
    color:grey;
    transition:transform .3s ease
  }
  .dropdown-menu .dropdown-item:hover {
    background-color:rgba(255,255,255,0.01);
    border-radius:5px;
    color:#d7b287
  }
  .dropdown-menu>.dropdown-item:active,
  .dropdown-menu>.dropdown-item:focus {
    background-color:rgba(0,0,0,0.8) !important;
    color:#d7b287 !important
  }
  .nav-item {
    position:relative
  }
  .nav-item .dropdown-menu {
    right:0;
    left:auto
  }
  .nav-item .dropdown-menu {
    width:auto;
    padding:15px
  }
  .tabs-container {
    margin-bottom:20px
  }
  .tabs a {
    text-decoration:none;
    color:rgba(255,255,255,0.5);
    background-color:#eee;
    padding:10px 20px;
    border-radius:5px 5px 5px 5px;
    margin-right:5px;
    display:inline-block;
    background:linear-gradient(rgba(51,42,34,0.27),rgba(14,11,6,0.27));
    border:1px solid;
    border-color:rgba(255,255,255,0.1)
  }
  .tabs a:hover {
    background:linear-gradient(rgba(51,42,34,0.57),rgba(14,11,6,0.57));
    border:1px solid;
    border-color:rgba(255,255,255,0.2)
  }
  .tabs a.active {
    background:linear-gradient(rgba(51,42,34,0.77),rgba(14,11,6,0.77));
    border:1px solid;
    border-color:rgba(255,255,255,0.3)
  }
  .search-container form {
    display:flex;
    margin-top:20px
  }
  .search-container input[type=text] {
    padding:10px;
    width:100%;
    border:1px solid #ccc;
    border-radius:5px 0 0 5px
  }
  .search-container button {
    padding:10px;
    background-color:#007bff;
    color:white;
    border:0;
    border-radius:0 5px 5px 0;
    cursor:pointer
  }
  .table-responsive {
    animation:fadeInUp 1 ease-out
  }
  .player-row {
    display:flex;
    align-items:center;
    margin-bottom:10px;
    padding:15px;
    margin:5px auto;
    padding:20px;
    animation:fadeInUp .5s ease-out;
    color:#888;
    font-size:1.1em;
    background:linear-gradient(rgba(50,43,33,0.01),rgba(50,43,33,0.02));
    box-shadow:0 4px 30px rgba(0,0,0,0.1);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    box-shadow:0 2px 5px rgba(0,0,0,0.2);
    border-top:1px solid transparent;
    border-image:linear-gradient(to right,rgba(119,91,58,0.01),rgba(119,91,58,0.43),rgba(119,91,58,0.01)) 100% 1;
    transition:all .3s ease;
    border-radius:15px
  }
  .player-row:hover {
    background:linear-gradient(rgba(50,43,33,0.03),rgba(50,43,33,0.05));
    border-top:1px solid transparent;
    border-image:linear-gradient(to right,rgba(119,91,58,0.01),rgba(119,91,58,0.93),rgba(119,91,58,0.01)) 100% 1
  }
  .player-row span {
    margin-right:0px
  }
  .player-row img {
    width:30px;
    height:30px;
    margin-right:10px
  }
  #pagination-rank {
    margin-top:30px;
    text-align:center;
    height:40px
  }
  #pagination-rank a {
    text-decoration:none;
    color:grey;
    font-size:1em;
    margin:0 10px;
    padding:8px;
    border-radius:5px;
    background:linear-gradient(rgba(51,42,34,0.27),rgba(14,11,6,0.27));
    border:1px solid;
    border-color:rgba(255,255,255,0.1)
  }
  #pagination-rank a:hover {
    padding:8px;
    background:linear-gradient(rgba(51,42,34,0.37),rgba(14,11,6,0.37));
    border:1px solid;
    border-color:rgba(255,255,255,0.2)
  }
  #pagination-rank a.current-page {
    font-weight:bold;
    background:linear-gradient(rgba(51,42,34,0.57),rgba(14,11,6,0.57));
    border:1px solid;
    border-color:rgba(255,255,255,0.3)
  }
  .header-row {
    font-weight:bold
  }
  .player-row {
    margin-bottom:5px
  }
  .player-row span {
    display:inline-block;
    width:100%;
    text-align:center;
    font-weight:600
  }
  .tabs-search-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-height:10px
  }
  .tabs {
    display:flex;
    gap:5px;
    max-height:50px;
    top:50px;
    border-radius:55px
  }
  .search-container {
    max-width:350px
  }
  .search-container form {
    max-height:45px
  }
  .search-container input[type="text"] {
    max-height:45px;
    background-color:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.1);
    color:grey;
    transition:border-color .3s ease;
    box-shadow:0 0 0 0 rgba(126,101,72,0.5)
  }
  .search-container input[type="text"]:focus {
    outline:0;
    border-color:grey;
    box-shadow:0 0 15px 5px rgba(126,101,72,0.3)
  }
  .search-container button {
    width:250px;
    height:45px;
    background:linear-gradient(rgba(51,42,34,0.37),rgba(14,11,6,0.37));
    border:1px solid;
    border-color:rgba(255,255,255,0.1)
  }
  .search-container button:hover {
    width:250px;
    height:45px;
    background:linear-gradient(rgba(51,42,34,0.77),rgba(14,11,6,0.77));
    border:1px solid;
    border-color:rgba(255,255,255,0.2)
  }
  .race img {
    filter:grayscale(70%)
  }
  .itemid input[type="text"] {
    max-height:35px;
    background-color:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.1);
    color:grey;
    transition:border-color .3s ease;
    padding:5px;
    border-radius:5px;
    width:35%;
    margin-bottom:10px;
    top:15px;
    position:relative
  }
  .itemid input[type="text"]:focus {
    border-color:white !important;
    outline:0
  }
  .itemid button {
    background:linear-gradient(rgba(51,42,34,0.77),rgba(14,11,6,0.77));
    border:1px solid rgba(255,255,255,0.1);
    color:white;
    padding:7px 12px;
    text-align:center;
    text-decoration:none;
    display:inline-block;
    font-size:14px;
    margin-left:10px;
    border-radius:5px;
    height:35px;
    cursor:pointer;
    transition:background-color .3s ease;
    top:15px;
    position:relative
  }
  .itemid button:hover {
    background-color:#45a049
  }
  #webshop {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between
  }
  #searchForm {
    flex:0 0 auto;
    margin-top:50px;
    margin-right:10px;
    align-self:flex-start
  }
  #characterSelector {
    flex:0 0 auto;
    margin-top:50px;
    margin-left:140px;
    align-self:flex-start
  }
  .content-container {
    display:grid;
    grid-template-columns:minmax(230px,7fr) minmax(270px,2fr);
    grid-template-areas:"items sidebar";
    gap:30px;
    margin-top:30px
  }
  #itemsDisplay {
    grid-area:items
  }
  #categoriesSidebar {
    grid-area:sidebar;
    align-self:start;
    background:linear-gradient(to bottom,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
    padding:5px 25px;
    border:1px solid rgba(255,255,255,0.05);
  }
  #categoriesSidebar li:hover {
    background-color:rgba(255,255,255,0.05);
    cursor:pointer
  }
  #categoriesSidebar li.active {
    background-color:rgba(255,255,255,0.1)
  }
  #categoriesSidebar span {
    font-size:1.2em;
    font-weight:bold
  }
  .controls-container {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:30px;
    width:72%
  }
  #characterSelector {
    height:45px;
    background-color:rgb(255 255 255 / .1);
    border:1px solid rgb(255 255 255 / .1);
    color:grey;
    border-radius:5px;
    transition:border-color .3s ease;
    width:196px;
    margin-right:0
  }
  #characterSelector option {
    background-color:rgb(255 255 255 / .1);
    color:grey
  }
  button[type="character"] {
    height:45px;
    color:grey;
    background:linear-gradient(rgb(51 42 34 / .37),rgb(14 11 6 / .37));
    border:1px solid;
    border-color:rgb(255 255 255 / .1);
    border-radius:5px;
    margin-left:5px;
    position:relative;
    width:auto
  }
  button[type="character"]:hover {
    color:grey;
    background:linear-gradient(rgb(51 42 34 / .77),rgb(14 11 6 / .77));
    border:1px solid;
    border-color:rgb(255 255 255 / .2)
  }
  .glow-on-focus:focus {
    border-color:grey;
    box-shadow:0 0 15px 5px rgb(126 101 72 / .3)
  }
  .category a {
    color:rgb(192 95 85 / .9);
    filter:brightness(250%);
    font-weight:200;
    text-decoration:none;
    opacity:.6
  }
  .category a:hover {
    color:rgb(192 95 85 / .9);
    filter:brightness(290%);
    text-decoration:underline
  }
  .arrow {
    color:grey;
    margin-right:5px
  }
  input[type="search"] {
    height:45px;
    background-color:rgb(255 255 255 / .1);
    border:1px solid rgb(255 255 255 / .1);
    border-radius:5px;
    padding:5px;
    color:grey;
    transition:border-color .3s ease;
    box-shadow:0 0 0 0 rgb(126 101 72 / .5);
    margin-right:10px
  }
  input[type="search"]:focus {
    outline:0;
    border-color:grey;
    box-shadow:0 0 15px 5px rgb(126 101 72 / .3)
  }
  button[type="submit"] {
    height:45px;
    color:grey;
    background:linear-gradient(rgb(51 42 34 / .37),rgb(14 11 6 / .37))!important;
    border:1px solid;
    border-color:rgb(255 255 255 / .1);
    border-radius:5px
  }
  button[type="submit"]:hover {
    color:grey;
    background:linear-gradient(rgb(51 42 34 / .77),rgb(14 11 6 / .77));
    border:1px solid;
    border-color:rgb(255 255 255 / .2)
  }
  input[type="date"] {
    height:45px;
    background-color:rgb(255 255 255 / .1);
    border:1px solid rgb(255 255 255 / .1);
    border-radius:5px;
    padding:5px;
    color:grey;
    transition:border-color .3s ease;
    box-shadow:0 0 0 0 rgb(126 101 72 / .5);
    margin-right:10px
  }
  input[type="date"]:focus {
    outline:0;
    border-color:grey;
    box-shadow:0 0 15px 5px rgb(126 101 72 / .3)
  }
  button[type="search"] {
    height:45px;
    color:grey;
    background:linear-gradient(rgb(51 42 34 / .37),rgb(14 11 6 / .37));
    border:1px solid;
    border-color:rgb(255 255 255 / .1);
    border-radius:5px;
    position:relative;
    margin-left:-5px
  }
  button[type="search"]:hover {
    color:grey;
    background:linear-gradient(rgb(51 42 34 / .77),rgb(14 11 6 / .77));
    border:1px solid;
    border-color:rgb(255 255 255 / .2)
  }
  .category {
    margin-bottom:5px
  }
  .subcategories {
    overflow:hidden;
    max-height:0;
    transition:max-height .5s ease-in-out
  }
  .subcategories.expanded {
    max-height:500px
  }
  .shop-item {
    background: radial-gradient(rgba(50, 43, 33, 0.5), #111);
    border:1px solid rgb(255 255 255 / .06);
    padding:15px;
    margin-bottom:15px;
    transition:all .3s ease;
    border-top:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .43),rgb(119 91 58 / .01)) 100% 1;
    animation:fadeInUp .5s ease-out
  }
  .shop-item:hover {
    background: radial-gradient(rgba(50, 43, 33, 0.9), #111);
    border:1px solid rgb(255 255 255 / .2);
    border-top:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .83),rgb(119 91 58 / .01)) 100% 1
  }
  .shop-item-ely {
    background: radial-gradient(rgba(50, 43, 33, 0.5), #111);
    border:1px solid rgb(255 255 255 / .06);
    padding:15px;
    margin-bottom:15px;
    transition:all .3s ease;
    border-top:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .43),rgb(119 91 58 / .01)) 100% 1;
    box-shadow:0 0 1px 1px rgb(72 171 224 / .5);
    animation:fadeInUp .5s ease-out
  }
  .shop-item-ely:hover {
    background: radial-gradient(rgba(50, 43, 33, 0.9), #111);
    border:1px solid rgb(255 255 255 / .2);
    border-top:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .83),rgb(119 91 58 / .01)) 100% 1
  }
  .shop-item-asmo {
    background: radial-gradient(rgba(50, 43, 33, 0.5), #111);
    border:1px solid rgb(255 255 255 / .06);
    padding:15px;
    margin-bottom:15px;
    transition:all .3s ease;
    border-top:1px solid #fff0;
    box-shadow:0 0 1px 1px rgb(153 97 0 / .5);
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .43),rgb(119 91 58 / .01)) 100% 1;
    animation:fadeInUp .5s ease-out
  }
  .shop-item-asmo:hover {
    background: radial-gradient(rgba(50, 43, 33, 0.9), #111);
    border-top:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .83),rgb(119 91 58 / .01)) 100% 1
  }
  .shop-item h3 {
    margin-bottom:25px
  }
  .shop-item p {
    margin-bottom:5px
  }
  .step-progress-container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    margin:20px 0
  }
  .step-progress-bar {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:100%;
    height:4px;
    background:#ddd;
    z-index:0
  }
  .step {
    display:flex;
    flex-direction:column;
    align-items:center;
    z-index:1
  }
  .step-icon {
    width:40px;
    height:40px;
    line-height:40px;
    border-radius:50%;
    background:#ddd;
    color:#fff;
    text-align:center;
    margin-bottom:5px;
    position:relative;
    z-index:1
  }
  .step-title {
    color:#ddd;
    font-size:.8rem
  }
  .step.active .step-icon,
  .step.completed .step-icon {
    background:#4caf50
  }
  .step.active .step-title,
  .step.completed .step-title {
    color:#4caf50
  }
  .step.completed .step-icon::after {
    content:'✓';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    line-height:40px;
    text-align:center;
    color:#fff
  }
  .shine {
    transition:opacity 2.3s ease-in-out
  }
  .shine:hover {
    filter:brightness(1.5)!important
  }
  .fire-effect {
    width:100px;
    height:200px;
    background:linear-gradient(rgb(255 87 34),rgb(255 163 26));
    position:relative;
    border-radius:50% / 15%;
    animation:flicker 1.5s infinite alternate
  }
  @keyframes flicker {
    0,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
      transform:scaleY(1)
    }
    20%,
    24%,
    55% {
      transform:scaleY(.9)
    }
    23%,
    54% {
      transform:scaleY(.85)
    }
  }
  .fire-effect::before,
  .fire-effect::after {
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    height:100%;
    width:100%;
    border-radius:50% / 15%;
    background:inherit;
    animation:inherit
  }
  .fire-effect::before {
    background:linear-gradient(rgb(255 87 34 / .9),rgb(255 163 26 / .5));
    filter:blur(10px)
  }
  .fire-effect::after {
    background:linear-gradient(rgb(255 87 34 / .6),transparent);
    filter:blur(20px)
  }
  .centered {
    position:relative;
    left:43%
  }
  #downloadOptions {
    transition:opacity 1.5s ease,visibility 1.5s,max-height .5s ease;
    opacity:0;
    visibility:hidden;
    max-height:0;
    overflow:hidden
  }
  #downloadOptions.show {
    opacity:1;
    visibility:visible;
    max-height:200px
  }
  .option:hover {
    transition:opacity 1.5s ease,visibility 1.5s,max-height .5s ease
  }
  .faq-container {
    position:relative;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding-top:120px;
    font-size:18px
  }
  .faq-question {
    text-shadow:2px 2px 8px rgb(0 0 0 / .1);
    cursor:pointer;
    padding:35px 35px 35px 60px;
    margin-bottom:5px;
    position:relative;
    color:#888;
    font-size:1.2em;
    background:0;
    border-top:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .001),rgb(119 91 58 / .23),rgb(119 91 58 / .001)) 100% 1;
    border-image-slice:1;
    transition:.3s;
    font-weight:400;
    border-radius:1px
  }
  .faq-question:hover {
    transform:translateX(5px)
  }
  .faq-question::before {
    content:'+';
    position:absolute;
    left:25px;
    top:50%;
    transform:translateY(-50%);
    color:rgb(119 91 58 / .23);
    font-weight:700;
    font-size:1.5em;
    transition:transform .3s ease
  }
  .faq-question.expanded::before {
    transform:translateY(-50%) rotate(45deg);
    color:rgb(119 91 58 / .23);
    content:'✖';
    font-size:.90em
  }
  .faq-answer {
    text-shadow:2px 2px 8px rgb(0 0 0 / .1);
    display:none;
    padding-left:65px;
    background:rgb(255 255 255 / .001);
    border-radius:16px;
    font-size:20px;
    color:rgb(255 255 255 / .35);
    font-weight:300;
    margin-bottom:10px;
    line-height:1.6;
    transition:all .5s ease
  }
  .purchase-history {
    margin-top:20px
  }
  .purchase-history .purchase-entry {
    border-bottom:1px solid #ccc;
    padding:10px 0
  }
  .purchase-history .purchase-entry:last-child {
    border-bottom:0
  }
  .purchase-history .purchase-details {
    font-size:16px;
    font-weight:700
  }
  .purchase-history .purchase-details span {
    font-weight:400
  }
  .item-container {
    display:flex;
    align-items:center
  }
  .item-img {
    width:40px;
    height:auto;
    margin-right:10px;
    margin-top:-20px
  }
  .item-name {
    color:#6cb8db;
    font-size:1.6em;
    margin:0
  }
  .searchHistory {
    position:relative;
    width:350px
  }
  .search-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px
  }
  #item_search {
    flex:1;
    display:flex;
    align-items:center;
    margin-right:1em
  }
  #item_search input[type="search"] {
    width:100%;
    margin-right:.5em
  }
  #item_search button {
    white-space:nowrap
  }
  .date-container {
    flex:1;
    display:flex;
    justify-content:flex-end;
    align-items:center
  }
  #date_search {
    display:flex;
    align-items:center
  }
  #date_search label,
  #date_search input[type="date"],
  #date_search button {
    margin-right:.5em;
    white-space:nowrap
  }
  @media(max-width:600px) {
    .search-container {
      flex-direction:column;
      align-items:stretch
    }
    #item_search,
    .date-container {
      margin-right:0
    }
    #item_search button,
    #date_search button {
      width:auto
    }
    #date_search {
      justify-content:center
    }
  }
  .level-square {
    display:inline-block;
    width:30px;
    height:30px;
    background-color:#a5a5a5;
    color:#fff;
    text-align:center;
    line-height:30px;
    margin:2px
  }
  .reward-level {
    background-color:brown
  }
  .current-level {
    background-color:blue
  }
  .play {
    position:relative;
    background-image:url(https://asset.eldenaion.com/play/play_board.png);
    background-position:center;
    background-repeat:no-repeat;
    min-width:926px;
    min-height:623px;
    padding-bottom:30px;
    padding-right:30px;
    transition:filter .5s ease-in-out;
    z-index:-1
  }
  .play-btn {
    position:absolute;
    bottom:10px;
    right:10px;
    background-image:url(https://asset.eldenaion.com/play/play_btn.png);
    background-position:center;
    background-repeat:no-repeat;
    min-width:140px;
    min-height:142px;
    border:0;
    cursor:pointer;
    background-color:#fff0;
    transition:transform .2s ease-in-out,filter .2s ease-in-out;
    transform:translate(-100%,-35%);
    z-index:50
  }
  .play-btn:hover {
    transform:translate(-100%,-35%) scale(1.1);
    filter:brightness(1.2)
  }
  .play-btn::after {
    content:"ROLL";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:16px;
    color:#fff
  }
  .dice {
    align-items:center;
    display:grid;
    grid-gap:6rem;
    grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
    grid-template-rows:auto;
    justify-items:center;
    padding:2rem;
    perspective:600px;
    position:relative
  }
  .die-list {
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    height:6rem;
    list-style-type:none;
    transform-style:preserve-3d;
    width:10rem;
    margin-top:180px
  }
  .even-roll {
    transition:transform 1.5s ease-out
  }
  .odd-roll {
    transition:transform 1.25s ease-out
  }
  .die-item {
    background-color:rgb(223 172 45);
    box-shadow:inset -.35rem .35rem .95rem rgb(0 0 0 / .1),inset .5rem -.25rem .5rem rgb(0 0 0 / .15);
    display:grid;
    grid-column:1;
    grid-row:1;
    grid-template-areas:"one two three" "four five six" "seven eight nine";
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    height:100%;
    padding:2rem;
    width:100%
  }
  .dot {
    align-self:center;
    background-color:#676767;
    border-radius:90%;
    box-shadow:inset -.15rem .15rem .25rem rgb(0 0 0 / .7);
    display:block;
    height:1.25rem;
    justify-self:center;
    width:1.25rem
  }
  .even-roll[data-roll="1"] {
    transform:rotateX(360deg) rotateY(720deg) rotateZ(360deg)
  }
  .even-roll[data-roll="2"] {
    transform:rotateX(450deg) rotateY(720deg) rotateZ(360deg)
  }
  .even-roll[data-roll="3"] {
    transform:rotateX(360deg) rotateY(630deg) rotateZ(360deg)
  }
  .even-roll[data-roll="4"] {
    transform:rotateX(360deg) rotateY(810deg) rotateZ(360deg)
  }
  .even-roll[data-roll="5"] {
    transform:rotateX(270deg) rotateY(720deg) rotateZ(360deg)
  }
  .even-roll[data-roll="6"] {
    transform:rotateX(360deg) rotateY(900deg) rotateZ(360deg)
  }
  .odd-roll[data-roll="1"] {
    transform:rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg)
  }
  .odd-roll[data-roll="2"] {
    transform:rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg)
  }
  .odd-roll[data-roll="3"] {
    transform:rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg)
  }
  .odd-roll[data-roll="4"] {
    transform:rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg)
  }
  .odd-roll[data-roll="5"] {
    transform:rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg)
  }
  .odd-roll[data-roll="6"] {
    transform:rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg)
  }
  [data-side="1"] {
    transform:rotate3d(0,0,0,90deg) translateZ(4rem)
  }
  [data-side="2"] {
    transform:rotate3d(-1,0,0,90deg) translateZ(4rem)
  }
  [data-side="3"] {
    transform:rotate3d(0,1,0,90deg) translateZ(4rem)
  }
  [data-side="4"] {
    transform:rotate3d(0,-1,0,90deg) translateZ(4rem)
  }
  [data-side="5"] {
    transform:rotate3d(1,0,0,90deg) translateZ(4rem)
  }
  [data-side="6"] {
    transform:rotate3d(1,0,0,180deg) translateZ(4rem)
  }
  [data-side="1"] .dot:nth-of-type(1) {
    grid-area:five
  }
  [data-side="2"] .dot:nth-of-type(1) {
    grid-area:one
  }
  [data-side="2"] .dot:nth-of-type(2) {
    grid-area:nine
  }
  [data-side="3"] .dot:nth-of-type(1) {
    grid-area:one
  }
  [data-side="3"] .dot:nth-of-type(2) {
    grid-area:five
  }
  [data-side="3"] .dot:nth-of-type(3) {
    grid-area:nine
  }
  [data-side="4"] .dot:nth-of-type(1) {
    grid-area:one
  }
  [data-side="4"] .dot:nth-of-type(2) {
    grid-area:three
  }
  [data-side="4"] .dot:nth-of-type(3) {
    grid-area:seven
  }
  [data-side="4"] .dot:nth-of-type(4) {
    grid-area:nine
  }
  [data-side="5"] .dot:nth-of-type(1) {
    grid-area:one
  }
  [data-side="5"] .dot:nth-of-type(2) {
    grid-area:three
  }
  [data-side="5"] .dot:nth-of-type(3) {
    grid-area:five
  }
  [data-side="5"] .dot:nth-of-type(4) {
    grid-area:seven
  }
  [data-side="5"] .dot:nth-of-type(5) {
    grid-area:nine
  }
  [data-side="6"] .dot:nth-of-type(1) {
    grid-area:one
  }
  [data-side="6"] .dot:nth-of-type(2) {
    grid-area:three
  }
  [data-side="6"] .dot:nth-of-type(3) {
    grid-area:four
  }
  [data-side="6"] .dot:nth-of-type(4) {
    grid-area:six
  }
  [data-side="6"] .dot:nth-of-type(5) {
    grid-area:seven
  }
  [data-side="6"] .dot:nth-of-type(6) {
    grid-area:nine
  }
  @media(min-width:900px) {
    .dice {
      perspective:1300px
    }
  }
  .trade-container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-right:5px;
    margin-top:25px;
    margin-bottom:25px
  }
  .slider-container {
    flex-grow:1;
    margin-right:10px
  }
  .slider-labels {
    display:flex;
    justify-content:space-between;
    padding:0 10px
  }
  .slider-labels span {
    font-size:14px;
    color:#555
  }
  #stonesToTradeSlider {
    -webkit-appearance:none;
    width:90%;
    height:15px;
    border-radius:5px;
    background:#fff;
    outline:0;
    opacity:.7;
    transition:opacity .2s
  }
  #stonesToTradeSlider:hover {
    opacity:1
  }
  #stonesToTradeSlider::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:25px;
    height:25px;
    border-radius:50%;
    background:#fff;
    cursor:pointer
  }
  #stonesToTradeSlider::-moz-range-thumb {
    width:25px;
    height:25px;
    border-radius:50%;
    background:#fff;
    cursor:pointer
  }
  .slider-labels {
    width:105%
  }
  .submit-button {
    flex-basis:25%;
    display:flex;
    justify-content:center;
    padding:0
  }
  .submit-button button {
    width:100%;
    padding:10px 15px
  }
  .trade-container *,
  .trade-container *:before,
  .trade-container *:after {
    box-sizing:border-box
  }
  #stonesToTradeSlider {
    -webkit-appearance:none;
    appearance:none;
    width:89%;
    height:1px;
    background:linear-gradient(rgb(50 43 33 / .01),rgb(50 43 33 / .02));
    border-radius:15px;
    border:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .43),rgb(119 91 58 / .01)) 100% 1;
    outline:0;
    opacity:.7;
    transition:all .3s ease;
    cursor:pointer
  }
  #stonesToTradeSlider:disabled {
    cursor:default;
    opacity:.1;
    background:#ccc
  }
  #stonesToTradeSlider:hover:disabled {
    cursor:default;
    opacity:.1;
    background:#ccc
  }
  #stonesToTradeSlider:hover {
    opacity:1;
    background:linear-gradient(rgb(50 43 33 / .03),rgb(50 43 33 / .05));
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .93),rgb(119 91 58 / .01)) 100% 1;
    box-shadow:0 0 15px 5px rgb(126 101 72 / .1)
  }
  #stonesToTradeSlider::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:25px;
    height:25px;
    border-radius:50%;
    background:linear-gradient(rgb(51 42 34 / 1.97),rgb(14 11 6 / 1.97));
    border:1px solid rgb(255 255 255 / .1);
    cursor:pointer;
    transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out
  }
  #stonesToTradeSlider::-webkit-slider-thumb:hover {
    box-shadow:0 0 15px 5px rgb(126 101 72 / .3)
  }
  #stonesToTradeSlider::-moz-range-thumb {
    width:25px;
    height:25px;
    border-radius:50%;
    background:#4caf50;
    cursor:pointer;
    transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out
  }
  #stonesToTradeSlider::-webkit-slider-thumb:hover,
  #stonesToTradeSlider::-moz-range-thumb:hover {
    background-color:#6fda8e;
    box-shadow:0 0 10px #6fda8e
  }
  .trade-container {
    scroll-behavior:smooth
  }
  @keyframes approachAndImpact {
    0 {
      transform:scale(1.2)
    }
    80% {
      transform:scale(1)
    }
    100% {
      box-shadow:0 0 10px 10px #000,0 0 10px 10px #4cd643,0 0 10px 5px #62d15b
    }
  }
  }
  @keyframes brightness {
    0,
    50%,
    100% {
      filter:blur(0) brightness(120%) drop-shadow(0 0 2.5px rgb(255 255 255 / .1)) drop-shadow(0 0 5px rgb(255 255 255 / .075)) drop-shadow(0 0 7.5px rgb(255 255 255 / .045)) drop-shadow(0 0 10px rgb(255 255 255 / .025))
    }
    25%,
    75% {
      filter:blur(1px) brightness(50%) drop-shadow(0 0 2.5px rgb(255 255 255 / .1)) drop-shadow(0 0 5px rgb(255 255 255 / .075)) drop-shadow(0 0 7.5px rgb(255 255 255 / .045)) drop-shadow(0 0 10px rgb(255 255 255 / .025))
    }
  }
  @keyframes spin {
    0 {
      transform:rotateY(-180deg)
    }
    100% {
      transform:rotateY(180deg)
    }
  }
  .coin-container {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    margin-left:10px;
    animation:spinCoin 1s forwards
  }
  .coin {
    width:100%;
    height:100%;
    position:absolute;
    transform-style:preserve-3d;
    backface-visibility:hidden
  }
  .coin-front,
  .coin-back {
    background-size:cover;
    transform-origin:center center
  }
  .coin-front {
    background-image:url(https://asset.eldenaion.com/coin_front.svg)
  }
  .coin-back {
    background-image:url(https://asset.eldenaion.com/coin_back.svg);
    transform:rotateY(180deg)
  }
  @keyframes spinCoin {
    0 {
      transform:rotateY(0)
    }
    100% {
      transform:rotateY(360deg)
    }
  }
  @keyframes fadeInUp_Reg {
    from {
      opacity:0;
      transform:translateY(-50%) translateY(20px)
    }
    to {
      opacity:1;
      transform:translateY(-50%) translateY(0)
    }
  }
  .popup-modal-content-register {
    box-shadow:rgb(0 0 0 / .19) 0 10px 20px,rgb(0 0 0 / .23) 0 6px 6px;
    position:relative;
    top:45%;
    transform:translateY(-50%);
    background:linear-gradient(to right,#111 0,#000 30%,rgb(0 0 0 / .1) 80%) border-box,url(https://asset.eldenaion.com/bg_39_armor.png) center center/cover no-repeat border-box;
    padding:25px;
    color:#fff;
    margin:auto;
    width:60%;
    height:auto;
    z-index:100;
    animation:.5s ease-out forwards fadeInUp_Reg;
    border:15px solid transparent;
    border-image:url(https://asset.eldenaion.com/frame_square.png) 30 stretch
  }
  .diamonds-nav {
    display: flex;
    position: absolute;
    right: 5.725rem;
    top: 15.125rem;
    z-index: 10;
    padding: 0;
  }

  .diamond {
    cursor:pointer;
    width:10px;
    height:10px;
    margin-bottom:30px;
    background-color:#000;
    border:1px solid rgb(255 255 255 / .5);
    transform:rotate(45deg) translate(-50%,-50%);
    transition:background-color .3s;
    position:relative;
    z-index:1
  }
  .diamond.active {
    filter:grayscale(80%);
    background-color:#fff;
    box-shadow:0 0 10px #ff0,0 0 1px #ff0,inset 0 0 10px rgb(255 255 0 / .5),inset 0 5px 4px rgb(0 0 0 / .2);
    border:2px solid rgb(255 255 0 / .3);
    border-image:linear-gradient(to left,rgb(119 91 58 / .91),rgb(119 91 58 / .83),rgb(119 91 58 / .91)) 1
  }
  section {
    height:100vh
  }
  .news-container {
    
    overflow:hidden
  }
  .news-container::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:30%;
    background:linear-gradient(to bottom,#fff0,rgb(0 0 0 / .6));
    pointer-events:none;
    z-index:1
  }
  .btn-jump:hover {
    filter:brightness(150%)
  }
  .step-progress-container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    margin:20px 0
  }
  .step-progress-bar {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:100%;
    height:4px;
    background:#ddd;
    z-index:0
  }
  .step {
    display:flex;
    flex-direction:column;
    align-items:center;
    z-index:1
  }
  .step-icon {
    width:40px;
    height:40px;
    line-height:40px;
    border-radius:50%;
    background:#ddd;
    color:#fff;
    text-align:center;
    margin-bottom:5px;
    position:relative;
    z-index:1
  }
  .step-title {
    color:#ddd;
    font-size:.8rem
  }
  .step.active .step-icon,
  .step.completed .step-icon {
    background:#4caf50
  }
  .step.active .step-title,
  .step.completed .step-title {
    color:#4caf50
  }
  .step.completed .step-icon::after {
    content:'✔';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    line-height:40px;
    text-align:center;
    color:#fff
  }
  .shine {
    transition:opacity 2.3s ease-in-out
  }
  .shine:hover {
    filter:brightness(1.5)!important
  }
  .fire-effect {
    width:100px;
    height:200px;
    background:linear-gradient(rgb(255 87 34),rgb(255 163 26));
    position:relative;
    border-radius:50% / 15%;
    animation:flicker 1.5s infinite alternate
  }
  @keyframes flicker {
    0,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
      transform:scaleY(1)
    }
    20%,
    24%,
    55% {
      transform:scaleY(.9)
    }
    23%,
    54% {
      transform:scaleY(.85)
    }
  }
  .fire-effect::before,
  .fire-effect::after {
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    height:100%;
    width:100%;
    border-radius:50% / 15%;
    background:inherit;
    animation:inherit
  }
  .fire-effect::before {
    background:linear-gradient(rgb(255 87 34 / .9),rgb(255 163 26 / .5));
    filter:blur(10px)
  }
  .fire-effect::after {
    background:linear-gradient(rgb(255 87 34 / .6),transparent);
    filter:blur(20px)
  }
  .centered {
    position:relative;
    left:43%
  }
  #downloadOptions {
    transition:opacity 1.5s ease,visibility 1.5s,max-height .5s ease;
    opacity:0;
    visibility:hidden;
    max-height:0;
    overflow:hidden
  }
  #downloadOptions.show {
    opacity:1;
    visibility:visible;
    max-height:200px
  }
  .option:hover {
    transition:opacity 1.5s ease,visibility 1.5s,max-height .5s ease
  }
  .faq-container {
    position:relative;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding-top:120px;
    font-size:18px
  }
  .faq-question {
    text-shadow:2px 2px 8px rgb(0 0 0 / .01);
    cursor:pointer;
    padding:35px 35px 35px 60px;
    margin-bottom:5px;
    position:relative;
    color:#888;
    font-size:1.2em;
    background:0;
    border-top:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .001),rgb(119 91 58 / .23),rgb(119 91 58 / .001)) 100% 1;
    border-image-slice:1;
    transition:.3s;
    font-weight:400;
    border-radius:1px
  }
  .faq-question:hover {
    transform:translateX(5px)
  }
  .faq-question::before {
    content:'+';
    position:absolute;
    left:25px;
    top:50%;
    transform:translateY(-50%);
    color:rgb(119 91 58 / .63);
    font-weight:700;
    font-size:1.5em;
    transition:transform .3s ease
  }
  .faq-question.expanded::before {
    transform:translateY(-50%) rotate(45deg);
    color:rgb(119 91 58 / .23);
    content:'✖';
    font-size:.90em
  }
  .faq-answer {
    text-shadow:2px 2px 8px rgb(0 0 0 / .01);
    display:none;
    padding-left:65px;
    background:rgb(255 255 255 / .001);
    border-radius:16px;
    font-size:20px;
    color:rgb(255 255 255 / .35);
    font-weight:300;
    margin-bottom:10px;
    line-height:1.6;
    transition:all .5s ease
  }
  .purchase-history {
    margin-top:20px
  }
  .purchase-history .purchase-entry {
    border-bottom:1px solid #ccc;
    padding:10px 0
  }
  .purchase-history .purchase-entry:last-child {
    border-bottom:0
  }
  .purchase-history .purchase-details {
    font-size:16px;
    font-weight:700
  }
  .purchase-history .purchase-details span {
    font-weight:400
  }
  .item-container {
    display:flex;
    align-items:center
  }
  .item-img {
    width:40px;
    height:auto;
    margin-right:10px;
    margin-top:-20px
  }
  .item-name {
    color:#6cb8db;
    font-size:1.6em;
    margin:0
  }
  .searchHistory {
    position:relative;
    width:350px
  }
  .search-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px
  }
  #item_search {
    flex:1;
    display:flex;
    align-items:center;
    margin-right:1em
  }
  #item_search input[type="search"] {
    width:100%;
    margin-right:.5em
  }
  #item_search button {
    white-space:nowrap
  }
  .date-container {
    flex:1;
    display:flex;
    justify-content:flex-end;
    align-items:center
  }
  #date_search {
    display:flex;
    align-items:center
  }
  #date_search label,
  #date_search input[type="date"],
  #date_search button {
    margin-right:.5em;
    white-space:nowrap
  }
  @media(max-width:600px) {
    .search-container {
      flex-direction:column;
      align-items:stretch
    }
    #item_search,
    .date-container {
      margin-right:0
    }
    #item_search button,
    #date_search button {
      width:auto
    }
    #date_search {
      justify-content:center
    }
  }
  .level-square {
    display:inline-block;
    width:30px;
    height:30px;
    background-color:#a5a5a5;
    color:#fff;
    text-align:center;
    line-height:30px;
    margin:2px
  }
  .reward-level {
    background-color:brown
  }
  .current-level {
    background-color:blue
  }
  .play {
    position:relative;
    background-image:url(https://asset.eldenaion.com/play/play_board.png);
    background-position:center;
    background-repeat:no-repeat;
    min-width:926px;
    min-height:623px;
    padding-bottom:30px;
    padding-right:30px;
    transition:filter .5s ease-in-out;
    z-index:-1
  }
  .play-btn {
    position:absolute;
    bottom:10px;
    right:10px;
    background-image:url(https://asset.eldenaion.com/play/play_btn.png);
    background-position:center;
    background-repeat:no-repeat;
    min-width:140px;
    min-height:142px;
    border:0;
    cursor:pointer;
    background-color:#fff0;
    transition:transform .2s ease-in-out,filter .2s ease-in-out;
    transform:translate(-100%,-35%);
    z-index:50
  }
  .play-btn:hover {
    transform:translate(-100%,-35%) scale(1.1);
    filter:brightness(1.2)
  }
  .play-btn::after {
    content:"ROLL";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:16px;
    color:#fff
  }
  .dice {
    align-items:center;
    display:grid;
    grid-gap:6rem;
    grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
    grid-template-rows:auto;
    justify-items:center;
    padding:2rem;
    perspective:600px;
    position:relative
  }
  .die-list {
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    height:6rem;
    list-style-type:none;
    transform-style:preserve-3d;
    width:10rem;
    margin-top:180px
  }
  .even-roll {
    transition:transform 1.5s ease-out
  }
  .odd-roll {
    transition:transform 1.25s ease-out
  }
  .die-item {
    background-color:rgb(223 172 45);
    box-shadow:inset -.35rem .35rem .95rem rgb(0 0 0 / .1),inset .5rem -.25rem .5rem rgb(0 0 0 / .15);
    display:grid;
    grid-column:1;
    grid-row:1;
    grid-template-areas:"one two three" "four five six" "seven eight nine";
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    height:100%;
    padding:2rem;
    width:100%
  }
  .dot {
    align-self:center;
    background-color:#676767;
    border-radius:90%;
    box-shadow:inset -.15rem .15rem .25rem rgb(0 0 0 / .7);
    display:block;
    height:1.25rem;
    justify-self:center;
    width:1.25rem
  }
  .even-roll[data-roll="1"] {
    transform:rotateX(360deg) rotateY(720deg) rotateZ(360deg)
  }
  .even-roll[data-roll="2"] {
    transform:rotateX(450deg) rotateY(720deg) rotateZ(360deg)
  }
  .even-roll[data-roll="3"] {
    transform:rotateX(360deg) rotateY(630deg) rotateZ(360deg)
  }
  .even-roll[data-roll="4"] {
    transform:rotateX(360deg) rotateY(810deg) rotateZ(360deg)
  }
  .even-roll[data-roll="5"] {
    transform:rotateX(270deg) rotateY(720deg) rotateZ(360deg)
  }
  .even-roll[data-roll="6"] {
    transform:rotateX(360deg) rotateY(900deg) rotateZ(360deg)
  }
  .odd-roll[data-roll="1"] {
    transform:rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg)
  }
  .odd-roll[data-roll="2"] {
    transform:rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg)
  }
  .odd-roll[data-roll="3"] {
    transform:rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg)
  }
  .odd-roll[data-roll="4"] {
    transform:rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg)
  }
  .odd-roll[data-roll="5"] {
    transform:rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg)
  }
  .odd-roll[data-roll="6"] {
    transform:rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg)
  }
  [data-side="1"] {
    transform:rotate3d(0,0,0,90deg) translateZ(4rem)
  }
  [data-side="2"] {
    transform:rotate3d(-1,0,0,90deg) translateZ(4rem)
  }
  [data-side="3"] {
    transform:rotate3d(0,1,0,90deg) translateZ(4rem)
  }
  [data-side="4"] {
    transform:rotate3d(0,-1,0,90deg) translateZ(4rem)
  }
  [data-side="5"] {
    transform:rotate3d(1,0,0,90deg) translateZ(4rem)
  }
  [data-side="6"] {
    transform:rotate3d(1,0,0,180deg) translateZ(4rem)
  }
  [data-side="1"] .dot:nth-of-type(1) {
    grid-area:five
  }
  [data-side="2"] .dot:nth-of-type(1) {
    grid-area:one
  }
  [data-side="2"] .dot:nth-of-type(2) {
    grid-area:nine
  }
  [data-side="3"] .dot:nth-of-type(1) {
    grid-area:one
  }
  [data-side="3"] .dot:nth-of-type(2) {
    grid-area:five
  }
  [data-side="3"] .dot:nth-of-type(3) {
    grid-area:nine
  }
  [data-side="4"] .dot:nth-of-type(1) {
    grid-area:one
  }
  [data-side="4"] .dot:nth-of-type(2) {
    grid-area:three
  }
  [data-side="4"] .dot:nth-of-type(3) {
    grid-area:seven
  }
  [data-side="4"] .dot:nth-of-type(4) {
    grid-area:nine
  }
  [data-side="5"] .dot:nth-of-type(1) {
    grid-area:one
  }
  [data-side="5"] .dot:nth-of-type(2) {
    grid-area:three
  }
  [data-side="5"] .dot:nth-of-type(3) {
    grid-area:five
  }
  [data-side="5"] .dot:nth-of-type(4) {
    grid-area:seven
  }
  [data-side="5"] .dot:nth-of-type(5) {
    grid-area:nine
  }
  [data-side="6"] .dot:nth-of-type(1) {
    grid-area:one
  }
  [data-side="6"] .dot:nth-of-type(2) {
    grid-area:three
  }
  [data-side="6"] .dot:nth-of-type(3) {
    grid-area:four
  }
  [data-side="6"] .dot:nth-of-type(4) {
    grid-area:six
  }
  [data-side="6"] .dot:nth-of-type(5) {
    grid-area:seven
  }
  [data-side="6"] .dot:nth-of-type(6) {
    grid-area:nine
  }
  @media(min-width:900px) {
    .dice {
      perspective:1300px
    }
  }
  .trade-container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-right:5px;
    margin-top:25px;
    margin-bottom:25px
  }
  .slider-container {
    flex-grow:1;
    margin-right:10px
  }
  .slider-labels {
    display:flex;
    justify-content:space-between;
    padding:0 10px
  }
  .slider-labels span {
    font-size:14px;
    color:#555
  }
  #stonesToTradeSlider {
    -webkit-appearance:none;
    width:90%;
    height:15px;
    border-radius:5px;
    background:#fff;
    outline:0;
    opacity:.7;
    transition:opacity .2s
  }
  #stonesToTradeSlider:hover {
    opacity:1
  }
  #stonesToTradeSlider::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:25px;
    height:25px;
    border-radius:50%;
    background:#fff;
    cursor:pointer
  }
  #stonesToTradeSlider::-moz-range-thumb {
    width:25px;
    height:25px;
    border-radius:50%;
    background:#fff;
    cursor:pointer
  }
  .submit-button {
    flex-basis:25%;
    display:flex;
    justify-content:center;
    padding:0
  }
  .submit-button button {
    width:100%;
    padding:10px 15px
  }
  .trade-container *,
  .trade-container *:before,
  .trade-container *:after {
    box-sizing:border-box
  }
  #stonesToTradeSlider {
    -webkit-appearance:none;
    appearance:none;
    width:89%;
    height:1px;
    background:linear-gradient(rgb(50 43 33 / .01),rgb(50 43 33 / .02));
    border-radius:15px;
    border:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .43),rgb(119 91 58 / .01)) 100% 1;
    outline:0;
    opacity:.7;
    transition:all .3s ease;
    cursor:pointer
  }
  #stonesToTradeSlider:disabled {
    cursor:default;
    opacity:.1;
    background:#ccc
  }
  #stonesToTradeSlider:hover:disabled {
    cursor:default;
    opacity:.1;
    background:#ccc
  }
  #stonesToTradeSlider:hover {
    opacity:1;
    background:linear-gradient(rgb(50 43 33 / .03),rgb(50 43 33 / .05));
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .93),rgb(119 91 58 / .01)) 100% 1;
    box-shadow:0 0 15px 5px rgb(126 101 72 / .1)
  }
  #stonesToTradeSlider::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:25px;
    height:25px;
    border-radius:50%;
    background:linear-gradient(rgb(51 42 34 / 1.97),rgb(14 11 6 / 1.97));
    border:1px solid rgb(255 255 255 / .1);
    cursor:pointer;
    transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out
  }
  #stonesToTradeSlider::-webkit-slider-thumb:hover {
    box-shadow:0 0 15px 5px rgb(126 101 72 / .3)
  }
  #stonesToTradeSlider::-moz-range-thumb {
    width:25px;
    height:25px;
    border-radius:50%;
    background:#4caf50;
    cursor:pointer;
    transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out
  }
  #stonesToTradeSlider::-webkit-slider-thumb:hover,
  #stonesToTradeSlider::-moz-range-thumb:hover {
    background-color:#6fda8e;
    box-shadow:0 0 10px #6fda8e
  }
  .trade-container {
    scroll-behavior:smooth
  }
  .oath-container {
    animation:fadeInUp .5s ease-out;
    color:#888;
    font-size:1.1em;
    background:linear-gradient(rgb(50 43 33 / .01),rgb(50 43 33 / .02));
    box-shadow:0 4px 30px rgb(0 0 0 / .1);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    box-shadow:0 2px 5px rgb(0 0 0 / .2);
    border-top:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .43),rgb(119 91 58 / .01)) 100% 1;
    transition:all .3s ease;
    border-radius:15px;
    padding:25px;
    position:relative;
    margin-bottom:30px;
    margin-top:30px
  }
  .oath-container:hover {
    animation:fadeInUp .5s ease-out;
    color:#888;
    font-size:1.1em;
    background:linear-gradient(rgb(50 43 33 / .01),rgb(50 43 33 / .02));
    box-shadow:0 4px 30px rgb(0 0 0 / .1);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    box-shadow:0 2px 5px rgb(0 0 0 / .2);
    border-top:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .02),rgb(119 91 58 / .83),rgb(119 91 58 / .02)) 100% 1;
    transition:all .3s ease;
    border-radius:15px;
    padding:25px;
    position:relative;
    margin-bottom:30px;
    margin-top:30px
  }
  @keyframes slideAndFadeIn {
    from {
      transform:translateX(-20%) scaleY(.8);
      opacity:0
    }
    to {
      transform:translateX(0) scaleY(1);
      opacity:1
    }
  }
  @keyframes approachAndImpact {
    0 {
      transform:scale(1.2)
    }
    80% {
      transform:scale(1)
    }
    100% {
      box-shadow:0 0 10px 10px #000,0 0 10px 10px #4cd643,0 0 10px 5px #62d15b
    }
    transform:scale(1)
  }
  }
  @keyframes brightness {
    0,
    50%,
    100% {
      filter:blur(0) brightness(120%) drop-shadow(0 0 2.5px rgb(255 255 255 / .1)) drop-shadow(0 0 5px rgb(255 255 255 / .075)) drop-shadow(0 0 7.5px rgb(255 255 255 / .045)) drop-shadow(0 0 10px rgb(255 255 255 / .025))
    }
    25%,
    75% {
      filter:blur(1px) brightness(50%) drop-shadow(0 0 2.5px rgb(255 255 255 / .1)) drop-shadow(0 0 5px rgb(255 255 255 / .075)) drop-shadow(0 0 7.5px rgb(255 255 255 / .045)) drop-shadow(0 0 10px rgb(255 255 255 / .025))
    }
  }
  @keyframes spin {
    0 {
      transform:rotateY(-180deg)
    }
    100% {
      transform:rotateY(180deg)
    }
  }
  .coin-container {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    margin-left:10px;
    animation:spinCoin 1s forwards
  }
  .coin {
    width:100%;
    height:100%;
    position:absolute;
    transform-style:preserve-3d;
    backface-visibility:hidden
  }
  .coin-front,
  .coin-back {
    background-size:cover;
    transform-origin:center center
  }
  .coin-front {
    background-image:url(https://asset.eldenaion.com/coin_front.svg)
  }
  .coin-back {
    background-image:url(https://asset.eldenaion.com/coin_back.svg);
    transform:rotateY(180deg)
  }
  @keyframes spinCoin {
    0 {
      transform:rotateY(0)
    }
    100% {
      transform:rotateY(360deg)
    }
  }
  @keyframes fadeInUp_Reg {
    from {
      opacity:0;
      transform:translateY(-50%) translateY(20px)
    }
    to {
      opacity:1;
      transform:translateY(-50%) translateY(0)
    }
  }


  .diamond {
    cursor:pointer;
    width:10px;
    height:10px;
    margin-bottom:30px;
    background-color:#000;
    border:1px solid rgb(255 255 255 / .5);
    transform:rotate(45deg) translate(-50%,-50%);
    transition:background-color .3s;
    position:relative;
    z-index:1
  }
  .diamond.active {
    filter:grayscale(80%);
    background-color:#fff;
    box-shadow:0 0 10px #ff0,0 0 1px #ff0,inset 0 0 10px rgb(255 255 0 / .5),inset 0 5px 4px rgb(0 0 0 / .2);
    border:2px solid rgb(255 255 0 / .3);
    border-image:linear-gradient(to left,rgb(119 91 58 / .91),rgb(119 91 58 / .83),rgb(119 91 58 / .91)) 1
  }
  section {
    height:100vh
  }
  .news-container {
    overflow:hidden
  }
  .news-container::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:30%;
    background:linear-gradient(to bottom,#fff0,rgb(0 0 0 / .6));
    pointer-events:none;
    z-index:1
  }
  .btn-jump:hover {
    filter:brightness(150%)
  }
  .confirm-gift:disabled {
    cursor:none;
    opacity:.1;
    background:#ccc;
    animation:none
  }
  .confirm-gift:hover:disabled {
    cursor:default;
    opacity:.1;
    background:#ccc
  }
  #section-faq {
    position:relative;
    z-index:1
  }
  #section-faq::before {
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:90%;
    height:100%;
    transform:translateX(-50%);
    background:linear-gradient(#fff0 0,#111 100%),url(https://asset.eldenaion.com/bg39.png?v2);
    background-repeat:no-repeat;
    background-position:center top 50%;
    background-size:cover;
    opacity:.4;
    z-index:-1;
    filter:sepia(10%)
  }
  .faq-item,
  .faq-hidden {
    transition:opacity .5s,max-height .5s
  }
  @keyframes fadeInBg {
    from {
      opacity:.4;
      transform:translateY(20px)
    }
    to {
      opacity:.4;
      transform:translateY(0)
    }
  }
  .faq-hidden {
    max-height:0;
    opacity:0;
    overflow:hidden;
    display:none;
    transition:opacity .5s ease,max-height .5s ease
  }
  .faq-show {
    opacity:1;
    max-height:var(--max-height,1000px);
    display:block!important
  }
  .faq-default {
    transition:opacity .5s ease,max-height .5s ease;
    max-height:auto;
    opacity:1;
    overflow:hidden;
    display:block
  }
  .faq-default-show {
    opacity:1;
    max-height:var(--max-height,1000px)
  }
  .faq-default-hide {
    opacity:0;
    transition:opacity .5s ease
  }
  #section-features {
    position:relative;
    z-index:1;
    padding:50px
  }
  #section-features::before {
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:90%;
    height:100%;
    transform:translateX(-50%);
    /*! opacity:0.10; */
    z-index:-1;
    /*! background: url(../img/bg/join_bg.jpg) top; */
  }
  #section-news {
    position:relative;
    z-index:1;
    padding:50px;
    background: url(../img/bg/footer_bg.jpg) top;
  }
  .line-break {
    position:absolute;
    max-width:45%;
    top:0;
    left:50%;
    transform:translateX(-50%)
  }
  .diamond-menu {
    display:none;
    cursor:pointer;
    width:8px;
    height:8px;
    margin-right:10px;
    opacity:.3;
    border:2px solid rgb(255 255 0 / .3);
    transform:rotate(45deg) translate(-50%,-50%);
    transition:background-color .3s;
    position:relative;
    background-color:#fff;
    top:4px;
    z-index:1;
    filter:grayscale(80%);
    box-shadow:0 0 10px #ff0,0 0 1px #ff0,inset 0 0 10px rgb(255 255 0 / .5),inset 0 5px 4px rgb(0 0 0 / .2);
    border-image:linear-gradient(to left,rgb(33 33 58 / .91),rgb(33 33 58 / .83),rgb(119 91 58 / .91)) 1;
    vertical-align:middle;
    animation:fadeIn .5s ease forwards
  }
  @keyframes slideDown {
    0% {
      transform:translateY(-100%)
    }
    to {
      transform:translateY(0)
    }
  }
  .slide-down {
    animation:slideDown .5s ease forwards
  }
  @keyframes slideUp {
    from {
      transform:translateY(0);
      opacity:1
    }
    to {
      transform:translateY(-100%);
      opacity:0
    }
  }
  input[type="number"] {
    height:8%;
    width:7%;
    padding:5px;
    margin-top:10px;
    margin-left:5px;
    color:grey;
    background:linear-gradient(rgb(51 42 34 / .37),rgb(14 11 6 / .37));
    border:1px solid;
    border-color:rgb(255 255 255 / .1);
    border-radius:5px;
    position:relative
  }
  input[type="number"]:hover {
    height:8%;
    width:7%;
    padding:5px;
    margin-top:10px;
    color:grey;
    background:linear-gradient(rgb(51 42 34 / .77),rgb(14 11 6 / .77));
    border:1px solid;
    border-color:rgb(255 255 255 / .2);
    border-radius:5px;
    position:relative
  }
  .cookie-popup.show {
    visibility:visible
  }
  .cookie-popup {
    visibility:hidden;
    position:fixed;
    bottom:0;
    width:100%;
    font-size:18px;
    color:rgb(255 255 255 / .7);
    background-color:#000;
    border-top:1px solid rgb(169 141 80 / .2);
    padding:30px;
    box-shadow:0 0 10px rgb(0 0 0 / .1);
    z-index:9999;
    display:flex;
    justify-content:space-between;
    align-items:center
  }
  .cookie-text {
    text-align:center;
    flex-grow:1
  }
  .accept-cookies-btn {
    background-color:#a99238;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:5px;
    cursor:pointer
  }
  .accept-cookies-btn:hover {
    background-color:#b49005
  }
  .arrow {
    margin-left:1px
  }
  .nav-item {
    display:flex;
    align-items:center
  }
  .nav-link-below {
    display:flex;
    align-items:center
  }
  .diamond-menu {
    margin-right:10px;
    margin-top:3px
  }
  .download-big-btn {
    width:345px;
    height:88px;
    color:#fff;
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin:0 20px 0 20px;
    font-size:21px;
    line-height:25px;
    font-weight:300;
    background:url(https://asset.eldenaion.com/1.png) top no-repeat;
    transition:transform 0.3s cubic-bezier(.4,0,.2,1);
    cursor:pointer
  }
  .download-big-btn:hover {
    transform:translateY(-5px)
  }
  .register-big-btn {
    cursor:pointer;
    width:345px;
    height:88px;
    color:#fff;
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin:0 20px 0 20px;
    font-size:21px;
    line-height:25px;
    font-weight:300;
    background:url(https://asset.eldenaion.com/2.png) top no-repeat;
    transition:transform 0.3s cubic-bezier(.4,0,.2,1)
  }
  .register-big-btn:hover {
    transform:translateY(-5px)
  }
  .prch-button {
    height:50px;
    padding:20 15px;
    font-size:18px;
    color:#fff;
    text-align:center;
    background:linear-gradient(rgb(40 36 26 / .3),rgb(40 36 26 / .01));
    border:1px solid #1f1c17;
    border-radius:3px;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    outline:none;
    box-shadow:0 1px 1px rgb(0 0 0 / .5),inset 0 1px 1px rgb(255 255 255 / .1);
    transition:all 0.2s ease-in-out;
    box-shadow:0 1px 1px rgb(0 0 0 / .9),inset 0 1px 1px rgb(255 255 255 / .1);
    filter:brightness(100%)
  }
  .prch-button:hover {
    filter:brightness(190%)
  }
  .small-button::before {
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    border:1px solid rgb(255 215 0 / .6);
    border-radius:5px;
    pointer-events:none
  }
  .prch-button::after {
    content:'';
    position:absolute;
    left:10%;
    right:10%;
    bottom:1px;
    height:5px;
    background:rgb(255 215 0 / .3);
    box-shadow:0 5px 45px rgb(255 215 0 / .9);
    transform:translateY(5px);
    border-radius:50%;
    pointer-events:none;
    transition:all 0.2s ease-in-out
  }
  .prch-button:hover::after {
    animation:pulse-glow 1.5s infinite alternate ease-in-out
  }
  .small-button {
    padding:20 15px;
    font-size:18px;
    color:#fff;
    text-align:center;
    background:linear-gradient(rgb(40 36 26 / .3),rgb(40 36 26 / .01));
    border:1px solid #1f1c17;
    border-radius:3px;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    outline:none;
    box-shadow:0 1px 1px rgb(0 0 0 / .5),inset 0 1px 1px rgb(255 255 255 / .2);
    transition:all 0.2s ease-in-out;
    box-shadow:0 1px 1px rgb(0 0 0 / .9),inset 0 1px 1px rgb(255 255 255 / .3);
    filter:brightness(100%)
  }
  .small-button:disabled {
    opacity:.2;
    cursor:default
  }
  .small-button:hover {
    filter:brightness(120%)
  }
  .small-button::before {
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    border:1px solid rgb(255 215 0 / .6);
    border-radius:5px;
    pointer-events:none
  }
  .small-button::after {
    content:'';
    position:absolute;
    left:10%;
    right:10%;
    bottom:1px;
    height:5px;
    background:rgb(255 215 0 / .3);
    box-shadow:0 5px 45px rgb(255 215 0 / .9);
    transform:translateY(5px);
    border-radius:50%;
    pointer-events:none;
    transition:all 0.2s ease-in-out
  }
  .small-button:hover::after {
    animation:pulse-glow 0.5s infinite alternate ease-in-out
  }
  .main-button {
    padding:10px 120px;
    font-size:19px;
    color:#fff;
    text-align:center;
    background:linear-gradient(rgb(40 36 26 / .3),rgb(40 36 26 / .01));
    border:1px solid #1f1c17;
    border-radius:3px;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    outline:none;
    box-shadow:0 1px 1px rgb(0 0 0 / .5),inset 0 1px 1px rgb(255 255 255 / .2);
    transition:all 0.2s ease-in-out;
    box-shadow:0 1px 1px rgb(0 0 0 / .9),inset 0 1px 1px rgb(255 255 255 / .3);
    filter:brightness(100%)
  }
  .main-button:hover {
    filter:brightness(220%)
  }
  .main-button::before {
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    border:1px solid rgb(255 215 0 / .6);
    border-radius:5px;
    pointer-events:none
  }
  .main-button::after {
    content:'';
    position:absolute;
    left:10%;
    right:10%;
    bottom:1px;
    height:5px;
    background:rgb(255 215 0 / .3);
    box-shadow:0 5px 45px rgb(255 215 0 / .9);
    transform:translateY(5px);
    border-radius:50%;
    pointer-events:none;
    transition:all 0.2s ease-in-out
  }
  .main-button:hover::after {
    animation:pulse-glow 0.5s infinite alternate ease-in-out
  }
  @keyframes pulse-glow {
    0% {
      background:rgb(255 215 0 / .3);
      box-shadow:0 5px 35px rgb(255 215 0 / .9)
    }
    100% {
      background:rgb(255 215 0 / .5);
      box-shadow:0 5px 35px gold
    }
  }
  .button-container {
    position:relative;
    width:100%;
    height:auto;
    right:0
  }
  .button-container .prch-button {
    position:absolute;
    bottom:3px;
    right:-10px
  }
  .prch-button {
    display:inline-block;
    width:22%;
    margin-right:10px
  }
  .buy-button {
    color:#fff;
    width:250px;
    height:45px;
    background:linear-gradient(rgb(51 42 34 / .37),rgb(14 11 6 / .37));
    border:1px solid;
    border-color:rgb(255 255 255 / .1);
    border-radius:5px;
    position:absolute;
    right:0;
    bottom:0
  }
  .buy-button:hover {
    background-color:rgb(69 160 73 / .6)
  }
  .buy-button:active {
    background-color:#3e8e41
  }
  .buy-button:disabled {
    background-color:gray;
    opacity:.3
  }
  .buy-button:disabled:hover {
    background-color:gray
  }
  .oath:disabled {
    background-color:gray;
    opacity:.3
  }
  .oath:disabled:hover {
    background-color:gray
  }
  .item-image {
    margin-right:10px
  }
  .modal-shop {
    position:fixed;
    z-index:1;
    padding-top:100px;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    z-index:100;
    display:none;
    background-color:rgb(0 0 0 / .99)
  }
  .modal-shop-content {
    position:relative;
    top:auto;
    background:rgb(51 42 34 / .03);
    border-radius:16px;
    border:1px solid;
    border-color:rgb(50 43 33 / .8);
    color:#fff;
    margin:auto;
    padding:40px;
    width:25%;
    z-index:100;
    animation:fadeInUp 1 ease-out
  }
  .modal-shop-close {
    color:#aaa;
    float:right;
    font-size:28px;
    font-weight:700
  }
  .modal-shop-close:hover,
  .modal-shop-close:focus {
    color:#000;
    text-decoration:none;
    cursor:pointer
  }
  .pagination {
    margin-top:30px;
    right:10px;
    position:relative;
    text-align:center
  }
  .pagination a,
  .pagination span {
    text-decoration:none;
    color:grey;
    font-size:1em;
    margin:0 5px;
    padding:8px 10px;
    height:35px;
    border-radius:5px;
    background:linear-gradient(rgb(51 42 34 / .17),rgb(14 11 6 / .17));
    border:1px solid;
    border-color:rgb(255 255 255 / .1);
    display:inline-flex;
    align-items:center
  }
  .pagination a:hover,
  .pagination span:hover {
    padding:8px 10px;
    background:linear-gradient(rgb(51 42 34 / .37),rgb(14 11 6 / .37));
    border:1px solid;
    border-color:rgb(255 255 255 / .2)
  }
  .pagination a.disabled,
  .pagination span.disabled {
    background-color:#333;
    color:#999;
    cursor:not-allowed
  }
  .pagination a.active {
    font-weight:700;
    background:linear-gradient(rgb(51 42 34 / .97),rgb(14 11 6 / .97));
    border:1px solid;
    border-color:rgb(255 255 255 / .3)
  }
  .lds-ellipsis {
    display:inline-block;
    position:relative;
    width:80px;
    height:80px;
    opacity:.7
  }
  .lds-ellipsis div {
    position:absolute;
    top:33px;
    width:13px;
    height:13px;
    border-radius:50%;
    background:#fff;
    animation-timing-function:cubic-bezier(0,1,1,0)
  }
  .lds-ellipsis div:nth-child(1) {
    left:8px;
    animation:lds-ellipsis1 .6s infinite
  }
  .lds-ellipsis div:nth-child(2) {
    left:8px;
    animation:lds-ellipsis2 .6s infinite
  }
  .lds-ellipsis div:nth-child(3) {
    left:32px;
    animation:lds-ellipsis2 .6s infinite
  }
  .lds-ellipsis div:nth-child(4) {
    left:56px;
    animation:lds-ellipsis3 .6s infinite
  }
  @keyframes lds-ellipsis1 {
    0 {
      transform:scale(0)
    }
    100% {
      transform:scale(1)
    }
  }
  @keyframes lds-ellipsis3 {
    0 {
      transform:scale(1)
    }
    100% {
      transform:scale(0)
    }
  }
  @keyframes lds-ellipsis2 {
    0 {
      transform:translate(0,0)
    }
    100% {
      transform:translate(24px,0)
    }
  }
  .glowbig {
    position:relative;
    overflow:hidden;
    background-color:#26702e;
    padding:15px;
    border-radius:5px;
    animation:glow 1.6s ease-out 2;
    border:0;
    animation:approachAndImpact 1s ease-in-out,fadeOutGlow 2s 2s forwards
  }
  .glow {
    position:relative;
    overflow:hidden;
    background-color:#26702e;
    padding:15px;
    border-radius:5px;
    animation:glow 1.6s ease-out 2;
    border:0;
    animation:approachAndImpact 1s ease-in-out,fadeOutGlow 2s 2s forwards
  }
  @keyframes glow-slide {
    0 {
      transform:translateX(-100%)
    }
    50% {
      transform:translateX(0)
    }
    100% {
      transform:translateX(100%)
    }
  }
  @keyframes glow {
    0,
    100% {
      box-shadow:0 0 0 0 rgb(0 255 0 / .2),inset 0 0 0 0 rgb(0 255 0 / .1),0 2px 0 #000
    }
    50% {
      box-shadow:0 0 15px rgb(0 255 0 / .6),inset 0 0 10px rgb(0 255 0 / .4),0 2px 0 #000
    }
  }
  .close-button {
    background-color:#fff0;
    color:#fff;
    border:0;
    cursor:pointer;
    float:right;
    width:25px;
    border-radius:5px;
    background-color:rgb(255 255 255 / .2)
  }
  .close-button:hover {
    background-color:rgb(255 255 255 / .4)
  }
  .vote-container {
    text-align:center
  }
  .vote-banner:hover {
    filter:brightness(120%);
    transform:scale(1.05)
  }
  .vote-banner img {
    width:100%;
    height:auto;
    vertical-align:middle;
    animation:fadeInUp .5s ease-out;
    border-radius:5px;
    box-shadow:0 4px 8px rgb(0 0 0 / .2)
  }
  .pin-container {
    display:flex;
    justify-content:space-between;
    max-width:300px;
    margin:auto
  }
  .pin-container input[type="text"] {
    width:40px;
    height:40px;
    text-align:center;
    font-size:20px;
    border:1px solid #ccc;
    box-shadow:inset 0 0 5px rgb(0 0 0 / .2)
  }
  .vote-layout {
    display:flex;
    flex-direction:column;
    align-items:center
  }
  .vote-item {
    display:flex;
    align-items:center;
    margin-bottom:10px
  }
  .vote-banner.disabled {
    opacity:.3;
    pointer-events:none
  }
  .timerFont {
    animation:fadeInUp 1.5s ease-out;
    margin-right:5px
  }
  .vote-timer,
  .vote-status {
    background:linear-gradient(rgb(50 43 33 / .02),#fff0);
    border-top:1px solid rgb(255 255 255 / .01);
    width:100%;
    padding:20px;
    transition:all .3s ease;
    border-top:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .43),rgb(119 91 58 / .01)) 100% 1;
    animation:fadeInUp .5s ease-out
  }
  .text-center {
    text-shadow:2px 12px 14px rgb(0 0 0 / .1)!important
  }
  .nav-link:hover .diamond-menu {
    opacity:.4!important;
    animation:brighten .3s ease forwards!important
  }
  .steps {
    position:relative;
    overflow:hidden
  }
  .steps::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    filter:sepia(0);
    transform:scaleX(-1);
    background-size:cover;
    background-position:bottom top;
    background-repeat:no-repeat;
    z-index:1;
    pointer-events:none
  }
  .steps::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform:scaleY(-1);
    background:linear-gradient(to top,#010101 0,rgb(0 0 0 / .7) 100%);
    z-index:2;
    pointer-events:none
  }
  .footer-bg {
    position:relative;
    overflow:hidden;
    min-height:400px;
    color:#fff
  }
  .footer-bg::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(https://asset.eldenaion.com/bg_waterfall.jpg);
    transform:scaleX(-1);
    background-size:cover;
    background-position:bottom center;
    background-repeat:no-repeat;
    z-index:1;
    pointer-events:none
  }
  .footer-bg::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(to bottom,#000000 0,rgb(0 0 0 / .96) 100%);
    z-index:2;
    pointer-events:none
  }
  .overlay {
    position:relative;
    
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center 20%
  }
  .overlay::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1
  }
  .overlay::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:2
  }
  .character {
    position:absolute;
    bottom:0%;
    left:50%;
    transform:translateX(-50%);
    transform-origin:center bottom;
    animation:moveUpDown 4s ease-in-out infinite alternate;
    opacity:.1;
    filter:sepia(20%)
  }
  .character_second {
    position:absolute;
    bottom:-50px;
    left:50%;
    transform:translateX(-50%);
    transform-origin:center bottom;
    opacity:.08;
    filter:sepia(50%)
  }
  @keyframes moveUpDown {
    0% {
      transform:translate(-50%,0)
    }
    100% {
      transform:translate(-50%,-20px)
    }
  }
  .scroll-arrow {
    margin-top:50px;
    width:2%;
    opacity:.3;
    animation:smoothUpDown 2s ease-in-out infinite;
    draggable:false
  }
  @keyframes smoothUpDown {
    0%,
    100% {
      transform:translateY(0)
    }
    50% {
      transform:translateY(10px)
    }
  }
  .compare-chart-container {
    padding:20px;
    width:100%;
    height:500px;
    display:flex;
    flex-direction:column;
    align-items:center;
    border-radius:12px;
    background-color:rgba(1,1,1,0.95);
    border:5px solid rgba(255,255,255,0.02);
  }
  .compare-chart-logos {
    display:flex;
    justify-content:center;
    margin-bottom:20px;
    background-color:transparent;
    overflow:visible;
  }
  .compare-chart-logo {
    height:60px;
    margin: 20px 30px;
    transition:opacity 0.3s,box-shadow 0.3s;
    background:none;
    cursor:pointer;
    overflow:visible;
    padding:10px;
    width:200px;
  }
  .compare-chart-logo:hover {
    border-bottom:2px solid rgba(255,255,255,0.1);
  }
  .compare-chart-logo h2 {
    background:none;
    opacity:0.7;
    color:white;
    margin:0;
  }
  .compare-chart-logo:hover,
  .compare-chart-logo.compare-chart-logo-active {
    opacity:1;
  }
  .compare-chart-logo img {
    display:block;
    width:190px;
    height:auto;
    background:none;
  }
  .logo-nav:hover {
    filter:brightness(150%);
  }
  .compare-chart-list {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .compare-chart-list-item {
    margin-bottom:10px;
    display:none;
    opacity:0;
    transition:opacity 0.3s ease;
  }
  .compare-chart-list-item[data-logo="1"],
  .compare-chart-list-item[data-logo="2"],
  .compare-chart-list-item[data-logo="3"] {
    display:block;
    opacity:1;
  }
  .compare-chart-list-item-title {
    color:white;
    opacity:0.3;
    padding:15px 0;
    float:left;
    font-weight:bold;
    position:relative;
    top:-45px;
  }
  #section-chart::before {
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:80%;
    height:100%;
    transform:translateX(-50%);
    background:linear-gradient(#fff0 0,#111 100%),url(https://asset.eldenaion.com/2.jpg);
    background-repeat:no-repeat;
    background-position:center bottom 50%;
    background-size:cover;
    opacity:0.1;
    z-index:-1;
  }
  .compare-chart-list-item-bar {
    position:relative;
    width:700px;
    height:10px;
    background-color:#000;
    opacity:.6;
    background:rgb(0 0 0 / 10%);
    box-shadow:0 5px 25px rgb(0 0 0 / 30%),0 1px 1px rgb(0 0 0 / 50%),inset 0 1px 1px rgb(255 255 255 / 20%);
    transition:all .2s ease-in-out;
    filter:brightness(100%);
    clip-path:polygon(0 50%,5px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 5px) 100%,5px 100%)
  }
  .compare-chart-list-item-bar-filled {
    position:relative;
    top:0;
    left:0;
    height:100%;
    background:rgba(255,215,0,.7);
    box-shadow:0 5px 25px rgba(255,255,255,.8),0 1px 1px rgba(255,255,255,.5),inset 0 1px 1px rgba(255,255,255,.6);
    width:0;
    transition:width .5s ease,opacity .5s ease;
    clip-path:polygon(0 50%,5px 0,calc(100% - 5px) 0,100% 50%,calc(100% - 5px) 100%,5px 100%)
  }
  .compare-chart-list-item-bar-filled::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    height:1px;
    width:100%;
    background-image:linear-gradient(to left,rgba(255,215,0,0),rgba(255,255,255,.8),rgba(255,215,0,0));
    background-size:200% 1px;
    animation:slide 3s linear infinite
  }
  @keyframes slide {
    from {
      background-position:100% 0
    }
    to {
      background-position:-100% 0
    }
  }
  .donate {
    padding: 15px;
    border: 1px solid #222;
    border-radius: 5px
  }
  .donate:hover {
    border: 1px solid #444
  }
  .donate button:hover {
    width:auto;
    height:45px;
    background:linear-gradient(rgba(51,42,34,0.77),rgba(14,11,6,0.77));
    border:1px solid;
    border-color:rgba(255,255,255,0.2)
  }
  .donate form {
    font-weight:600;
    color:#81725b;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:15px;
    padding:10px
  }
  .donate label {
    margin-bottom:5px;
    display:block
  }
  .donate input,
  .donate button {
    color:grey;
    padding:5px;
    background-color:rgba(50,43,33,0.05);
    border:2px solid rgba(50,43,33,0.4);
    border-radius:4px
  }
  .donate input:hover {
    padding:5px;
    background-color:rgba(50,43,33,0.1);
    border:2px solid rgba(50,43,33,0.7);
    border-radius:4px
  }
  .donate button {
    width:auto;
    height:45px;
    background:linear-gradient(rgba(51,42,34,0.37),rgba(14,11,6,0.37));
    border:1px solid;
    border-color:rgba(255,255,255,0.1)
  }
  .donate button:hover {
    width:auto;
    height:45px;
    background:linear-gradient(rgba(51,42,34,0.77),rgba(14,11,6,0.77));
    border:1px solid;
    border-color:rgba(255,255,255,0.2)
  }
  .gift {
    padding:10px 15px;
    background:url(https://asset.eldenaion.com/gift.png) left center no-repeat;
    background-size:18px;
    margin-bottom:0px;
    color:#333;
    font-weight:bold;
    display:inline-block;
    vertical-align:middle;
    animation:float 1.5s infinite alternate
  }
  @keyframes float {
    0% {
      transform:translateY(0)
    }
    100% {
      transform:translateY(-5px)
    }
  }
  .gift a {
    color:blue;
    text-decoration:underline
  }
  @keyframes shine {
    0% {
      filter:drop-shadow(0 0 0 #fb0)
    }
    50% {
      filter:drop-shadow(0 0 20px #fb0)
    }
    100% {
      filter:drop-shadow(0 0 0 #fb0)
    }
  }
  .shop-item-mythic {
    background: radial-gradient(rgba(50, 43, 33, 0.7), #111);
    border:1px solid rgb(255 255 255 / .06);
    padding:15px;
    margin-bottom:15px;
    transition:all .3s ease;
    border-top:1px solid #fff0;
    box-shadow:0 0 1px 1px rgb(153 97 0 / .5);
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .43),rgb(119 91 58 / .01)) 100% 1;
  }
  .shop-item-mythic:hover {
    background:linear-gradient(rgb(207 134 28 / .1),rgb(50 43 33 / .3));
    border:1px solid rgb(255 255 255 / .2);
    border-top:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .83),rgb(119 91 58 / .01)) 100% 1;
  }
  * {
    margin:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    padding:0
  }
  @-webkit-keyframes scale {
    0%,
    100% {
      -webkit-transform:scale(1);
      transform:scale(1)
    }
    50% {
      -webkit-transform:scale(1.1);
      transform:scale(1.1)
    }
  }
  @keyframes scale {
    0%,
    100% {
      -webkit-transform:scale(1);
      transform:scale(1)
    }
    50% {
      -webkit-transform:scale(1.1);
      transform:scale(1.1)
    }
  }
  @-webkit-keyframes circle {
    0% {
      -webkit-transform:rotate(0);
      transform:rotate(0)
    }
    100% {
      -webkit-transform:rotate(360deg);
      transform:rotate(360deg)
    }
  }
  @keyframes circle {
    0% {
      -webkit-transform:rotate(0);
      transform:rotate(0)
    }
    100% {
      -webkit-transform:rotate(360deg);
      transform:rotate(360deg)
    }
  }
  @-webkit-keyframes float {
    0%,
    100% {
      -webkit-transform:translateY(0);
      transform:translateY(0)
    }
    50% {
      -webkit-transform:translateY(-15px);
      transform:translateY(-15px)
    }
  }
  @keyframes float {
    0%,
    100% {
      -webkit-transform:translateY(0);
      transform:translateY(0)
    }
    50% {
      -webkit-transform:translateY(-15px);
      transform:translateY(-15px)
    }
  }
  @-webkit-keyframes float2 {
    0%,
    100% {
      -webkit-transform:translateY(0);
      transform:translateY(0)
    }
    50% {
      -webkit-transform:translateY(15px);
      transform:translateY(15px)
    }
  }
  @keyframes float2 {
    0%,
    100% {
      -webkit-transform:translateY(0);
      transform:translateY(0)
    }
    50% {
      -webkit-transform:translateY(15px);
      transform:translateY(15px)
    }
  }
  .h {
    height:975px;
    width:100%;
    padding-top:180px;
    text-align:center;
    position:relative
  }
  .h::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.5);
    z-index:1;
    background: url(../img/bg/video-bg.webp) top;
  }
  .h .h-logo,
  .h>* {
    position:relative
  }
  .h>* {
    z-index:1
  }
  .h .h-logo {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin-bottom:50px
  }
  .overlay-video,
  .overlay-video video,
  .overlay-video::after {
    position:absolute;
    width:100%
  }
  .h .h-link {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin-top:50px;
    margin-bottom:80px
  }
  .h .h-link a:first-child {
    z-index:100;
    background:url(https://asset.eldenaion.com/1.png) top no-repeat
  }
  .h .h-link a:nth-child(2) {
    z-index:100;
    background:url(https://eldenaion.com/assets/2.png) top no-repeat
  }
  .h .h-scroll {
    -webkit-animation:1s linear infinite float;
    animation:1s linear infinite float
  }
  .overlay-video {
    top:0;
    left:0;
    height:100%;
    overflow:hidden
  }
  .overlay-video video {
    width:90%;
    top:50%;
    left:50%;
    height:100%;
    object-fit:cover;
    transform:translate(-50%,-50%);
    opacity:.5
  }
  .overlay-video::after {
    /*! content:""; */
    width:100%;
    bottom:0;
    left:1%;
    height:50%;
    background:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 130%);
  }
  #section-news::before {
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:90%;
    height:100%;
    transform:translateX(-50%);
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.0));
    background-repeat:no-repeat;
    background-position:center bottom 50%;
    background-size:cover;
    opacity:0.1;
    z-index:-1
  }
  @keyframes lumen-glow {
    0% {
      filter: drop-shadow(0 0 2px yellow);
    }
    50% {
      filter: drop-shadow(0 0 5px yellow);
    }
    100% {
      filter: drop-shadow(0 0 3px yellow);
    }
  }
  .glowing-lumen {
    width: 15%;
    margin-left: 5px;
  }
  .character_pos {
    filter:none !important;
    top: 20px;
    opacity:0.15 !important
  }
  .news-item,
  .news-item:hover {
    border-radius:5px;
    overflow:hidden;
    transition:transform .3s;
    padding-bottom:15px
  }
  .news-content,
  .news-item {
    background-color:transparent
  }
  .news-item-link,
  .news-item-link:hover {
    text-decoration:none
  }
  .news-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px
  }
  .news-item:hover {
    background-color:rgba(255,255,255,.1);
    transform:translateY(-5px)
  }
  .news-item img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    width:100%;
    height:auto;
    max-height:275px;
    object-fit:fit;
    -webkit-user-drag:none;
    -khtml-user-drag:none;
    -moz-user-drag:none;
    -o-user-drag:none;
    user-drag:none
  }
  .news-content {
    padding:10px 15px;
    flex-grow:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between
  }
  .news-meta {
    display:flex;
    align-items:center;
    margin-bottom:10px
  }
  .badge {
    display:inline-block;
    padding:5px 8px;
    border-radius:3px;
    font-size:15px;
    margin-right:10px;
    color:#fff
  }
  .event,
  .news-item.maintenance:hover .news-divider,
  .news-item:hover .news-divider.maintenance {
    background-color:#7a00ed
  }
  .maintenance {
    background-color:#7a00ed
  }
  .news-divider.event {
    background-color:#28a745
  }
  .event {
    background-color:#28a745
  }
  .news-item.event:hover .news-divider,
  .news-item:hover .news-divider.event,
  .notice {
    background-color:#c17d14
  }
  .patch {
    background-color:#db0000
  }
  .giftcode {
    background-color:#0043d2
  }
  .news-date {
    font-size:18px;
    color:#e4e8eb;
    margin-top:5px
  }
  .news-title {
    font-size:21px;
    color:#fff;
    margin:0;
    line-height:1.2;
    flex-grow:1
  }
  .news-description {
    font-size:19px;
    color:#c0c4c7;
    margin:0
  }
  .news-divider {
    height:5px;
    transition:height .3s;
    background-color:none;
  }
  .news-item:hover .news-divider {
    height:5px
  }
  .news-item.patch:hover .news-divider,
  .news-item:hover .news-divider.patch {
    background-color:#dc3545
  }
  @media (max-width:1200px) {
    .news-grid {
      grid-template-columns:repeat(3,1fr)
    }
  }
  @media (max-width:768px) {
    .news-grid {
      grid-template-columns:repeat(2,1fr)
    }
  }
  @media (max-width:480px) {
    .news-grid {
      grid-template-columns:1fr
    }
  }
  .news-item-link {
    color:inherit
  }
  html {
    scroll-behavior:smooth
  }
  ::-webkit-scrollbar {
    width:12px
  }
  ::-webkit-scrollbar-track {
    background:#111
  }
  ::-webkit-scrollbar-thumb {
    background:#888;
    border-radius:6px
  }
  ::-webkit-scrollbar-thumb:hover {
    background:#111
  }
  * {
    scrollbar-width:thin;
    scrollbar-color:#888 #111
  }
  .smooth-scroll-container {
    scroll-behavior:smooth;
    overflow-y:scroll;
    height:100vh
  }
  .button-dn-container,
  .frame-container,
  .un_navDownload label {
    font-family: 'Cinzel', sans-serif;
    display:flex;
    display:flex;
    width:100%
  }
  .season_circle_wrapper {
    position:absolute;
    right:20%;
    top:50%;
    transform:translateY(-50%);
    width:25%;
    max-width:600px;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,0.02) 20%,rgba(0,0,0,0.05) 30%,rgba(0,0,0,0.1) 40%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.6) 60%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,0.02) 20%,rgba(0,0,0,0.05) 30%,rgba(0,0,0,0.1) 40%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.6) 60%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%)
  }
  .season_circle {
    width:100%;
    height:100%;
    animation:20s linear infinite rotate
  }
  @keyframes rotate {
    from {
      transform:rotate(0)
    }
    to {
      transform:rotate(360deg)
    }
  }
  @media (max-width:768px) {
    .season_circle_wrapper {
      width:40%;
      right:0;
      top:15%
    }
  }
  @keyframes swipeUp {
    from {
      opacity:0;
      transform:translateY(100%)
    }
    to {
      opacity:.6;
      transform:translateY(0)
    }
  }
  .season-text-container {
    margin-top:100px;
    position:relative;
    overflow:hidden;
    opacity:.6
  }
  .atreia-pass-link,
  .season-subtitle,
  .season-title {
    opacity:0;
    transform:translateY(100%);
    transition:opacity 1s ease-out,transform 1s ease-out
  }
  .season-subtitle,
  .season-title {
    font-weight:700;
    background:-webkit-linear-gradient(#eee,#ffa100);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-family:Cinzel,Tahoma,Geneva,Verdana,sans-serif;
    text-align:center;
    margin-top:0;
    text-shadow:0 0 5px rgba(255,255,255,.3),0 0 10px rgba(255,255,255,.2),0 0 15px rgba(255,255,255,.1),2px 2px 4px rgba(255,0,0,.2)
  }
  .season-title {
    font-size:68px
  }
  .season-subtitle {
    font-size:38px;
    transition-delay:0.3s
  }
  @keyframes smoke {
    0% {
      filter:blur(5px);
      transform:scale(1.05) translate(0,0)
    }
    100% {
      filter:blur(7px);
      transform:scale(1.1) translate(5px,-5px)
    }
  }
  .atreia-pass-link {
    transition-delay:0.6s
  }
  .visible .atreia-pass-link,
  .visible .season-subtitle,
  .visible .season-title {
    opacity:1;
    transform:translateY(0)
  }
  .text-center.atreia-pass-link {
    margin-right:0;
    margin-left:0;
    padding-top:170px;
    z-index:1;
    position:relative
  }
  .download-big-btn.button {
    text-decoration:none;
    color:#fff
  }
  .download-big-btn.button:active,
  .download-big-btn.button:focus,
  .download-big-btn.button:hover {
    color:#fff!important;
    text-decoration:none!important
  }
  .frame-container {
    justify-content:center;
    margin-top:50px
  }
  .frame-top {
    max-width:100%;
    height:auto
  }
  .button-dn-container {
    justify-content:center;
    align-items:center;
    padding:10px 0;
    top:-40px
  }
  .un_navDownload {
    width:20rem
  }
  .un_navDownload label {
    justify-content:center;
    align-items:center;
    height:5rem;
    background:linear-gradient(#6a2408,#b73c0b);
    color:#fff0d3;
    font-size:1.5rem;
    cursor:pointer;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:.3s;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center
  }
  .un_navDownload label:hover {
    filter:brightness(130%)
  }
  .un_navDownload label::after {
    content:"";
    position:absolute;
    border:1rem solid transparent;
    border-image:url(https://asset.eldenaion.com/frame_square.png);
    border-image-slice:40 40 fill;
    left:-.1rem;
    z-index:2;
    right:-.1rem;
    bottom:-.1rem;
    top:-.1rem;
    pointer-events:none;
    transition:.3s;
    filter:brightness(130%)
  }
  #downloadCheck {
    position:fixed;
    left:-20000rem;
    opacity:0
  }
  #downloadCheck:checked~.un_files {
    opacity:1;
    pointer-events:all
  }
  .un_navDownload a:hover {
    text-decoration:none
  }
  #downloadCheck a:hover {
    text-decoration:none
  }
  .un_navDownload label::before {
    z-index:0;
    content:"";
    top:-15rem;
    filter:blur(0) brightness(70%);
    left:-10rem;
    width:500px;
    height:520px;
    position:absolute;
    background:url(https://asset.eldenaion.com/particles.png) top;
    animation:4s steps(75) infinite animateParticle;
    pointer-events:none;
    transform:rotate(180deg)
  }
  @keyframes animateParticle {
    0% {
      background-position:0 0
    }
    100% {
      background-position:0 -39000px
    }
  }
  .un_navDownload .main-text {
    font-size:1.5rem;
    margin-bottom:.3rem
  }
  .un_navDownload .sub-text {
    font-size:1rem;
    opacity:.8
  }
  .atreia-pass-link {
    text-decoration: none;
    color: inherit;
  }
  .atreia-pass-link:hover {
    color: yellow;
  }
  .atreia-pass-link .un_navDownload:hover {
    color: yellow;
  }
  #section-season {
    position:relative;
    z-index:1
  }
  #section-season::before {
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:90%;
    height:100%;
    transform:translateX(-50%);
    background:linear-gradient(#fff0 0,#111 100%),url(https://asset.eldenaion.com/season_bg_no_char.png);
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    opacity:.0;
    z-index:-1;
    filter:sepia(50%)
  }
  .animated-content .season-text-container,
  .atreia-pass-link {
    opacity:0;
    transition:transform 1s ease-in-out,opacity 1s ease-in-out
  }
  .animated-content .season-text-container {
    transform:translateY(50px)
  }
  .animated-content.visible .atreia-pass-link,
  .animated-content.visible .season-text-container {
    transform:translateY(0);
    opacity:1
  }
  .atreia-pass-link {
    transform:translateY(-50px)
  }
  .header-start ul {
    padding:0;
    list-style:none;
    margin:0;
    display:flex;
    gap:2.5rem;
    align-items:center;
    justify-content:center
  }
  .header-start a {
    margin:0 auto;
    width:22rem;
    height:4.7rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    text-decoration:none;
    color:white;
    position:relative;
    transition:.3s;
    cursor:pointer
  }
  .header-start a:hover {
    filter:brightness(130%);
    text-decoration:none;
    color:white
  }
  .header-start a::before {
    content:"";
    position:absolute;
    bottom:-1.3rem;
    z-index:2;
    width:10rem;
    pointer-events:none;
    height:5rem
  }
  .header-start a div:nth-child(2) {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:-1;
    background:url(https://asset.eldenaion.com/1.png) center/100%;
    clip-path:polygon(12% 0%,88% 0%,100% 50%,88% 100%,12% 100%,0% 50%)
  }
  .header-start li:nth-of-type(2) a div:nth-child(2) {
    background:url(https://asset.eldenaion.com/2.png) center/100%
  }
  .header-start a div:nth-child(2) span::before {
    z-index:0;
    content:"";
    top:-15rem;
    filter:blur(0) brightness(60%);
    left:-5rem;
    width:500px;
    height:520px;
    position:absolute;
    animation:4s steps(75) infinite animateParticle;
    pointer-events:none;
    transform:rotate(180deg)
  }
  .header-start a div:first-child {
    position:absolute;
    z-index:1;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    top:0;
    left:0;
    overflow:hidden
  }
  .header-start a div:first-child::after,
  .header-start a div:first-child::before {
    content:"";
    position:absolute;
    height:.15rem;
    background-color:#b19869
  }
  .header-start a div:first-child::before {
    width:78.8%;
    top:0
  }
  .header-start a div:first-child::after {
    width:80%;
    bottom:0
  }
  .header-start a div:first-child span {
    position:absolute;
    width:5.6rem;
    height:5.6rem;
    display:flex;
    transform:rotate(45deg)
  }
  .header-start a div:first-child span:first-child {
    left:.9rem;
    clip-path:polygon(0 0,30% 0,60% 100%,0 100%)
  }
  .header-start a div:first-child span:nth-child(2) {
    right:.9rem;
    clip-path:polygon(30% 0,100% 0,100% 100%,60% 100%)
  }
  .header-start a div:first-child span::after {
    content:"";
    position:absolute;
    border:1.5rem solid transparent;
    border-image:url(https://asset.eldenaion.com/frame_square.png);
    border-image-slice:40 40 fill;
    inset:0;
    filter:brightness(130%);
    pointer-events:none;
    transition:.3s
  }
  .lumen-container {
    position:absolute;
    margin-top:30px;
    z-index:1;
    background:linear-gradient(to bottom,rgba(5,5,5,0) 0,rgba(5,5,5,.1) 10%,rgba(5,5,5,.2) 30%,rgba(5,5,5,.3) 50%,rgba(40 36 26,.4) 70%,rgba(40 36 26,.3) 80%,rgba(40 36 26,.2) 90%,rgba(40 36 26,.1) 95%,rgba(40 36 26,0) 100%);
    background:linear-gradient(rgb(40 36 26 / .7),rgb(40 36 26 / .01));
    box-shadow:0 1px 50px rgb(0 0 0 / .5),inset 0 1px 1px rgb(255 255 255 / .2);
    padding:38px 22px;
    font-size:19px;
    border-radius:15px;
    color:#fff;
    font-family:Cinzel,sans-serif;
    backdrop-filter:blur(10px);
    left:0;
    text-align:left;
    max-width:auto;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .lumen-container:hover {
    filter:brightness(110%)
  }
  .lumen-container::after {
    content:"";
    position:absolute;
    top:0;
    left:auto;
    right:20px;
    width:50%;
    height:100%;
    background-image:url("https://asset.eldenaion.com/bp/logo-circle.png");
    opacity:.2;
    z-index:1;
    animation:89s linear infinite rotateBackground
  }
  .level-card::before,
  .lumen-container::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:110%;
    background-image:url("https://asset.eldenaion.com/bp/vipItem_bg.png");
    background-size:100%
  }
  .lumen-container::before {
    opacity:.2;
    z-index:1
  }
  .lumen-container p {
    margin:2px 0;
    font-size:14px;
    opacity:.4
  }
  .pulse-line-small {
    position:absolute;
    left:10%;
    right:10%;
    bottom:1px;
    height:5px;
    background:rgb(255,215,0,.3);
    box-shadow:0 5px 45px rgb(255,215,0,.9);
    border-radius:50%;
    animation: pulse-glow 0.5s ease-in-out 6 alternate
  }
  @keyframes pulseLine-small {
    0%,
    100% {
      opacity:.3;
      transform:scaleX(1)
    }
    50% {
      opacity:.8;
      transform:scaleX(1.1)
    }
  }
  .pulse-line-small {
    transform:translateY(5px);
    pointer-events:none
  }
  @keyframes rotateBackground {
    0% {
      transform:rotate(0)
    }
    100% {
      transform:rotate(360deg)
    }
  }
  .h,
  .season-slide {
    position:relative
  }
  .animated-content-slider .season-text-container-slider,
  .animated-content-slider-second .season-text-container-slider-second,
  .atreia-pass-link-slider,
  .atreia-pass-slider-link {
    opacity:0;
    transition:transform 1s ease-in-out,opacity 1s ease-in-out
  }
  .animated-content-slider .season-text-container-slider,
  .animated-content-slider-second .season-text-container-slider-second {
    transform:translateY(50px)
  }
  .animated-content-slider-second.visible .atreia-pass-slider-link,
  .animated-content-slider-second.visible .season-text-container-slider-second,
  .animated-content-slider.visible .atreia-pass-link-slider,
  .animated-content-slider.visible .season-text-container-slider,
  .visible .atreia-pass-slider-link {
    opacity:1;
    transform:translateY(0)
  }
  .atreia-pass-slider-link {
    transform:translateY(-50px);
    transition-delay:0.6s
  }
  .season-slide {
    z-index:1
  }
  .season-slide::before {
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:90%;
    height:100%;
    transform:translateX(-50%);
    background:linear-gradient(#fff0 0,#111 100%) center top/cover no-repeat,url(https://asset.eldenaion.com/season_bg_no_char.png) center top/cover no-repeat;
    opacity:.0;
    z-index:-1;
    filter:sepia(50%)
  }
  .h {
    width:100%;
    margin:0 auto;
    overflow:hidden;
    padding-top:28%
  }
  .slider-container-top {
    position:absolute;
    top:0;
    left:0;
    width:200%;
    height:100%;
    display:flex;
    transition:transform .5s ease-in-out
  }
  .slider-section {
    width:50%;
    height:100%;
    position:relative
  }
  .overlay-content,
  .overlay-video {
    top:0;
    left:0;
    width:100%;
    height:100%
  }
  .overlay-video {
    position:absolute;
    z-index:1
  }
  .overlay-content {
    position:absolute;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-align:center;
    padding:20px;
    box-sizing:border-box;
    /*! background: url(../img/bg/video-bg.webp) top; */
  }
  .nav-arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    height:120px;
    width:90px;
    z-index:1;
    background-color:rgba(0,0,0,.4);
    color:rgba(255,255,255,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:900;
    text-decoration:none;
    font-size:65px;
    cursor:pointer;
    font-family:Cinzel,sans-serif;
    transition:background-color .3s,color .3s
  }
  .nav-arrow:hover {
    color:rgba(255,255,255,.9);
    background-color:rgba(0,0,0,.6)
  }
  .prev {
    border-top-right-radius:14px;
    border-bottom-right-radius:14px;
    left:calc(5% - 0px)
  }
  .next {
    border-top-left-radius:14px;
    border-bottom-left-radius:14px;
    right:calc(5% - 0px)
  }
  @media (max-width:768px) {
    .nav-arrow {
      width:40px;
      font-size:20px;
      height:60px
    }
    .prev {
      left:calc(5% - 0px)
    }
    .next {
      right:calc(5% - 0px)
    }
  }
  .progress-bar {
    position:absolute;
    bottom:0;
    left:5%;
    max-width:90%;
    height:4px;
    background:linear-gradient(135deg,#4b3b26 0,#5e472b 40%,#7a5c38 60%,#5e472b 100%);
    background-size:cover;
    background-blend-mode:overlay;
    box-shadow:inset 0 0 3px rgba(255,255,255,.2),inset 0 0 6px rgba(0,0,0,.3);
    border-radius:4px;
    z-index:1;
    transition:width .1s linear;
    opacity:0.5
  }

  .card-group {
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }
  .card-group.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .un_main .un_window .un_why-control .swiper-wrapper {
    display:flex;
    justify-content:center
  }
  .un_main .un_window .un_why-control .swiper-slide:last-child {
    width:3rem!important
  }
  .un_main .un_window .un_why-control .swiper-slide:last-child div:nth-child(2) {
    display:none
  }
  .un_main .un_window .un_why-control .swiper-slide {
    text-align:left;
    position:relative;
    display:flex;
    align-items:center;
    min-height:4rem;
    width:11.5rem!important
  }
  .un_main .un_window .un_why-control .swiper-slide.swiper-slide-thumb-active div:first-child {
    transform:scale(1) rotate(45deg)
  }
  .un_main .un_window .un_why-control .swiper-slide.swiper-slide-thumb-active div:first-child::after {
    border:1rem solid transparent;
    border-image:url(https://asset.eldenaion.com/frame_square.png);
    border-image-slice:40 40 fill
  }
  .un_main .un_window .un_why-control .swiper-slide.swiper-slide-thumb-active div:first-child span {
    opacity:1
  }
  .un_main .un_window .un_why-control .swiper-slide.swiper-slide-thumb-active p {
    opacity:0;
    bottom:.7rem
  }
  .un_main .un_window .un_why-control .swiper-slide div:nth-child(2) {
    width:100%;
    border-radius:1rem;
    transform:translateX(1rem);
    height:.1rem;
    transition:.3s;
    pointer-events:none;
    background-color:rgba(245,222,179,.3)
  }
  .un_main .un_window .un_why-control .swiper-slide p {
    position:absolute;
    left:-2.1rem;
    transition:.3s;
    bottom:2.4rem;
    color:rgba(255,255,255,.5);
    width:7rem;
    font-size:.9rem;
    text-align:center
  }
  .un_main .un_window .un_why-control .swiper-slide div:first-child {
    width:3rem;
    cursor:pointer;
    overflow:hidden;
    height:3rem;
    transform:scale(.4) rotate(45deg);
    display:flex;
    align-items:center;
    position:absolute;
    justify-content:center;
    background-color:#000;
    transition:.3s;
    z-index:1;
    box-shadow:0 0 1rem rgba(0,0,0,.15)
  }
  .un_main .un_window .un_why-control .swiper-slide div:first-child:hover {
    transform:scale(1) rotate(45deg)!important
  }
  .un_main .un_window .un_why-control .swiper-slide div:first-child:hover~p {
    bottom:4rem;
  }
  .un_main .un_window .un_why-control .swiper-slide div:first-child:hover span {
    opacity:1!important
  }
  .un_main .un_window .un_why-control .swiper-slide div:first-child:hover::after {
    border:1rem solid transparent!important;
    border-image:url(https://asset.eldenaion.com/frame_square.png)!important;
    border-image-slice:40 40 fill!important
  }
  .un_main .un_window .un_why-control .swiper-slide div:first-child span {
    position:relative;
    z-index:3;
    transform:rotate(-45deg);
    color:wheat;
    font-weight:700;
    font-family:Cinzel;
    transition:.3s;
    opacity:0
  }
  .un_main .un_window .un_why-control .swiper-slide div:first-child::before {
    z-index:1;
    content:"";
    top:0;
    width:500px;
    height:520px;
    position:absolute;
    background:url(https://asset.eldenaion.com/particles.png) top;
    animation:4s steps(75) infinite animateParticle;
    opacity:1;
    transform:translateX(1rem) translateY(-15rem) rotate(-45deg) scale(.6);
    pointer-events:none
  }
  .un_main .un_window .un_why-control .swiper-slide div:first-child::after {
    content:"";
    position:absolute;
    border:1.5rem solid transparent;
    border-image:url(https://asset.eldenaion.com/frame_square.png);
    border-image-slice:40 40 fill;
    left:-.1rem;
    z-index:2;
    right:-.1rem;
    bottom:-.1rem;
    top:-.1rem;
    filter:brightness(130%);
    pointer-events:none;
    transition:.3s
  }
  .category span {
    color:rgb(192 95 85 / .9);
    filter:brightness(250%);
    font-weight:200;
    text-decoration:none;
    opacity:.6
  }
  .category span:hover {
    color:rgb(192 95 85 / .9);
    filter:brightness(290%);
    text-decoration:underline
  }
  .shop-item-loyal {
    background:linear-gradient(rgb(255 43 33 / .1),rgb(50 43 33 / .2));
    border:1px solid;
    padding:15px;
    margin-bottom:15px;
    transition:.3s;
    border-top:1px solid #fff0;
    box-shadow:0 0 1px 1px rgb(153 97 0 / .5);
    border-image:linear-gradient(to right,rgb(255 91 58 / .01),rgb(255 91 58 / .43),rgb(255 91 58 / .01)) 100% 1
  }
  .shop-item-loyal:hover {
    background:linear-gradient(rgb(155 43 33 / .3),rgb(50 43 33 / .4));
    border:1px solid;
    border-top:1px solid #fff0;
    border-image:linear-gradient(to right,rgb(119 91 58 / .01),rgb(119 91 58 / .83),rgb(119 91 58 / .01)) 100% 1
  }
  @keyframes shine {
    0%,
    100% {
      filter:brightness(100%)
    }
    50% {
      filter:brightness(200%)
    }
  }
  .frame-container {
    position: relative;
  }
  .frame-top {
    position: relative;
  }
  .loyalty-bg {
    border-radius:5px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
  }
  .loyalty-bg:hover {
    background: rgba(255,255,255,0.2);
  }
  .diamond-menu-show {
    margin-right:10px;
    margin-top:3px
  }
  .diamond-menu-show {
    display:none;
    cursor:pointer;
    width:8px;
    height:8px;
    margin-right:10px;
    opacity:.3;
    border:2px solid rgb(255 255 0 / .3);
    transform:rotate(45deg) translate(-50%,-50%);
    transition:background-color .3s;
    position:relative;
    background-color:#fff;
    top:4px;
    z-index:1;
    filter:grayscale(80%);
    box-shadow:0 0 10px #ff0,0 0 1px #ff0,inset 0 0 10px rgb(255 255 0 / .5),inset 0 5px 4px rgb(0 0 0 / .2);
    border-image:linear-gradient(to left,rgb(33 33 58 / .91),rgb(33 33 58 / .83),rgb(119 91 58 / .91)) 1;
    vertical-align:middle;
    animation:fadeIn .5s ease forwards
  }
  .diamond-menu-show {
    opacity:.4!important;
    animation:brighten .3s ease forwards!important
  }
  .parent-container {
    will-change: backdrop-filter, opacity;
    transition: backdrop-filter 0.8s ease, -webkit-backdrop-filter 0.8s ease;
    height:95px;
    position:fixed;
    width:90%;
    left:50%;
    transform:translateX(-50%);
    margin:0 auto;
    z-index:2;
    backdrop-filter: blur(5px) brightness(90%);
  }
  .parent-container::after {
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background:linear-gradient(to right,rgba(169,141,80,0) 0,rgba(169,141,80,.2) 40%,rgba(169,141,80,0) 100%);
    pointer-events:none
  }
  .nav-link:hover {
    border-bottom: 1px solid rgba(169,141,80,0.2);
  }
  .nav-link {
    border-bottom: 1px solid rgba(169,141,80,0.0);
  }
  .blur-scroll {
    display: none;
  }
  #section-features {
    transition: height 0.5s ease;
    overflow: hidden;
    background: url(../img/bg/bg-repeat.jpg) top;
  }
  #more-features.show {
    display: block;
    opacity: 1;
  }
  #more-features {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.7s ease, opacity 0.7s ease;
  }
  #more-features.expanded {
    max-height: 1850px;
    opacity: 1;
  }
  .remember-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    color: #d8c9b5;
    font-family: inherit;
    line-height: 1;
  }
  .remember-checkbox input[type="checkbox"]:hover {
    border-color: #3ba9fc;
    background-color: rgba(59, 169, 252, 0.1);
  }
  .remember-checkbox input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #d8c9b5;
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    display: inline-block;
  }
  .remember-checkbox input[type="checkbox"]:checked::before {
    content: '✓';
    color: #3ba9fc;
    position: absolute;
    left: 4px;
    top: -2px;
    font-size: 18px;
  }
  .popup-modal-content-register {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
  }
  #characterSelector {
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  #characterSelector option {
    background-color: rgba(30, 30, 30, 0.9);
    color: #ccc;
  }
  #characterSelector,
  #searchInput {
    box-shadow:0 1px 5px rgb(0 0 0 / .9),inset 0 1px 1px rgb(255 255 255 / .3);
    height:35px;
    transition:.2s ease-in-out;
    filter:brightness(100%);
    font-size:18px;
    color:#999;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    outline:0;
    background:linear-gradient(rgb(40 36 26 / .1),rgb(40 36 26 / .01));
    scrollbar-color:white rgba(0,0,0,0.5)
  }
  .controls-container {
    display:flex;
    justify-content:center;
    margin-top:0;
    width:80%
  }
  .controls-group,
  .search-wrapper {
    display:flex;
    width:100%;
    max-width:900px
  }
  .controls-group {
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px
  }
  .search-wrapper {
    justify-content:flex-start
  }
  #characterSelector::before,
  #searchInput::before {
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    border:1px solid;
    border-radius:5px;
    pointer-events:none
  }
  #characterSelector {
    border:2px solid #1f1c17;
    text-align:center;
    width:250px;
    border-radius:13px
  }
  #characterSelector:focus::after,
  #searchInput:focus::after,
  .claim-btn::after,
  .select-btn:hover::after {
    animation:.5s ease-in-out infinite alternate pulse-glow
  }
  #characterSelector:focus,
  #characterSelector:hover,
  #searchInput:focus,
  #searchInput:hover {
    background:linear-gradient(rgb(40 36 26 / .2),rgb(40 36 26 / .1));
    outline:0
  }
  #characterSelector::after,
  #searchInput::after {
    content:'';
    position:absolute;
    left:10%;
    right:10%;
    bottom:1px;
    height:5px;
    background:rgb(255 215 0 / .3);
    transform:translateY(5px);
    pointer-events:none;
    box-shadow:0 5px 45px rgb(255 215 0 / .9);
    border-radius:50%;
    transition:.2s ease-in-out
  }
  #characterSelector:focus,
  #searchInput:focus {
    box-shadow:0 1px 10px rgb(0 0 0 / .5),inset 0 1px 1px rgb(255 255 255 / .2);
    background:linear-gradient(rgb(40 36 26 / .3),rgb(40 36 26 / .01))
  }
  #characterSelector option,
  #searchInput option {
    background-color:rgba(0,0,0,.9);
    color:#fff;
    text-align:left;
    padding-left:10px
  }
  #characterSelector::-webkit-listbox {
    background-color:rgba(0,0,0,.5)
  }
  #characterSelector option:checked,
  #characterSelector option:focus,
  #characterSelector option:hover,
  #searchInput option:checked,
  #searchInput option:focus,
  #searchInput option:hover {
    background-color:#2c3e50!important;
    color:#fff!important
  }
  #characterSelector>option:active,
  #characterSelector>option:focus,
  #characterSelector>option:hover,
  #searchInput>option:active,
  #searchInput>option:focus,
  #searchInput>option:hover {
    background-color:#2c3e50!important;
    box-shadow:0 0 10px 100px #2c3e50 inset!important
  }
  #searchInput {
    text-align:left!important;
    border:2px solid #1f1c17;
    width:290px!important;
    border-radius:13px
  }
  @keyframes pulse-glow-yellow {
    0% {
      transform:translateY(5px);
      box-shadow:0 5px 30px rgb(255 215 0 / .6)
    }
    100% {
      transform:translateY(10px);
      box-shadow:0 5px 45px rgb(255 215 0 / .9)
    }
  }
  #searchInput::-webkit-listbox {
    background-color:rgba(0,0,0,.5)
  }
  .input-group input {
    width:100%
  }
  .disabled {
    opacity:.1!important
  }
  .input-group {
    position:relative;
    margin-bottom:15px
  }
  .balloon,
  .balloon::before {
    position:absolute;
    top:50%;
    transform:translateY(-50%)
  }
  .balloon {
    left:105%;
    background-color:green;
    color:#fff;
    padding:15px;
    border-radius:10px;
    font-size:.95em;
    width:260px;
    top:40px;
    display:none;
    z-index:999;
    white-space:normal;
    box-shadow:0 0 10px rgba(0,0,0,.5)
  }
  .balloon::before {
    content:'';
    left:-10px;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:10px solid #333
  }
  .balloon.error {
    background-color:#c81a2a
  }
  .balloon.error::before {
    border-right-color:#c81a2a
  }
  @-moz-document url-prefix() {
    .prch-button:hover::after {
      animation: none !important;
      opacity: 1 !important;
    }
  }
  .tollDisplay {
    color: rgba(204, 184, 109, 0.9);
    display: flex;
    align-items: center;
    font-size: 1.6em;
  }
  .tollDisplay.smallToll {
    font-size: 1.1em;
  }
  @keyframes flipDownUp {
    0% {
      transform: rotateX(0deg);
      opacity: 1;
    }
    50% {
      transform: rotateX(90deg);
      opacity: 0;
    }
    100% {
      transform: rotateX(0deg);
      opacity: 1;
    }
  }
  .flip-animate {
    animation: flipDownUp 0.4s ease;
    display: inline-block;
    transform-origin: top;
  }
  .loader {
    width:90px;
    aspect-ratio:1;
    position:relative
  }
  .loader::before {
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    padding:8px;
    filter:brightness(110%);
    background:linear-gradient(to bottom,#9c7b4d,#5a3b20);
    box-shadow:0 0 4px rgba(156,123,77,.3);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),black calc(100% - 8px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 9px),black calc(100% - 8px));
    animation:.8s linear infinite alternate l20-1,1.6s linear infinite l20-2
  }
  @keyframes l20-1 {
    0% {
      clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)
    }
    12.5% {
      clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)
    }
    25% {
      clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)
    }
    50% {
      clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)
    }
    62.5% {
      clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)
    }
    75% {
      clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)
    }
    100% {
      clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)
    }
  }
  @keyframes l20-2 {
    0% {
      transform:scaleY(1) rotate(0)
    }
    49.99% {
      transform:scaleY(1) rotate(135deg)
    }
    50% {
      transform:scaleY(-1) rotate(0)
    }
    100% {
      transform:scaleY(-1) rotate(-135deg)
    }
  }
  #loading-screen {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    z-index:10001;
    display:flex;
    justify-content:center;
    align-items:center
  }
  .avatar-container {
    position:relative;
    width:72px;
    height:72px;
    display:inline-block;
    cursor:pointer
  }
  .avatar {
    width:72px;
    height:72px;
    border-radius:50%;
    object-fit:cover;
    transition:transform .2s,box-shadow .2s
  }
  .avatar:hover {
    transform:scale(1.05);
    box-shadow:0 0 8px rgba(255,255,255,.3)
  }
  .avatar-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.4);
    color:#fff;
    font-size:14px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    opacity:0;
    transition:opacity .2s;
    pointer-events:none
  }
  .avatar-container:hover .avatar-overlay {
    opacity:1
  }
  .avatar-img {
    width:64px;
    height:64px;
    border-radius:50%;
    border:3px solid transparent;
    object-fit:cover;
    transition:border .5s;
    cursor:pointer
  }
  .avatar-img.selected,
  .avatar-img:hover {
    border:3px solid orange
  }
  .dropdown-menu,
  .shimmer-overlay {
    position:absolute;
    left:0;
    pointer-events:none
  }
  .dropdown-menu,
  .swiper-slide .description {
    color:#fff;
    border-radius:8px;
    opacity:0;
    backdrop-filter:blur(10px)
  }
  .shimmer-overlay {
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,#111 0,#222 50%,#111 100%);
    background-size:200% 100%;
    animation:1.2s linear infinite shimmer;
    z-index:1
  }
  img.shimmer-load {
    opacity:0;
    transition:opacity .2s;
    display:block;
    position:relative;
    z-index:2
  }
  .swiper-slide .description,
  .swiper-slide .summary {
    position:absolute;
    transition:opacity .3s
  }
  .swiper-slide .description,
  .swiper-slide div:first-child:hover~.summary {
    opacity:0;
    pointer-events:none
  }
  .swiper-slide .description {
    pointer-events:none!important;
    position:absolute!important;
    bottom:3.5rem;
    left:20%!important;
    transform:translateX(-50%);
    width:350px!important;
    text-align:left!important;
    font-size:19px!important;
    background:rgba(0,0,0,.09);
    padding:.5rem 1rem!important;
    transition:opacity .3s;
    z-index:10;
    white-space:pre-line!important;
    box-shadow:20px 20px 60px #111,-20px -20px 60px #000
  }
  .swiper-slide div:first-child:hover~.description {
    opacity:1;
    pointer-events:auto
  }
  .dropdown-menu {
    top:100%;
    background:rgba(0,0,0,.9);
    width:250px;
    padding:10px;
    box-shadow:20px 20px 60px #000,-20px -20px 60px #000;
    transform:translateY(-10px);
    transition:opacity .3s,transform .3s
  }
  .dropdown-menu.show {
    opacity:1;
    transform:translateY(0);
    pointer-events:all
  }
  #section-faq::before {
    background: none !important;
    content: none !important;
  }
  
.server__status-name {
    color: #b9d750;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
}


 /* скачать */ 
 .main-file {
    flex: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 120px;
}
.download-heading {
    color: #fff;
    font-size: 2.5rem;
    margin: 60px 0 50px;
    position: relative;
    padding-bottom: 15px;
    text-align: center;
}

.download-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,77,77,0) 0%, #5A6DB3 50%, rgba(255,77,77,0) 100%);
}

.download-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.download-info {
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.download-game-description {
    margin-bottom: 30px;
}

.download-game-description h2 {
    color: #fff;
    font-size: 2em;
    margin-bottom: 15px;
}

.download-game-description p {
    color: #b3b3b3;
    line-height: 1.6;
    margin-bottom: 20px;
}

.download-game-features {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.download-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #687281;
}

.download-feature i {
    color: rgba(204,184,109,0.9);
}

.download-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.download-option {
    /*! background: rgba(255, 255, 255, 0.07); */
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(142,124,97, 0.3);
    background: radial-gradient(circle at bottom left, rgba(0,0,0,0.15) 0%, rgba(106,86,54,0.1) 50%, rgba(255,255,255,0) 100%);
}

.download-option:hover {
    transform: translateY(-7px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background: radial-gradient(circle at bottom left, rgba(0,0,0,0.15) 0%, rgba(106,86,54,0.1) 50%, rgba(255,255,255,0) 100%);
}

.download-option i {
    font-size: 2.2em;
    color: rgba(204,184,109,0.9);
    flex-shrink: 0;
}

.download-info-block {
    flex: 1;
    text-align: left;
}

.download-info-block h3 {
    font-size: 1.2em;
    margin-bottom: 5px;
    color: rgba(255,255,255,.5);
}

.download-file-size,
.download-speed-info {
    display: block;
    color: #b3b3b3;
    font-size: 0.9em;
    margin-top: 2px;
}

.download-speed-info {
    color: rgba(255,255,255,.5);
}

.download-button {
    background: #5A6DB3;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    font-weight: bold;
    transition: background 0.3s ease, transform 0.3s ease;
}

.download-button:hover {
    background: #596eb3;
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .download-options {
        grid-template-columns: 1fr;
    }

    .download-option {
        flex-direction: column;
        align-items: flex-start;
    }

    .download-option i {
        font-size: 1.8em;
    }

    .download-info-block h3 {
        font-size: 1.1em;
    }

    .download-file-size,
    .download-speed-info {
        font-size: 0.85em;
    }

    .download-button {
        font-size: 0.85em;
    }
}

.download-system-requirements {
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
}

.download-system-requirements h2 {
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.download-system-requirements h2 i {
    color: #5A6DB3;
}

.download-requirements-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.download-requirements-column {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid rgb(90 109 179);
}

.download-requirements-column h3 {
    color: #687281;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(77, 127, 255, 0.3);
}

.download-requirements-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    border-color: 1px rgb(90 109 179);
}

.download-requirement {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgb(90 109 179);
}

.download-requirement i {
    font-size: 1.5em;
    color: #5A6DB3;
}

.download-req-info {
    display: flex;
    flex-direction: column;
}

.download-req-label {
    color: #b3b3b3;
    font-size: 0.9em;
    text-align: left;
}

.download-req-value {
    color: #687281;
    font-weight: bold;
    text-align: left;
}

.download-installation-guide {
    border-radius: 15px;
    padding: 30px;
    backdrop-filter: blur(10px);
}

.download-installation-guide h2 {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgb(129,114,91);
}

.download-installation-guide h2 i {
    color: rgba(204,184,109,0.9);
}

.download-install-steps {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.download-install-steps li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(142,124,97, 0.3);
    background: radial-gradient(circle at bottom left, rgba(0,0,0,0.15) 0%, rgba(106,86,54,0.1) 50%, rgba(255,255,255,0) 100%);
}

.download-install-steps li i {
    font-size: 2em;
    color: rgba(204,184,109,0.9);
}

.download-install-steps li span {
    color: #687281;
}

@media (max-width: 768px) {
    .download-options {
        grid-template-columns: 1fr;
    }

    .download-requirements-container {
        grid-template-columns: 1fr;
    }

    .download-install-steps {
        grid-template-columns: 1fr;
    }
}

.footer__right {
  display: flex;
  font-family: "Inter";
  align-items: center;
  line-height: 18px;
  gap: 13px;
  transition: 250ms ease all;
  font-weight: 500;
}
.footer-right-text__title {
  color: #515151;
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
}
.footer-right-text__subtitle {
  color: #ceb17c;
  line-height: 18px;
  font-size: 14px;
}
.footer-right__logo img {
  max-width: 50px;
}
.footer-right__text {
  text-align: left;
}


.block_title_wiki {
  color: #303B4A;
  font-weight: 500;
  font-size: 50px;
  line-height: 89%;
  letter-spacing: 0.01em;
  margin-bottom: 15px;
  text-transform: uppercase;
}




.bri__title {
  display: flex;
  align-items: center;
  font-size: 2rem;
  line-height: 145%;
  margin-bottom: 1.5rem;
  grid-gap: 1.0625rem;
  gap: 1.0625rem;
  color: #687281;
}
.bri-small__text {
  color: #687281;
  line-height: 140%;
  margin-bottom: 1.5rem;
  text-align: left;
}
.bri-small__text span {
  font-weight: 700;
  font-size: 1rem;
}
.bri-big__text {
  font-weight: 700;
  line-height: 140%;
  color: #687281;
  margin-bottom: 1.5rem;
}
.bri__list {
  margin-bottom: 2.5rem;
}
.bri-list__item {
  display: flex;
  align-items: center;
  grid-gap: .625rem;
  gap: .625rem;
  color: #687281;
  margin-bottom: .375rem;
}
.bri-list__item span {
  font-weight: 700;
}
details {
  margin-bottom: 1.375rem;
}
details {
  display: block;
}
summary {
  font-weight: 500;
  text-align: left;
  color: #687281;
  line-height: 2rem;
  border: none;
  padding: .625rem .9375rem;
  background: rgba(83, 79, 74, 0.3);
  font-size: .875rem;
  border-radius: 8px;
}

summary {
  display: list-item;
}

::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: auto !important;
}
.table {
  border: none;
  margin-bottom: 1.25rem;
  color: #687281;
  width: 100%;
}

table {
  border: 0;
  border-collapse: collapse;
}
.coins thead th {
  text-align: center;
}
.table tbody td, .table thead th {
  text-align: left;
  border: none;
  padding: .625rem .9375rem;
  font-size: .875rem;
  box-sizing: border-box;
}
.table thead th {
  font-weight: 700;
  background: rgba(176, 152, 135, .03);
  height: 3.25rem;
  text-transform: uppercase;
  color: #dfc683;
  color: rgba(var(--color-accent), 1);
}
.bri__info {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  line-height: 150%;
  font-weight: 700;
  color: #687281;
  grid-gap: 1.25rem;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.bri__line {
  margin: 3rem 0;
  height: 1px;
  background: hsl(0deg 1.72% 39.48% / 15%);
  width: 100%;
}

.wiki-btn:hover {
  background: rgb(90 109 179);
  border: 2px solid rgb(90 109 179);
}
.wiki-btn {
  padding: 12px 45px;
  background: rgb(90 109 179);
  border: 2px solid rgb(90 109 179);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.02em;
  text-align: center;
  color: #FFFFFF !important;
  width: fit-content;
  transition: .3s;
  text-transform: uppercase;
  border-radius: 8px;
  position: relative;
  display: inline-block;
}