/*PRELANDER.PRO*/



:root {

    /*PAGE*/

    --bg: url(../images/background.jpg);

    --button: url(../images/button.png);



    /*STYLING*/

    --font-color: #ffffff;

    --font-color-dark: #330000;

    --font-color-grey: #666;

    --font-color-dark-grey:#333;

    --text-shadow: 0px 3px 3px black;

    --font-color-bonus: #ffe391;

    --font-glow: #ed00ff;

    --border-color: #dea303;

    --font-family: 'Roboto', sans-serif;

    --gold-two:#FCC201;

    --gold-one:#DBA514;

    --background-color: #ebebebd1;

    --background-color-darker:#ebebebd6;



    /*SYMBOLS*/

    --a-bg: url(../images/L5.png);

    --b-bg: url(../images/L6.png);

    --c-bg: url(../images/L7.png);

    --d-bg: url(../images/L8.png);

    --e-bg: url(../images/M2.png);

    --f-bg: url(../images/M3.png);

    --g-bg: url(../images/WILD.png);

    --h-bg: url(../images/H1.png);

    --shine: url(../images/shine.png);

    --coin: url(../images/coin.png);



    /*MACHINE*/

    --reel-bg: url(../images/reel_bg.png);

    --reel-grid: url(../images/reel_grid.png);



    /*CHEST & BONUS*/

    --chest-1: url(../images/t1.png);

    --chest-2: url(../images/t2.png);

    --chest-3: url(../images/t3.png);

    --chest-4: url(../slot_coin_collector_asset-assets/t4.png);

    --chest-5: url(../images/t5.png);

    --chest-6: url(../slot_coin_collector_asset-assets/t6.png);



    --bonus: url(../images/bonus.png);

    --balance: url(../images/countup.png);

}



body {

    background: var(--bg);

    background-size: cover;

    background-position: center top;

    margin: 0;

    padding: 0;

    font-family: var(--font-family);

    overflow-x: hidden;

}



.container {

    width: 750px;

    height: 450px;



    max-width: 90%;

    max-height: 54.5vw;



    margin: 0 auto;

    display: flex;

    align-items: stretch;

    position: relative;

    overflow: hidden;

}

.header {

    width: 750px;

    max-width: 100%;

    text-align: center;

    margin: 12px auto;

}

a.go-final {

    text-decoration: none;

}

.counter {

    height: auto;

    max-height:fit-content;

    width: 750px;

    max-width: 100%;

    justify-content:center;

    margin: 0 auto;

    display: flex;

    align-items: stretch;

    position: relative;

    overflow: visible;

}

.header h1 {

    color: var(--font-color);

    font-size: 28px;

    text-shadow: var(--font-glow) 2px 0px 3px, var(--font-glow) 1px 1px 20px;

    margin-bottom: 0px;

}



.header h2 {

    margin-top: 0px;

    color: var(--font-color);

    font-size: 26px;

    text-shadow: var(--font-glow) 2px 0px 3px, var(--font-glow) 1px 1px 20px;

    margin-bottom: 0px;

}

#TXT_HEADER{

    margin-top: 0px;

}



.countdown-timer {

  background: rgba(0, 0, 0, 0.7);

 

  padding: 15px 15px;

margin-top: 10px;



  text-align: center;

}



.timer-text {

  font-size: 1rem;

  margin-bottom: 5px;

  color: #fbbf24;

  font-weight: 600;

}



.timer-display {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 5px;

}



.timer-unit {

  display: flex;

  flex-direction: column;

  align-items: center;

  min-width: 60px;

  background: rgba(251, 191, 36, 0.2);

  border-radius: 5px;

  padding: 5px;

}



.timer-unit span:first-child {

  font-size: 1.2rem;

  font-weight: 700;

  color: #fbbf24;

}



.unit-label {

  font-size: 0.5rem;

  text-transform: uppercase;

  color: #fff;

}



.timer-separator {

  font-size: 1.3rem;

  font-weight: bold;

  color: #fbbf24;

  margin: 0 5px;

}



@media (max-width: 768px) {

  .timer-unit {

    min-width: 50px;

  }

  

  .timer-unit span:first-child {

    font-size: 1.2rem;

  }

  

  .unit-label {

    font-size: 0.6rem;

  }

}



@media (max-width: 480px) {

  .countdown-timer {

    padding: 8px 10px;

  }

  

  .timer-unit {

    min-width: 40px;

  }

  

  .timer-unit span:first-child {

    font-size: 1rem;

  }

  

  .unit-label {

    font-size: 0.5rem;

  }

  

  .timer-separator {

    font-size: 1rem;

  }

}

