/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* 1. Poppins - SemiBold */
@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-SemiBold.woff2') format('woff2'),
        url('../../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

/* 2. Poppins - Bold */
    @font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-Bold.woff2') format('woff2'),
        url('../../fonts/Poppins-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* General Styles */
body {
    --fontPoppins: 'Poppins', Tahoma, Arial, Helvetica, sans-serif;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-highlighted-color: #ffd683;
    --font-primary-color: #FFFFFF;
    --cta-bg-color: #ffdb83;
    --font-cta-color: #5B390E;
    --font-footer-color: #A6A4DC;
    --body-bg-color: #191935;
    font-family: var(--fontPoppins);
    font-weight: var(--font-weight-semibold);
    font-size: calc(16px + (32 - 16) * ((100vw - 375px) / (750 - 375)));
    background-color: var(--body-bg-color);
    color: var(--font-primary-color);
}

a {
    text-decoration: none;
}

.wrapper {
    margin: 0 .625em;
}

.highlighted {
    color: var(--font-highlighted-color);
    font-weight: var(--font-weight-bold);
}

.cta a {
    display: inline-block;
    margin-top: 2em;
    padding: .7666666666em 1.83333333em;
    font-size: 1.875em;
    color: var(--font-cta-color);
    background-color: var(--cta-bg-color);
    line-height: 1;
    border-radius: 2em;
    text-transform: uppercase;
    box-shadow: inset 0px .533333333em 0px 0px rgba(255, 255, 255, 0.25), 0 0.1333em #4F310A, 0px .1666666666666667em .2em 0px rgba(0, 0, 0, 0.25);
    transition: all .3s ease-in-out;
}

/* Background Styles */
.combo-lp {
    background: url(../../img/backgrounds/hundred-background-mobile.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

/* Offer section styles */
.offer {
    padding-top: 5em;
}

.logo {
    width: 15em;
    display: block;
    margin: 0 auto;
}

.tournament-logo {
    width: 9.5em;
    margin-top: 9.0625em;
    margin-left: 11.625em;
}

h1,
h2 {
    font-size: 1.75em;
    text-align: center;
    text-shadow: 0 4px 4px #101023A6;
}

h1 {
    margin-top: 1.6em;
    line-height: 1.642857142857143;
}

h1 .highlighted {
    font-size: 1.428571428571429em;
    line-height: 1.15;
}

/* Bonuses section Styles */
.bonuses {
    margin-top: 2.2em;
    text-align: center;
}

.promo-code {
    margin: 0 0.937em;
    font-size: 3em;
    color: var(--font-highlighted-color);
    backdrop-filter: blur(4px);
    box-shadow: 0px 4px 4px 0px rgba(16, 16, 35, 0.35);
    background-color: rgba(25, 25, 53, 0.45);
    border: 2px solid #ffffff;
    border-radius: 1.25em;
}

.copied-successful {
    color: var(--font-cta-color) !important;
    background-color: var(--cta-bg-color) !important;
}

/* Payment methods styles */
.payment-methods {
    margin-top: 6.625em;
}

.payment-methods-container {
    display: flex;
    flex-wrap: wrap;
    gap: .5em .0625em;
    justify-content: space-between;
}

.payment-method-holder {
    height: 2.25em;
    display: flex;
    padding: 0.4375em 0.6875em;
    border: 1px solid #A29FD5;
    border-radius: 2em;
    box-sizing: border-box;
}

.payment-method-holder img {
    height: 100%;
}

/* Footer styles */
footer {
    margin-bottom: 1.2em;
    padding-top: 1.8em;
    font-family: var(--fontMyriad);
    color: var(--font-footer-color);
}

footer p {
    margin-bottom: 1em;
    font-size: 0.625em;
    text-align: center;
    line-height: 1.4;
}

.legal-icons {
    display: flex;
    margin-bottom: 0.625em;
    justify-content: center;
    gap: 0.625em;
}

.legal-icons img {
    width: 1.25em;
}

@media (min-width: 1280px) {
    body {
        font-size: calc(17.333333px + (26 - 17.333333) * ((100vw - 1280px) / (1920 - 1280)));
    }

    .wrapper {
        margin: 0 23.461538461em;
    }

    .cta a {
        margin-top: 1.071428571428571em;
        padding: 0.5476190476190476em 1.761904761904762em;
        font-size: 1.61538461538em;
    }

    /* Background Styles */
    .combo-lp {
        background: url(../../img/backgrounds/hundred-background-desktop.webp) no-repeat;
        background-size: cover;
        background-position: center;
        height: 980px;
    }

    /* Offer section styles */
    .offer {
        padding-top: 2.69230769230em;
    }

    .logo {
        width: 13.61538461538462em;
    }

    .tournament-logo {
        display: block;
        width: 8.19230769230em;
        margin: 5.07692307em auto 0;
    }

    h1,
    h2 {
        font-size: 1.846153846153846em;
    }

    h1 {
        margin-top: 0.733333333em;
        line-height: 1.375;
    }

    h1 .highlighted {
        font-size: 1.3333333em;
        line-height: 1.03125;
    }
    
    /* Bonuses section Styles */
    .bonuses {
        margin-top: 1.2em;
    }

    .bonus-info-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .promo-code {
        min-width: 4.84375em;
        margin: 0 0 0 0.28125em;
        padding: 0.15625em 0;
        font-size: 2.461538461538462em;
        line-height: 1;
        cursor: pointer;
    }

    /* Payment methods styles */
    .payment-methods {
        margin-top: 4.307692307692308em;
        padding-bottom: 1.692307692307692em;
    }

    .payment-methods-container {
        gap: 0.4230769230769231em 0;
    }

    .payment-method-holder {
        height: 1.731em;
        padding: 0.3461538461538462em 0.46153846153em;
    }

    /* Footer styles */
    footer {
        margin-bottom: 0.7692307692307692em;
        padding-top: 1em;
    }

    footer .wrapper {
        margin: 0;
    }

    footer p {
        margin-bottom: 0.8em;
        font-size: 0.4615384615em;
    }

    .legal-icons img {
        width: 1em;
    }
}