:root {
    --mf-dark-color: #FFFFFF;
    --primary-color: #028C9A;
    --secondary-color: #A7A7A7;
}

body {
    background-color: #0b0b0b;
    color: #FFFFFF;
}

.screen-container {
    max-width: 375px;
    margin: auto;
}

.screen.hidden {
    display: none;
}

#header {
    width: 375px;
    height: 66px;

    padding: 16px;

    margin: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header.hidden {
    display: none;
}

#footer.hidden {
    display: none;
}

.background-cigar {
    background-image: url('http://localhost:8000/wp-content/themes/martfury-child/assets/images/vendor-lp/humidor/cigar_and_lighter.webp');
    background-repeat: no-repeat;
    background-size: auto 100%;
    position: absolute;
    width: 100%;
    height: 743px;
    opacity: 8%;
    z-index: -100;
    top: 228px;
    left: 0;
    background-position: calc(50% + 20px) top;
}

.scan-smoke {
    background-image: url('http://localhost:8000/wp-content/themes/martfury-child/assets/images/vendor-lp/humidor/scan_smoke.webp');
    background-repeat: no-repeat;
    background-size: auto 100%;
    position: absolute;
    width: 100%;
    height: 226px;
    opacity: 17%;
    z-index: -90;
    top: 146px;
    left: 0;
    background-position: calc(50% + 116px) top;
}

.top-left-smoke {
    position: absolute;
    opacity: 8%;
    z-index: -90;
}

.top-left-smoke::after {
    position: relative;
    top: -35px;
    left: -165px;
    content: url('http://localhost:8000/wp-content/themes/martfury-child/assets/images/vendor-lp/humidor/scan_smoke.webp');
}

.title-1 {
    margin: 8px 0;
    text-transform: uppercase;
    font-size: 26px;
    text-align: center;
    font-family: "Forum";
}

.title-2 {
    margin-bottom: 24px;
    font-size: 26px;
    text-align: center;
    font-family: "Forum";
}

.progress-bar {
    background-color: #211F1F;
    border-radius: 50px;
    padding: 4px;
    width: 344px;
    height: 28px;
    margin: 0px auto 32px auto;
}

.progress-bar>div {
    background: linear-gradient(to right, var(--primary-color), #CCF0F3, #FFFFFF);
    border-radius: 50px;
    height: 100%;
}

.pretty-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 21px;
    height: 21px;
    border: 2px solid var(--primary-color);
    position: relative;
}

.pretty-checkbox:checked::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 11px;
    height: 11px;
    background-color: var(--primary-color);
}