@font-face {
    font-family: squadaone;
    src: url('../fonts/squadaone.ttf');
}

*{
    box-sizing: border-box;
}

body,html{
    margin:10;
    font-family: Arial, Helvetica, sans-serif;
    background: black;
}

.popup{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    backdrop-filter:blur(3px);
    display:none;
    align-items: center;
    justify-content: center;

}

.popup_content{
    position:relative;
    width:800px;
    border-radius: 10px;
}

.popup_close{
    position:absolute;
    right:20px;
    top:10px;
    font-weight: bold;
    font-size: 20px;
}

.timer_content{
    background-image: url('../images/freegift.jpg');
    background-color: black;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    display:flex;
    flex-direction: column;
    align-items: center;
    color:white;
    font-family: squadaone;
    overflow-y: auto;
    padding:80px 5%;
    padding-top: 200px;
}

.timer_content h1{
    text-align: center;
    margin:0;
    margin-bottom: 20px;
    font-size: 40px;
    color:var(--yellow1);
    filter:drop-shadow(0 5px 5px black);
}

.timer_content h2{
    font-size: 25px;
    margin:0;
    text-align: center;
    font-weight: normal;
    border-bottom: unset;
    text-transform: unset;
}

.timer_form{
    display:flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    margin-top: 50px;
}

.timer_form label{
    margin:10px 0;
    width:100%;
    position:relative;
}

.timer_form input{
    font-size: 15px;
    border:none;
    background: none;
    border-bottom: 1px solid white;
    width:100%;
    padding:10px;
    color:white;
    text-align: center;
}

.timer_form input:focus{
    outline: none;
}

.timer_form i{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    color:var(--yellow1);
    font-size: 20px;
    display:none;
}

.timer_submit{
    width:100%;
    border:none;
    background: var(--gradient_red);
    color:var(--yellow1);
    font-size: 20px;
    padding:15px;
    font-weight: bold;
    border-radius: 5px;
    margin:10px 0;
}

.disabled{
    pointer-events: none;
    filter:grayscale(1);
}

.timer_content p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
    position:absolute;
    bottom:10px;
    left:20px;
    color:grey;
}

.timer_thank{
    display:none;
}


@media only screen and (max-width: 570px) {
    .timer_content{
        background-image: url('../images/freegift.jpg');
        background-color: black;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: top center;
        display:flex;
        flex-direction: column;
        align-items: center;
        color:white;
        font-family: squadaone;
        width:80vmin;
        height:80%;
        overflow-y: auto;
        padding:0 8%;
    }

    .popup_content{
        position:relative;
    }

    .timer_content h1{
        text-align: center;
        margin:5vmin 0;
        margin-top: 25vmin;
        font-size: 7vmin;
        color:var(--yellow1);
    }

    .timer_content h2{
        font-size: 5vmin;
        margin:0;
        text-align: center;
        font-weight: normal;
    }

    .timer_form{
        display:flex;
        flex-direction: column;
        align-items: center;
        width:100%;
        margin:3vmin 0;
    }

    .timer_form label{
        margin:2vmin 0;
        width:100%;
        position:relative;
    }

    .timer_form input{
        font-size: 4vmin;
        border:none;
        background: none;
        border-bottom: 1px solid white;
        width:100%;
        padding:2vmin;
        padding-right: 10vmin;
        color:white;
        text-align: center;
    }

    .timer_form input:focus{
        outline: none;
    }

    .timer_form i{
        position:absolute;
        right:2vmin;
        top:50%;
        transform:translateY(-50%);
        color:var(--yellow1);
        font-size: 4vmin;
        display:none;
    }

    .timer_submit{
        width:100%;
        border:none;
        background: var(--gradient_red);
        color:var(--yellow1);
        font-size: 4vmin;
        padding:3vmin;
        font-weight: bold;
        border-radius: 1vmin;
        margin:2vmin 0;
    }

    .disabled{
        pointer-events: none;
        filter:grayscale(1);
    }

    .timer_content p{
        font-family: oswald;
        font-size: 4vmin;
        text-align: center;
    }

    .timer_thank{
        display:none;
    }

    .popup{
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index: 999;
        background: rgba(0,0,0,0.5);
        backdrop-filter:blur(3px);
        display:none;
        align-items: center;
        justify-content: center;
    }

    .popup_close{
        position:absolute;
        right:3vmin;
        top:3vmin;
        font-weight: bold;
        font-size: 5vmin;
    }
}

:root{
    --color1_1:rgb(30, 30, 30);
    --color1_2:rgb(20, 20, 20);
    --color1_3:rgb(50, 50, 50);
    --color1_4:rgb(15, 15, 15);
    --color1_5:rgb(120,120,120);
    --color1_6:rgb(10,10,10);

    --rw0:#f9544f;
    --rw1:#b31d19;
    --rw2:#7b130c;
    --rw3:#4f0c09;
    --rw4:#290403;

    --gradient_red:linear-gradient(#eb3349,#8c1b1b,#970000);


    --color2_1:#f45c43;
    --color2_2:#eb3349;

    --yellow1: #f3df98;
    --yellow2: #e6a432;
    --yellow3: #cc8513;
    --yellow4: #b26c10;
    --yellow5: #613e12;

    --text_gradient:linear-gradient(270deg,var(--yellow1),var(--yellow3),var(--yellow4),var(--yellow2),var(--yellow5),var(--yellow2),var(--yellow4), var(--yellow3), var(--yellow1));

    --gradient1:linear-gradient(270deg,var(--yellow3),var(--yellow4),var(--yellow2),var(--yellow4), var(--yellow3));

    --gradient1_2:linear-gradient(270deg,var(--yellow3),var(--yellow4),var(--yellow2));

    --gradient11:linear-gradient(270deg,var(--yellow1),var(--yellow3),var(--yellow4));

    --gradient4:linear-gradient(#e4bd31 , #b37a11, #e4bd31 ,#b37a11);

    --gradient_red:linear-gradient(#eb3349,#8c1b1b,#970000);

    --gradient2:linear-gradient(270deg, #eb3349, #f45c43);
    --gradient12:linear-gradient(270deg, #eb3349, #f45c43, #20bf55, #01baef);
    --gradient3:linear-gradient(315deg, #20bf55 , #01baef);
}