.bonustext {

    background: var(--bonus);

    background-position: right center;

    width: 25%;

}

.state1{

    background: var(--chest-1);

    animation-name: chestanim;

    animation-duration: 1.6s;

animation-timing-function: ease-in-out;

animation-iteration-count:1;

animation-fill-mode: forwards;

}

.state2{

    background: var(--chest-2);

        animation-name: chestanim2;

        animation-duration: 0.6s;

    animation-timing-function: ease-in-out;

    animation-iteration-count:1;

    animation-fill-mode: forwards;

}

.state3{

    background: var(--chest-3);

        animation-name: chestanim3;

        animation-duration: 0.6s;

    animation-timing-function: ease-in-out;

    animation-iteration-count:1;

    animation-fill-mode: forwards;

}

.state4{

    background: var(--chest-4);

        animation-name: chestanim4;

    animation-duration: 0.6s;

    animation-timing-function: ease-in-out;

    animation-iteration-count:1;

    animation-fill-mode: forwards;

}

.state5{

    background: var(--chest-5);

        animation-name: chestanim5;

    animation-duration: 0.6s;

    animation-timing-function: ease-in-out;

    animation-iteration-count:1;

    animation-fill-mode: forwards;

}

@keyframes chestanim {

    0% {

        width: 15%;

        margin-top: -25px;

        margin-bottom: -40px;

    }



    90% {

        width: 20%;

        margin-top: -45px;

        margin-bottom: -45px;

    }

    100% {

        width: 15%;

        margin-top: -25px;

        margin-bottom: -40px;

    }

}

@keyframes chestanim2 {

    0% {

        width: 15%;

        margin-top: -25px;

        margin-bottom: -40px;

    }



    90% {

        width: 20%;

        margin-top: -45px;

        margin-bottom: -45px;

    }

    100% {

        width: 15%;

        margin-top: -25px;

        margin-bottom: -40px;

    }

}

@keyframes chestanim3 {

    0% {

        width: 15%;

        margin-top: -25px;

        margin-bottom: -40px;

    }



    90% {

        width: 20%;

        margin-top: -45px;

        margin-bottom: -45px;

    }

    100% {

        width: 15%;

        margin-top: -25px;

        margin-bottom: -40px;

    }

}

@keyframes chestanim4 {

    0% {

        width: 15%;

        margin-top: -25px;

        margin-bottom: -40px;

    }



    90% {

        width: 20%;

        margin-top: -45px;

        margin-bottom: -45px;

    }

    100% {

        width: 15%;

        margin-top: -25px;

        margin-bottom: -40px;

    }

}



@keyframes chestanim5 {

    0% {

        width: 15%;

        margin-top: -25px;

        margin-bottom: -40px;

    }



    100% {

        width: 20%;

        margin-top: -45px;

        margin-bottom: -75px;

    }

}



.chest {

    background-position: left center;

    width: 15%;

    margin-top: -25px;

    padding: 25px;

    margin-bottom: -15px;

    z-index: 255;

    transition: background 1s;

}

#social-proof-container {

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 1000;

  display: flex;

  flex-direction: column;

  gap: 10px;

}

  .payment-section {

            background: rgba(0, 0, 0, 0.9);

            /* padding: 30px 25px; */

            text-align: center;

            border-top: 2px solid rgba(251, 191, 36, 0.3);

          

           

            width: 100%;

          

        }

        

        .payment-title {

            color: #fbbf24;

            margin-bottom: 25px;

            font-size: 24px;

            font-weight: 600;

            letter-spacing: 0.5px;

        }

        

        .payment-images {

            display: flex;

            justify-content: center;

            flex-wrap: wrap;

            gap: 20px;

            margin: 20px 0;

        }

        

        .payment-img {

            width: 90px;

            height: 60px;

            object-fit: contain;

          

          

        }

        

        .payment-img:hover {

            transform: translateY(-5px);

            box-shadow: 0 6px 12px rgba(251, 191, 36, 0.2);

        }

        

        .security-note {

            color: #94a3b8;

            margin-top: 25px;

            font-size: 14px;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

        }

        

        .ssl-badge {

            display: inline-flex;

            background: #10b981;

            color: white;

            padding: 4px 10px;

            border-radius: 4px;

            font-weight: 500;

            font-size: 12px;

        }

        

        @media (max-width: 768px) {

            .payment-images {

                gap: 15px;

            }

            

            .payment-img {

                width: 80px;

                height: 50px;

            }

            

            .payment-title {

                font-size: 20px;

            }

        }

        

        @media (max-width: 480px) {

            .payment-images {

                gap: 10px;

            }

            

            .payment-img {

                width: 70px;

                height: 45px;

            }

        }



