@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root
{
    --dot: #0c172e;
    --border: #3d66ff;
    --layout: #162644;
    --background: #04070d;
}

body
{
    background: var(--background);
    background-image: radial-gradient(var(--dot) 1px, transparent 0);
    background-size: 40px 40px;
    margin: 0;
    font-family: "Bai Jamjuree", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: 1px 1px 0px #000000a8;
    overflow-x: hidden;
    -webkit-animation: bg-scrolling-reverse .92s infinite; /* Safari 4+ */
    -moz-animation:    bg-scrolling-reverse .92s infinite; /* Fx 5+ */
    -o-animation:      bg-scrolling-reverse .92s infinite; /* Opera 12+ */
    animation:         bg-scrolling-reverse .92s infinite; /* IE 10+ */
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function:    linear;
    -o-animation-timing-function:      linear;
    animation-timing-function:         linear;
}

/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
    100% { background-position: 40px 40px; }
  }
  @-moz-keyframes    bg-scrolling-reverse {
    100% { background-position: 40px 40px; }
  }
  @-o-keyframes      bg-scrolling-reverse {
    100% { background-position: 40px 40px; }
  }
  @keyframes         bg-scrolling-reverse {
    100% { background-position: 40px 40px; }
  }

  @-webkit-keyframes bg-scrolling {
    0% { background-position: 40px 40px; }
  }
  @-moz-keyframes    bg-scrolling {
    0% { background-position: 40px 40px; }
  }
  @-o-keyframes      bg-scrolling {
    0% { background-position: 40px 40px; }
  }
  @keyframes         bg-scrolling {
    0% { background-position: 40px 40px; }
  }

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: #313131;
}

body::-webkit-scrollbar-thumb {
    background: #ffffff;
    border: 2px solid #313131;
    border-radius: 5px;
}

a
{
    text-decoration: none;
}

.header
{
    background: var(--layout);
    border-bottom: 2px solid var(--border);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    width: calc(100vw - 40px);
    padding: 0px 20px;
}

.header img
{
    height: 80%;
}

.content
{
    position: absolute;
    width: calc(100vw - 57px);
    height: calc(100vh - 62px);
    margin-top: 62px;
    margin-left: 57px;
    transition: 0.3s;
}

#gamefield
{
    display: flex;
    align-items: center;
}


.sidebar
{
    background: var(--layout);
    border-right: 2px solid var(--border);
    position: fixed;
    top: 60px;
    left: 0;
    height: calc(100vh - 60px);
    width: 55px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transition: 0.3s;
    flex-direction: column;
    gap: 25px;
    z-index: +1;
    border-top: 2px solid var(--layout);
}

.sidebar:hover
{
    width: 220px;
    transition: 0.3s;
}

.sidebar:hover span
{
    opacity: 100%;
    display: initial;
    transition: 0.3s;
}

.sidebar:hover + .content {
    width: calc(100vw - 220px);
}

.siderbar_link
{
    text-align: center;
    display: flex;
    color: white;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    justify-content: flex-start;
    margin-left: 6px;
}

.sidebar span
{
    font-size: smaller;
    margin-left: 5px;
    white-space: nowr;
}