.header-logo {



  max-width: 200px;

  margin: auto;

}



.header-logo-img {

  max-width: 100%;

  max-height: 60px;

  object-fit: contain;

}

.social-proof {

  display: flex;

  align-items: center;

  background: rgba(255, 255, 255, 0.95);

  border-radius: 10px;

  padding: 12px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

  animation: slideInRight 0.5s ease-out;

  max-width: 300px;

  border-left: 4px solid #fbbf24;

}



.social-proof img {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  object-fit: cover;

  margin-right: 10px;

}



.social-proof-content {

  flex: 1;

}



.social-proof-name {

  font-weight: bold;

  color: #1e293b;

  font-size: 0.9rem;

}



.social-proof-text {

  color: #64748b;

  font-size: 0.8rem;

  margin: 2px 0;

}



.social-proof-time {

  color: #94a3b8;

  font-size: 0.7rem;

}



@keyframes slideInRight {

  from {

    transform: translateX(100%);

    opacity: 0;

  }

  to {

    transform: translateX(0);

    opacity: 1;

  }

}



@media (max-width: 768px) {

  #social-proof-container {

    right: 10px;

    bottom: 10px;

  }



  .social-proof {

    max-width: 250px;

    padding: 10px;

  }

}

.balance {

    background: var(--balance);

    background-position: center center;

    width: auto;

    padding: 14px 30px;

    text-align: center;

    font-weight: 700;

    font-size: 25px;

    color: var(--font-color-bonus);

    text-shadow: 1px 1px 2px var(--font-color-dark);

}



.bonustext, .chest, .balance {

    height: auto;

    background-size: contain;

    background-repeat: no-repeat;

}



#cola,

#colb,

#colc,

#cold,

#cole {

    width: 20%;

    margin: 0;

    display: flex;

    flex-wrap: wrap;

    align-self: flex-end;



}



.a {

    background: var(--a-bg);

}



.b {

    background: var(--b-bg);

}



.c {

    background: var(--c-bg);

}



.d {

    background: var(--d-bg);

}



.e {

    background: var(--e-bg);

}



.f {

    background: var(--f-bg);

}



.g {

    background: var(--g-bg);

}



.h {

    background: var(--h-bg);

}



.symbol {

    background-size: 80% 80%;

    background-position: center center;

    background-repeat: no-repeat;

    width: 100%;

    padding-top: 100%;

    align-self: flex-end;

    display: block;

    position: relative;



}



.tease::before {

    content: '';

    position: absolute;

    top: -20%;

    right: -20%;

    bottom:-20%;

    left: -20%;

    background: var(--shine);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

    width: 140%;

    padding-top: 140%;

    animation-name: spin2;

    animation-duration: 1.6s;

    animation-timing-function: linear;

    animation-fill-mode: none;

    animation-iteration-count:infinite;

    z-index: -1;

}



.twist::before {

    content: '';

    position: absolute;

    top: -20%;

    right: -20%;

    bottom:-20%;

    left: -20%;

    background: var(--shine);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

    width: 140%;

    padding-top: 140%;

    animation-name: spin;

    animation-duration: 1.6s;

    animation-timing-function: linear;

    animation-iteration-count:1;

    animation-fill-mode: forwards;

    z-index: -1;

}

@keyframes spin2 {

    0% {

        transform: rotate(0deg);

        scale: 1;

        opacity: 0;

    }

    50% {

        transform: rotate(180deg);

        scale: 1.2;

        opacity: 0.6;

    }



    100% {

        transform: rotate(360deg);

        scale: 1;

        opacity: 0;

    }

}

@keyframes spin {

    0% {

        transform: rotate(0deg);

        scale: 1;

        opacity: 0;

    }

    50% {

        transform: rotate(180deg);

        scale: 1.2;

        opacity: 0.6;

    }



    100% {

        transform: rotate(360deg);

        scale: 1;

        opacity: 0;

    }

}



.coin {

    content: '';

    position: absolute;

    right: 30%;

    width: 5%;

    padding-top: 5%;

    background: var(--coin);

    background-size: cover;

    background-repeat: no-repeat;

    position: absolute;

    z-index: 223;

    display: none;

}





/*BOTTOM WIN*/

#cola.spin2 .coin {

    animation: flipper 1s steps(17) infinite, colacoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#colb.spin2 .coin {

    animation: flipper 0.6s steps(17) infinite, colbcoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#colc.spin2 .coin {

    animation: flipper 0.6s steps(17) infinite, colccoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#cold.spin2 .coin {

    animation: flipper 0.6s steps(17) infinite, coldcoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#cole.spin2 .coin {

    animation: flipper 0.6s steps(17) infinite, colecoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



@keyframes colacoin {

    0% {

        top: 82%;

        left: 5%;

    }



    100% {

        top: -5%;

        left: 47.5%;

    }

}



@keyframes colbcoin {

    0% {

        top: 82%;

        left: 28%;

    }



    100% {

        top: -5%;

        left: 47.5%;

    }

}



@keyframes colccoin {

    0% {

        top: 82%;

        left: 48%;

    }



    100% {

        top: -5%;

        left: 47.5%;

    }

}

@keyframes coldcoin {

    0% {

        top: 82%;

        right: 28%;

    }

    60% {

        right: 33%;

    }

    100% {

        top: -5%;

        right: 47.5%;

    }

}

@keyframes colecoin {

    0% {

        top: 82%;

        right: 5%;

    }



    100% {

        top: -5%;

        right: 47.5%;

    }

}



/*MIDDLE WIN*/

#cola.spin1 .coin {

    animation: flipper 1s steps(17) infinite, s2colacoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#colb.spin1 .coin {

    animation: flipper 0.6s steps(17) infinite, s2colbcoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#colc.spin1 .coin {

    animation: flipper 0.6s steps(17) infinite, s2colccoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#cold.spin1 .coin {

    animation: flipper 0.6s steps(17) infinite, s2coldcoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#cole.spin1 .coin {

    animation: flipper 0.6s steps(17) infinite, s2colecoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}

@keyframes s2colacoin {

    0% {

        top: 50%;

        left: 5%;

    }



    100% {

        top: -5%;

        left: 47.5%;

    }

}



@keyframes s2colbcoin {

    0% {

        top: 50%;

        left: 28%;

    }



    100% {

        top: -5%;

        left: 47.5%;

    }

}



@keyframes s2colccoin {

    0% {

        top: 50%;

        left: 48%;

    }



    100% {

        top: -5%;

        left: 47.5%;

    }

}

@keyframes s2coldcoin {

    0% {

        top: 50%;

        right: 28%;

    }

    60% {

        right: 33%;

    }

    100% {

        top: -5%;

        right: 47.5%;

    }

}

@keyframes s2colecoin {

    0% {

        top: 50%;

        right: 5%;

    }



    100% {

        top: -5%;

        right: 47.5%;

    }

}



/*BBMTT WIN*/

#cola.spin4 .coin {

    animation: flipper 1s steps(17) infinite, s3colacoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#colb.spin4 .coin {

    animation: flipper 0.6s steps(17) infinite, s3colbcoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#colc.spin4 .coin {

    animation: flipper 0.6s steps(17) infinite, s3colccoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#cold.spin4 .coin {

    animation: flipper 0.6s steps(17) infinite, s3coldcoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#cole.spin4 .coin {

    animation: flipper 0.6s steps(17) infinite, s3colecoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



@keyframes s3colacoin {

    0% {

        top: 82%;

        left: 5%;

    }



    100% {

        top: -5%;

        left: 47.5%;

    }

}



@keyframes s3colbcoin {

    0% {

        top: 82%;

        left: 28%;

    }



    100% {

        top: -5%;

        left: 47.5%;

    }

}



@keyframes s3colccoin {

    0% {

        top: 50%;

        left: 48%;

    }



    100% {

        top: -5%;

        left: 47.5%;

    }

}

@keyframes s3coldcoin {

    0% {

        top: 10%;

        right: 28%;

    }

    60% {

        right: 33%;

    }

    100% {

        top: -5%;

        right: 47.5%;

    }

}

@keyframes s3colecoin {

    0% {

        top: 10%;

        right: 5%;

    }



    100% {

        top: -5%;

        right: 47.5%;

    }

}



/*FINAL WIN*/