.siderbar_link i
{
    width: 30px;
    height: 30px;
    color: white;
    font-size: x-large;
    transition: 0.2s;
    cursor: pointer;
    padding: 7px;
    border-radius: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.siderbar_link span
{
    opacity: 0%;
    transition: 0.3s;
    white-space: nowrap;
}

.siderbar_link:hover
{
    opacity: 50%;
    transition: 0.2s;
}

.selected_siderbar i
{
    color: var(--border);
    border: 2px solid;
    padding: 5px;
    font-size: larger;
}

.selected_siderbar:hover
{
    opacity: 100%;
    cursor: default;
}

.skin-container
{
    width: 50%;
    height: 100%;
    position: relative;
    transition: 0.5s;
}

.content .skin-container:first-child
{
    border-right: 2px solid var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
}

.content .skin-container:last-child
{
    border-left: 2px solid var(--dot);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skin-card
{
    background: #9696962e;
    height: 85%;
    width: 85%;
    border-radius: 7px;
    border: 2px solid #96969694;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
}

.skin-card:hover
{
    transition: 0.3s;
    -webkit-box-shadow: 0px 0px 23px 0px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 23px 0px rgba(0,0,0,0.55);
    cursor: pointer;
    scale: 1.05;
}

.data-skin-img
{
    width: 100%;
    height: 83%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.data-skin-img img
{
    max-width: 95%;
    max-height: 80%;
}

.data-skin-container
{
    height: 17%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #12121252;
    position: relative;
}

.market_hash_name
{
    font-size: x-large;
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.float_value
{
    font-size: larger;
    color: white;
    padding: 10px;
}

.item_collection
{
    position: absolute;
    font-size: larger;
    color: white;
    padding: 10px;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.item_collection img
{
    max-width: 80px;
    max-height: 65px;
    margin-bottom: 3px;
    margin-right: 10px;
}

.itemCard_Contraband      { border-bottom: 3px solid #E4AE39; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #E4AE393a 100%);}
.itemCard_Master          { border-bottom: 3px solid #EB4B4B; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #EB4B4B3a 100%);}
.itemCard_Covert          { border-bottom: 3px solid #EB4B4B; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #EB4B4B3a 100%);}
.itemCard_Extraordinary   { border-bottom: 3px solid #EB4B4B; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #EB4B4B3a 100%);}
.itemCard_Classified      { border-bottom: 3px solid #D32CE6; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #D32CE63a 100%);}
.itemCard_Superior        { border-bottom: 3px solid #D32CE6; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #D32CE63a 100%);}
.itemCard_Exotic          { border-bottom: 3px solid #D32CE6; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #D32CE63a 100%);}
.itemCard_Restricted      { border-bottom: 3px solid #49347C; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #49347C3a 100%);}
.itemCard_Exceptional     { border-bottom: 3px solid #49347C; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #49347C3a 100%);}
.itemCard_Remarkable      { border-bottom: 3px solid #49347C; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #49347C3a 100%);}
.itemCard_Mil-SpecGrade   { border-bottom: 3px solid #3F61FF; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #3F61FF3a 100%);}
.itemCard_Distinguished   { border-bottom: 3px solid #3F61FF; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #3F61FF3a 100%);}
.itemCard_HighGrade       { border-bottom: 3px solid #3F61FF; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #3F61FF3a 100%);}
.itemCard_IndustrialGrade { border-bottom: 3px solid #5E98D9; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #5E98D93a 100%);}
.itemCard_ConsumerGrade   { border-bottom: 3px solid #847B6E; background: linear-gradient(rgba(27, 29, 36, 0) 20%, #847b6e3a 100%);}

.counter-reveal
{
    position: absolute;
    color: white;
    font-size: larger;
    transform: scale(3.5);
    width: 31%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    transition: 0.2s;
}

.score
{
    position: absolute;
    color: rgb(173, 173, 173);
    font-weight: bold;
    display: flex;
    gap: 3vw;
    left: 50%;
    transform: translate(-50%, 0);
}

.score span
{
    color: white;
}

.login-steam
{
    padding: 7px 13px;
    gap: 5px;
    display: flex;
    align-items: center;
    background: #171D25;
    color: white;
    border-radius: 5px;
    transition: 0.3s;
}

.login-steam:hover
{
    opacity: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.steam-card
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90%;
    gap: 15px;
}

.steam-card img
{
    border-radius: 50px;
    border-bottom: 2px solid var(--border);
}

.rank
{
    background-color: var(--dot);
    border: 1px solid #ffc400;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 65%;
    width: 90px;
    border-radius: 5px;
}

.rank img
{
    border: none !important;
    height: 100%;
}

.logo_count
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90%;
    gap: 2vw;
    color: white;
}

.looser-screen
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(100vh - 60px);
    background: linear-gradient(rgba(255, 0, 0, 0.185), transparent) !important;
    margin-top: 60px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: 0.3s;
}

.d-none
{
    display: none !important;
}

.premierCard
{
    width: 35vw;
    height: 35vh;
    border: 5px solid #4DB04D;
    position: relative !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.blurPremierCard
{
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    -webkit-box-shadow: inset 0px 0px 50px 50px rgba(66, 152, 70, 0.5);
    box-shadow: inset 0px 0px 80px 80px rgba(66, 152, 70, 0.5);
    background: rgb(0 0 0 / 55%);
}

.premierCardTitle
{
    color: #4DB04D;
    font-size: xxx-large;
    border-bottom: 1px solid #4DB04D;
    width: 60%;
    text-align: center;
    padding-bottom: 2%;
}

.premierCard img
{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.premierCardElement
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.premierCardGameIcons
{
    margin-top: 7px;
    color: #4DB04D;
}

.premierCardGameIcons i
{
    border-left: 4px solid #CEBB4A;
    background-color: #576CDA;
    color: white;
    font-size: small;
    padding: 3px;
    transform: skewX(349deg);
    margin-right: 3px;
}

.retry
{
    margin-top: 6%;
    border: none;
    padding: 10px 20px;
    font-size: xx-large;
    color: #183F00;
    background: #4DB04D;
    border-radius: 3px;
    transition: 0.3s;
    font-weight: bold;
}

.retry:hover
{
    color: white;
    transition: 0.3s;
    cursor: pointer;
    text-shadow: 0px 0px 6px #fff, 1px 1px 1px #ccc;
}

.new-rank
{
    background-color: var(--dot);
    border: 1px solid #ffc400;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 175px;
    margin-bottom: 40px;
    border-radius: 5px;
}

.new-rank img
{
    border: none !important;
    height: 100%;
}

#new-rank
{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    gap: 9px;
    font-size: x-large;
}

.stattrak_style { color: #CF6A32; }
.souvenir_style { color: #FFD70C; }
.knife_style    { color: #8650AC; }

.stattrak_border { border: 2px solid #CF6A32 !important; }
.souvenir_border { border: 2px solid #FFD70C !important; }
.knife_border    { border: 2px solid #8650AC !important; }

.rotateItem
{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: xx-large;
    color: white;
}

.rotateItem:hover
{
    transition: 0.3s;
    color: #80808052;
}

.rotateImg
{
    transform: rotateY(90deg);
    transition: 0.3s;
}

.rotateImgReset
{
    transform: rotateY(0deg);
    transition: 0.3s;
}

.paypal_bmac
{
    padding: 10px 20px;
    color: white;
    background: var(--dot);
    border-radius: 5px;
    transition: 0.3s;
}

.paypal_bmac:hover
{
    color: white;
    background: #273657;
    transition: 0.3s;
    cursor: pointer;
}

.leaderboard
{
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    padding-top: 60px;
}

.your_rank
{
    background: var(--layout);
    border-bottom: 2px solid var(--border);
    width: 72vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-radius: 5px;
    color: white;
    position: relative;
}

.leaderboard_user_rank
{
    background-color: var(--dot);
    border: 1px solid #ffc400;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 90px;
    border-radius: 5px;
}

.leaderboard_user_rank img
{
    border: none !important;
    height: 100%;
}

.leaderboard_position_container
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.leaderboard_position_container span
{
    color: rgb(173, 173, 173);
    margin-right: 10px;
}

.leaderboard_position_container div:last-child
{
    padding: 10px;
    border-radius: 5px;
    background: var(--border);
    font-weight: bold;
    min-width: 18px;
    text-align: center;
}

.leaderboard_position_container div:first-child
{
    padding: 10px;
    border-radius: 5px;
    background: var(--border);
    font-weight: bold;
    min-width: 18px;
    text-align: center;
}

.leaderboard_position
{
    padding: 10px;
    border-radius: 5px;
    background: var(--border);
    font-weight: bold;
    min-width: 18px;
    text-align: center;
}

.leaderboard_user_title
{
    color: white;
    font-size: x-large;
    font-weight: bold;
}

.leaderboard_podium
{
    width: 72vw;
    margin: 5vh 0px;
    display: flex;
    justify-content: space-evenly;
}

.podiumCard
{
    background: var(--layout);
    border-bottom: 2px solid var(--border);
    border-radius: 5px;
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0px;
    flex-direction: column;
    gap: 10px;
    color: white;
    position: relative;
}

.podium_avatar
{
    width: 30%;
    border-radius: 100px;
    border-bottom: 2px solid var(--border);
    position: relative;
}

.podium_avatar img
{
    width: 100%;
    border-radius: 100px;
}

.separator
{
    width: 75%;
    height: 2px;
    background-color: var(--border);
    border: 50px;
}

.podium_rank_name
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.podium_user_rank
{
    background-color: var(--dot);
    border: 1px solid #ffc400;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 70px;
    border-radius: 5px;
}

.podium_user_rank img
{
    border: none !important;
    height: 100%;
}

.podium_user_name
{
    max-width: 50%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.podiumFirst
{
    margin-bottom: 30px;
}

.podiumNoFirst
{
    margin-top: 30px;
}

.podium_position_indicator
{
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px;
    transform: rotate(5deg);
    font-weight: bold;
    border-radius: 5px;
    font-size: larger;
}

.podium_position_indicator_1 { background: linear-gradient(45deg, #b8860b, #ffd700); }
.podium_position_indicator_2 { background: linear-gradient(45deg, #a9a9a9, #c0c0c0); }
.podium_position_indicator_3 { background: linear-gradient(45deg, #8b4513, #cd7f32); }

.other_leaderboard
{
    width: 72vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.other_leaderboardCard
{
    width: 100%;
    background: var(--layout);
    border-bottom: 2px solid var(--border);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    color: white;
    gap: 10px;
    position: relative;
}

.other_leaderboardCard_avatar
{
    width: 4%;
    border-radius: 5px;
    border-bottom: 2px solid var(--border);
}

.other_user_pb
{
    position: absolute;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.other_leaderboardCard_position
{
    position: relative;
    width: 2.5%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid var(--border);
}

.other_leaderboardCard_rank_name
{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.mentions
{
    color: white;
    position: absolute;
    bottom: 20px;
}

.settings_container
{
    position: fixed;
    bottom: 30px;
    right: -220px;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.349);
    border-radius: 5px 0px 0px 5px;
    padding: 10px;
    backdrop-filter: blur(8px);
    transition: 0.3s;
}

.settings_container:hover
{
    right: 0px;
    transition: 0.3s;
}

.checkbox {
    display: none;
}

.switch
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: white;
}

.slider {
    width: 45px;
    height: 15px;
    background-color: lightgray;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    border: 4px solid transparent;
    transition: .3s;
    box-shadow: 0 0 10px 0 rgb(0, 0, 0, 0.25) inset;
    cursor: pointer;
}

.slider::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform: translateX(-30px);
    border-radius: 20px;
    transition: .3s;
    box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
}

.checkbox:checked ~ .slider::before {
    transform: translateX(30px);
    box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
}

.checkbox:checked ~ .slider {
    background-color: var(--border);
}

.checkbox:active ~ .slider::before {
    transform: translate(0);
}

.other_leaderboardCard_user_name
{
    max-width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.skinGuesserContainer
{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.imgGuessContainer
{
    width: 60vw;
    height: 55vh;
    background: #9696962e;
    border-bottom: 2px solid var(--border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imgGuessContainer img
{
    display: none;
    max-width: 95%;
    max-height: 95%;
}

.wordleContainer
{
    width: 74vw;
    height: 50vh;
    background: #9696962e;
    border-bottom: 2px solid var(--border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 1%;
    padding: 0px 20px;
}

.preview_guess
{
    width: 60vw;
    height: 10vh;
    background: #9696962e;
    border-bottom: 2px solid var(--border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: xxx-large;
    color: white;
}

.preview_letter
{
    min-width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fake-d-none
{
    position: absolute;
    opacity: 0%;
    z-index: -1;
}

.wordleTable
{
    color: white !important;
    width: 100%;
    position: absolute;
    top: 0;
    border-collapse: collapse;
}

.wordleTable td
{
    text-align: center;
    height: 30px;
}

.wordleTableHeader
{
    height: 30px;
}

.wordleSelectContainer input:focus{
    outline: none;
}

.wordleSelectContainer
{
    width: 50%;
    display: flex;
    justify-content: space-between;
    margin-left: 3%;
    align-items: center;
    gap: 2%;
}

.wordleSelectContainer input
{
    background: transparent;
    color: white;
    width: 70%;
    font-size: 25px;
    padding: 5px;
    border-bottom: 2px solid var(--border);
    border-left: none;
    border-top: none;
    border-right: none;
}

.wordleSelectContainer select
{
    background: transparent;
    color: white;
    font-size: 25px;
    padding: 5px;
    border-bottom: 2px solid var(--border);
    border-left: none;
    border-top: none;
    border-right: none;
}

.wordleSelectContainer select option {
    background-color: var(--border);
}

.wordleTop
{
    width: 74vw;
    height: 10vh;
    background: #9696962e;
    border-bottom: 2px solid var(--border);
    border-radius: 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
}

.wordleLifeContainer
{
    margin-right: 3%;
    display: flex;
    align-items: center;
    font-size: xx-large;
    color: #c53232;
    width: 20%;
    justify-content: space-between;
}

.wordleSelectContainer button
{
    aspect-ratio: 1;
    height: 100%;
    background: transparent;
    border: 2px solid var(--border);
    color: white;
    border-radius: 100%;
    padding: 6px;
    font-size: x-large;
    transition: 0.3s;
}

.wordleSelectContainer button:hover
{
    transition: 0.3s;
    cursor: pointer;
    background-color: var(--border);
}

.searchWordle
{
    border: 2px solid var(--border);
    width: 35%;
    height: 27vh;
    overflow-y: scroll;
    min-height: 50px;
    position: absolute;
    top: +90px;
    background: #9696962e;
    border-radius: 5px;
    backdrop-filter: blur(5px);
    z-index: 999;
}


.searchWordle::-webkit-scrollbar {
    width: 10px;
}

.searchWordle::-webkit-scrollbar-track {
    background: #f1f1f12c;
}

.searchWordle::-webkit-scrollbar-thumb {
    background: var(--border);
}

.suggestion-wordle
{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    padding: 10px;
    margin: 10px;
    gap: 20px;
    transition: 0.3s;
    height: 50px;
}

.suggestion-wordle img
{
    width: 25%;
    height: 100%;
    object-fit: contain;
}

.suggestion-wordle:hover
{
    transition: 0.3s;
    background: #9696962e;
    cursor: pointer;

}

.wordleGuessResult
{
    border: 2px solid var(--border);
    height: 80%;
    width: 15%;
    border-radius: 5px;
    font-size: smaller;
}

.wordleGuessResult img:first-child
{
    height: calc(35% - 10px);
    width: calc(100% - 10px);
    object-fit: contain;
    padding: 5px;
}

.wordleGuessResultLine
{
    display: flex;
    color: white;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    height: 15%;
}

.wordleGuessResultLine div:first-child
{
    width: 35%;
    color: #a6a6a6;
}

.wordleGuessResultLine div:last-child
{
    text-align: center;
    width: 10%;
}

.wordleGuessResultLine img
{
    height: 100%;
    object-fit: contain;
}

.check  { color: rgb(22, 255, 61); }
.cross  { color: rgb(207, 16, 16); }
.updown { color: rgb(0, 174, 255); }

.wordleGuessResultLineContainer
{
    height: calc(100% - calc(35% - -2px));
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.wordleError
{
    color: white;
    text-align: center;
    margin-top: 15px;
}

.modalRetryWordle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border-radius: 5px;
    width: 60vw;
    display: flex;
    align-items: center;
    gap: 2%;
    backdrop-filter: blur(20px);
    border: 2px solid rgba(0, 0, 0, 0.466);
}

#modalRetryWordleResult
{
    width: 40%;
}

.modalRetryWordle .wordleGuessResult
{
    border: 2px solid var(--border);
    height: 55vh;
    width: 100%;
    border-radius: 5px;
}

.modalRetryWordle .wordleGuessResultLine
{
    height: 40px;
}

.modalRetryWordle .wordleGuessResultLine div:last-child
{
    width: 33%;
    text-align: center;
}

.modalRetryWordle .wordleGuessResultLine img:last-child
{
    width: 33%;
    text-align: center;
}

.retryWordle
{
    border: 2px solid var(--border);
    margin-top: 10px;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    background: transparent;
    color: white;
    transition: 0.3s;
}

.retryWordle:hover
{
    background: var(--border);
    transition: 0.3s;
    cursor: pointer;
}

.unboxerCrateContainer
{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5vh;
}

.unboxerCratePreview
{
    display: flex;
    gap: 2vw;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.unboxerCratePreviewLeft
{
    background: #9696962e;
    border-bottom: 2px solid var(--border);
    border-radius: 5px;
    width: 12vw;
    height: 20vh;
    padding: 0px 20px;
    color: white;
    text-align: center;
}

.unboxerCrate
{
    width: 12vw;
    height: 15vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unboxerCrate img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#unboxer_collection
{
    position: absolute;
    top: 57%;
    left: 39%;
    width: 22%;
    height: 34%;
    transform: rotateY(30deg) rotateX(9deg) translate(-50%, -50%) rotate3d(1, 1, 1, 19deg);
}

.unboxerCratePreviewRight {
    width: 58vw;
    height: 20vh;
    background: #9696962e;
    border-bottom: 2px solid var(--border);
    border-radius: 5px;
    position: relative;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
}

.unboxerCratePreviewRightAnim {
    position: relative;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    height: 70%;
}

.unboxerItemsCard {
    border-radius: 5px;
    flex: 0 0 19%;
    margin-right: 0.5%;
    margin-left: 0.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 85%;
    opacity: 75%;
    transition: 0.3s;
}

.unboxerItemsCard img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    transition: 0.3s;
}

.zoomerCratePreview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    aspect-ratio: 1;
    z-index: 999;
    border-radius: 100%;
    pointer-events: none;
}

.lineCratePreview {
    position: absolute;
    border: 2px solid #ffa500bf;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    z-index: 999;
    pointer-events: none;
}

.zoomedElementUnboxed
{
    height: 95%;
    opacity: 100%;
    transition: 0.3s;
}

.zoomedElementUnboxed img
{
    width: 100%;
    height: 100%;
    transition: 0.3s;
}

.unboxerCratePreviewBottom
{
    width: calc(72vw + 40px);
    padding-bottom: 20px !important;
    background: #9696962e;
    border-bottom: 2px solid var(--border);
    border-radius: 5px;
    position: relative;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    padding-top: 20px;
}

.titleGuessUnboxer
{
    color: white;
    font-size: x-large;
}

.unboxerSelectContainer
{
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.unboxerSelectContainer input
{
    background: transparent;
    color: white;
    width: 70%;
    font-size: 25px;
    padding: 5px;
    border-bottom: 2px solid var(--border);
    border-left: none;
    border-top: none;
    border-right: none;
}

.unboxerSelectContainer button
{
    aspect-ratio: 1;
    height: 100%;
    background: transparent;
    border: 2px solid var(--border);
    color: white;
    border-radius: 100%;
    padding: 6px;
    font-size: x-large;
    transition: 0.3s;
}

.unboxerSelectContainer button:hover
{
    transition: 0.3s;
    cursor: pointer;
    background-color: var(--border);
}

.searchUnboxer
{
    border: 2px solid var(--border);
    width: 35%;
    height: 27vh;
    overflow-y: scroll;
    min-height: 50px;
    position: absolute;
    top: +120px;
    background: #9696962e;
    border-radius: 5px;
    backdrop-filter: blur(5px);
    z-index: 999;
}

.searchUnboxer::-webkit-scrollbar {
    width: 10px;
}

.searchUnboxer::-webkit-scrollbar-track {
    background: #f1f1f12c;
}

.searchUnboxer::-webkit-scrollbar-thumb {
    background: var(--border);
}

.unboxerSelectParent
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.crossUnboxerContainer
{
    width: 20%;
    font-size: 80px;
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    top: 50%;
    transform: translate(0%, -50%);
}

.crossUnboxer
{
    color: #313131;
}

.crossUnboxerActive
{
    color: #c53232 !important;
}

.unboxerRetryContainer
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.unboxerRetryContainer label
{
    color: white;
}

.unboxerRetryContainer img
{
    width: 50%;
    height: 60%;
    object-fit: contain;
}

.scoreLeaderboardNb
{
    margin-right: 0px !important;
    display: inline-block;
    width: 20px;
    padding: 0 !important;
}

.customTitleUser
{
    color: white;
    background: #c82929;
    padding: 5px;
    font-size: smaller;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.page_loader {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background-color: #1f1f1fa2;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px;
}

.page_loader img {
    width: 20vw;
    animation: rotateLoader 2s linear infinite;
    transform-style: preserve-3d;
    opacity: 50%;
}

.cheaterWarning
{
    background-color: #E1C112;
    color: #222;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: none;
}

.resultUnboxer
{
    border: 2px solid var(--border);
    background: #9696962e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 10px;
    border-radius: 5px;
    backdrop-filter: blur(10px);
    padding: 10px;
}

.resultUnboxer img
{
    width: 30%;
}

.chatbox
{
    border-left: 2px solid var(--border);
    position: fixed;
    top: 60px;
    right: 0;
    height: calc(100vh - 60px);
    width: 0px;
    display: flex;
    transition: 0.3s;
    flex-direction: column;
    gap: 25px;
    backdrop-filter: blur(3px);
}

.steam-chat
{
    display: flex;
    height: 100%;
    align-items: center;
    gap: 35px;
}

.chaticon
{
    background: var(--border);
    color: white;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    transition: 0.2s;
}

.chaticon:hover
{
    cursor: pointer;
    transition: 0.2s;
    background: white;
    color: var(--border);
    opacity: 60%;
}

.sendMessage
{
    position: absolute;
    bottom: 0;
    border-top: 2px solid var(--border);
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2%;
    padding: 0px 5px;
}

.sendMessage input
{
    height: 75%;
    width: 84%;
    background: 0;
    border: 2px solid #9696962e;
    padding: 5px;
    border-radius: 5px;
    color: white;
}

.sendMessage button
{
    height: 75%;
    aspect-ratio: 1;
    background: 0;
    border: 2px solid #9696962e;
    padding: 5px;
    border-radius: 5px;
    color: white;
    transition: 0.2s;
}

.sendMessage button:hover
{
    background-color: var(--border);
    cursor: pointer;
    transition: 0.2s;
}

textarea:focus, input:focus{
    outline: none;
}

.chat_message_container
{
    color: white;
    display: flex;
    gap: 3%;
    padding: 10px;
    align-items: flex-start;
    position: relative;
}

.chat_avatar
{
    color: white;
    width: 15%;
    aspect-ratio: 1;
    border-radius: 5px;
    border: 1px solid var(--border);
    border-bottom: 2px solid var(--border);
}

.chat_avatar img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.chat_customRank
{
    color: white;
    background: #c82929;
    padding: 5px;
    font-size: smaller;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.chat_messageContent
{
    color: rgb(185, 185, 185);
    width: 260px;
    overflow-wrap: break-word;
    white-space: normal;
}

.messagesList
{
    height: calc(100% - 80px);
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.messagesList::-webkit-scrollbar {
    display: none;
}

.chat_date
{
    opacity: 0%;
    color: rgb(185, 185, 185);
    transition: 0.3s;
    font-size: small;
    position: absolute;
    right: 9px;
}

.chat_message_container:hover .chat_date
{
    opacity: 100%;
    transition: 0.3s;
}

.chat_counterUser
{
    position: absolute;
    color: white;
    z-index: 999;
    width: 100%;
    background: var(--border);
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 10px;
    gap: 6px;
}

.onlineIcon
{
    background-color: #00d006;
    width: 10px;
    height: 10px;
    border-radius: 50px;
}

.databaseContainer
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: #9696962e;
    width: 90%;
    border-radius: 5px;
    max-height: 90%;
    overflow-y: scroll;
}

.databaseContainer img
{
    height: 50px;
    width: 50px;
    object-fit: contain;
}

.star
{
    color: gold !important;
}

.thanks_mesg
{
    width: 73vw;
    height: 5vh;
    margin-bottom: 2vh;
    display: flex;
    color: white;
    background-color: var(--border);
    border-radius: 5px;
    align-items: center;
    text-indent: 12px;
}

.crown
{
    position: absolute;
    top: -46%;
    border-radius: 0px !important;
    left: -16%;
    width: 70% !important;
}

img {
    opacity: 0%;
    transition: 0.2s;
}

img.loaded {
    opacity: 100%;
    transition: 0.2s;
}

.leaderboard_group_card_par
{
    display: flex;
    width: 50%;
    gap: 15px;
    align-items: center;
}

@media (max-width: 1250px) {

    .paypal_bmac {
        display: none;
    }

    .database_info {
        display: none;
    }

    .skin-card {
        height: 60%;
    }

    .data-skin-container {
        height: 250px;
        padding-bottom: 10px;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 0px;
    }

    .market_hash_name {
        display: flex;
        flex-direction: column;
        padding: 0px;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

    .item_collection {
        position: relative;
        padding: 0px;
        flex-direction: column;
    }

    .float_value {
        display: flex;
        padding: 0px;
        align-items: center;
        justify-content: center;
        padding: 0px;
    }

    .imgGuessContainer {
        width: 80vw;
    }

    .preview_guess {
        width: 80vw;
    }

    .preview_letter {
        min-width: 20px;
    }

    .chatbox {
        background: var(--background);
    }

    .crossUnboxerContainer {
        font-size: xx-large;
    }

    .unboxerCratePreview {
        flex-direction: column;
    }

    .unboxerCratePreviewLeft {
        width: 75vw;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 150px;
    }

    .unboxerCratePreviewRight {
        width: 75vw;
    }

    .unboxerCratePreviewBottom {
        width: 75vw;
    }

    .unboxerCrate {
        width: 140px;
        height: 140px;
    }

    #unboxer_collection {
        top: 58%;
        left: 32%;
        width: 55px;
        height: 65px;
    }

    .unboxerSelectContainer input {
        width: 100%;
    }

    .wordleTop {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
    }

    .wordleSelectContainer * {
        width: unset !important;
        font-size: unset !important;
        max-width: 80%;
    }

    .wordleLifeContainer {
        margin: 0px !important;
        gap: 5px;
        width: 100%;
        justify-content: center;
    }

    .wordleGuessResult
    {
        height: 50%;
        width: 48%;
        font-size: smaller;
    }

    .wordleError {
        min-width: 200px;
    }

    .wordleContainer {
        flex-wrap: wrap;
        height: 65vh;
        overflow-y: scroll;
    }

    .other_leaderboardCard {
        flex-direction: column !important;
    }

    .leaderboard_group_card_par {
        justify-content: center !important;
    }

    .steam-chat {
        gap: 5px;
    }

    .loglab {
        display: none;
    }

    .score {
        left: 150px;
    }

    .rank {
        width: 60px;
    }

    .your_rank {
        font-size: unset;
        flex-direction: column;
        gap: 20px;
    }

    .your_rank .leaderboard_position_container {
        flex-direction: row !important;
    }

    .premierCard {
        width: 65vw;
    }

    .counter-reveal {
        width: 31%;
        font-size: x-small !important;
    }

    .preview_guess {
        font-size: unset !important;
    }

    .preview_letter {
        min-width: 11px !important;
    }

    .sidebar {
        width: 40px;
    }

    .siderbar_link i {
        font-size: unset;
        padding: 0;
    }

    .selected_siderbar i {
        margin-left: -2px;
    }
}

@media (max-width: 1800px) {

    .market_hash_name {
        font-size: unset;
    }

    .float_value {
        font-size: unset;
    }

    .item_collection {
        font-size: unset;
    }

    .item_collection img {
        max-width: 50px;
        max-height: 40px;
    }

    .preview_guess {
        font-size: xx-large;
    }

    .preview_letter {
        min-width: 25px;
    }

    .titleGuessUnboxer {
        font-size: larger;
    }

    .other_leaderboardCard {
        width: 95%;
    }

    .score {
        flex-direction: column;
        gap: 0;
    }

    .leaderboard_podium {
        width: 85vw;
    }

    .leaderboard_position_container div:first-child {
        padding: 4px;
    }

    .leaderboard_position_container div:last-child {
        padding: 4px;
    }

    .leaderboard_podium {
        font-size: small;
    }

    .leaderboard_position_container {
        flex-direction: column;
        gap: 5px;
    }

    .podium_position_indicator {
        top: -20px;
        right: -25px;
    }

    .other_leaderboardCard {
        width: 100%;
        padding: 0;
        flex-direction: row;
        font-size: unset;
        padding: 10px;
        display: flex;
    }

    .other_user_pb {
        position: relative;
    }

    .leaderboardSepBar {
        display: none !important;
    }

    .other_leaderboardCard_avatar {
        width: 10%;
    }

    .leaderboard_group_card_par {
        justify-content: flex-start;
    }
}