#cola.spin5 .coin {

    animation: flipper 1s steps(17) infinite, s4colacoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#colb.spin5 .coin {

    animation: flipper 0.6s steps(17) infinite, s4colbcoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#colc.spin5 .coin {

    animation: flipper 0.6s steps(17) infinite, s4colccoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#cold.spin5 .coin {

    animation: flipper 0.6s steps(17) infinite, s4coldcoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



#cole.spin5 .coin {

    animation: flipper 0.6s steps(17) infinite, s4colecoin 0.6s ease-out infinite;

    animation-play-state: running, running;

}



@keyframes s4colacoin {

    0% {

        top: 10%;

        left: 5%;

    }



    100% {

        top: -5%;

        left: 47.5%;

    }

}



@keyframes s4colbcoin {

    0% {

        top: 10%;

        left: 28%;

    }



    100% {

        top: -5%;

        left: 47.5%;

    }

}



@keyframes s4colccoin {

    0% {

        top: 10%;

        left: 48%;

    }



    100% {

        top: -5%;

        left: 47.5%;

    }

}

@keyframes s4coldcoin {

    0% {

        top: 10%;

        right: 28%;

    }

    60% {

        right: 33%;

    }

    100% {

        top: -5%;

        right: 47.5%;

    }

}

@keyframes s4colecoin {

    0% {

        top: 10%;

        right: 5%;

    }



    100% {

        top: -5%;

        right: 47.5%;

    }

}

/*

.twist::after {

    content: '';

    position: absolute;

    right: 30%;

    width: 40%;

    padding-top: 40%;

    background: var(--coin);

    background-size: cover;

    background-repeat: no-repeat;

    animation: flipper 0.2s steps(17) infinite, pan 0.4s ease-out 3 forwards;

    animation-play-state: running;

    position: absolute;

    z-index: 1;

}

*/



@keyframes flipper {

    0% {

        background-position: 0 0%;

    }



    100% {

        background-position: 100% 0 ;

    }

}



@keyframes pan {

    0% {

        top: 40%;

        opacity: 0;

    }

    20% {

        opacity: 1;

    }

    50% {

        opacity: 1;

    }



    100% {

        top: -30%;

        opacity: 0;

    }

}

.game::after {

    content: '';

    display: block;

    position: absolute;

    top: 0;

    right: 0;

    left: 0;

    bottom: 0;

    width: 100%;

    background: var(--reel-grid);

    background-size: 100% 100%;

    z-index: 100;

}



.game::before {

    content: '';

    display: block;

    position: absolute;

    top: 0;

    right: 0;

    left: 0;

    bottom: 0;

    width: 100%;

    background: var(--reel-bg);

    background-size: 100% 100%;

    z-index: -1;

}



.game {

    z-index: 100;

}



.button {

    font-size: 25px;

    font-weight: 900;

    width: fit-content;

    margin: 0 auto;

    background: var(--button);

    background-size: cover;

    color: var(--font-color-dark);

    border-radius: 40px;

    border: var(--border-color) 1px solid;

    padding: 15px 25px;

    text-align: center;

    cursor: pointer;

    text-decoration: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    margin-top: 35px;

    z-index: 102;

}



.terms {

    margin: 40px auto 0px auto;

    padding-top: 50px;

    padding-bottom: 10px;

    width: 100%;

    text-align: center;

    color: var(--font-color);

    font-weight: 400;

    font-size: 0.8em;

    opacity: 0.9;

    position: absolute;

    bottom: 0;

    z-index: -1;

    left: 0;

    right: 0;

    font-size: 0.7em;

    background: rgb(22,10,48);

background: -moz-linear-gradient(0deg, rgba(22,10,48,1) 20%, rgba(22,10,48,0) 100%);

background: -webkit-linear-gradient(0deg, rgba(22,10,48,1) 20%, rgba(22,10,48,0) 100%);

background: linear-gradient(0deg, rgba(22,10,48,1) 20%, rgba(22,10,48,0) 100%);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#160a30",endColorstr="#160a30",GradientType=1);

    text-shadow: var(--text-shadow);

}



.spin {

    opacity: 0.45;

    cursor: default;

}



.active {

    opacity: 1;

    -webkit-animation: pulsate2 1s ease-out;

    -webkit-animation-iteration-count: infinite;

    animation: pulsate2 1s ease-out;

    animation-iteration-count: infinite;

    cursor: pointer;

}



@keyframes pulsate2 {

    0% {

        transform: scale(1);

        box-shadow: inset var(--gold-two) 0px 0px 15px, var(--gold-two) 0px 0px 15px;

    }



    50% {

        transform: scale(1.1);

        box-shadow: inset var(--gold-two) 0px 0px 15px, var(--gold-two) 0px 0px 30px;

    }



    100% {

        transform: scale(1);

        box-shadow: inset var(--gold-two) 0px 0px 15px, var(--gold-two) 0px 0px 15px;

    }

}



#win {

    display: none;

    position: absolute;

    margin: 0;

    flex-wrap: wrap;

    align-self: flex-start;

    text-align: center;

    color: var(--font-color);

    font-weight: bold;

    top: 2%;

    right: 0%;

    left: 1%;

    bottom: 1%;

    padding: 0%;

    z-index: 254;

    background: var(--reel-bg);

    background-size: 100% 100%;

}

.product-button {

    text-decoration: none;

}



#winamount, #currency {

    color: var(--win-color);

    text-shadow: var(--text-shadow), var(--win-shadow);

}



/*CONTESTANT*/



.contestants {

    display: block;

    max-width: 100%;

    margin: 40px auto 0px auto;

    height: auto;

    top: 65%;

    position: absolute;

    overflow: hidden;

    left: 0;

    right: 0;    z-index: -22;

    bottom: 0;

}



.contestant {

    width: 90%;

    border-radius: 0.7rem;

    font-size: 1.4rem;

    max-width: 100%;

    margin: 0 auto;

    background: var(--background-color);

    background: -moz-linear-gradient(90deg, var(--background-color) 0%, var(--background-color-darker) 100%);

    background: -webkit-linear-gradient(90deg, var(--background-color) 0%, var(--background-color-darker) 100%);

    background: linear-gradient(90deg, var(--background-color) 0%, var(--background-color-darker) 100%);

    padding: 0.5rem;

    position: relative;

    height: fit-content;

    margin-bottom: 0.5rem;

    display: flex;

    flex-wrap: nowrap;

    justify-content: stretch;

    box-sizing: border-box;

}



.contestants h3 {

    font-size: 0.8rem;

    text-align: center;

    text-transform: uppercase;

    color: var(--font-color);

    letter-spacing: 0.4rem;

    margin: 1.2rem auto 1rem auto;

}



.contestant .item:first-child img{

width: 100%;

}





.item {

    font-weight: bold;

    min-width: 40px;

}



.contestant .item:nth-child(2) {

    flex-grow: 1;

}



.contestant .item:first-child {

    overflow: hidden;

    display: inline-block;

    background: #174f51;

    padding: 0px;

    text-align: center;

    border-radius: 0.5rem;

    font-size: 2.2rem;

    margin-right: 10px;

    margin-left: -4px;

    margin-top: -4px;

    margin-bottom: -4px;

}



.contestant.active .item:first-child {

    display: inline-block;

    background: var(--gold-two) !important;

    text-align: center;

    border-radius: 1.5rem;

    font-size: 2.2rem;

}



.contestant .item:last-child {

    text-align: right;

    margin-left: 0.5rem;

    line-height: 2.1rem;

    font-size: 19px;

    margin-right: 2px;

    color: var(--font-color-dark-grey);

}



.contestant .bet {

    font-size: 1.6rem !important;

}



.name {

    display: inline-block;

    width: fit-content;

    vertical-align: super;

    font-weight: bold;

    font-size: 16px;

    margin-top: 2px;

}





.time {

    font-size: 12px;

    color: var(--font-color-grey);

    font-weight: 300;

}

.points {

    font-size: 1.8rem;

    padding: 1.5rem;

    font-weight: bold;

    display: inline-block;

    text-align: right;

    line-height: 2rem;

    order: 3;

}



@media screen and (max-width:680px) {

    #win h2 {

        font-size: 16px;

    }

    #win h1 {

        font-size: 21px;

    }



    #logo{

      display: none;

    }



    .header h1 {

        color: var(--font-color);

        font-size: 23px;

        text-shadow: var(--font-glow) 2px 0px 3px, var(--font-glow) 1px 1px 20px;

        margin-bottom: 5px;

        padding-left: 5%;

        padding-right: 5%;

    }



    .header h2 {

        margin-top: 0;

        color: var(--font-color);

        font-size: 18px;

        text-shadow: var(--font-glow) 2px 0px 3px, var(--font-glow) 1px 1px 20px;

    }

    .button {

        margin-top: 10px;

        font-size: 18px;

    }

    .balance {

        font-size: 22px;

    }

    .contestants {

        top: 65%;

    }

    .terms {

        font-size: 0.7em;

    }

}