/*picture handling*/

#div-draw1 {
    max-width: 100vw;
    overflow: clip;
    background: url("images/draw1.jpg") no-repeat center;
    min-width: 100%;
    background-size : cover;
    height: 80vh;
}

/*center text handling*/

#div-text-intro{
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: contain;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("./images/export.svg");
}

#mobile-image-resizer {
    display: flex;
}

#text-intro{
    padding: 45px 0;
    max-width: 30vw;
    text-align: center;
    font-size: 1.5em;
}

#date-main{
    font-size: 3em;
}


#little-dots-thing-top{
    max-width: 30%;
    padding-top: 120px;
}
#little-dots-thing-bottom{
    max-width: 30%;
    padding-bottom: 120px;
}


@media (max-width: 858px) {
    #div-text-intro{
        width: 100%;
        margin: 30px auto auto;
        background-size: cover;
    }

    #text-intro{
        padding: 30px 0;
        max-width: 80vw;
        text-align: center;
        font-size: 1.5em;
    }

    #date-main{
        font-size: 1.8em;
    }
    #little-dots-thing-top{
        max-width: 65%;
        padding-top: 40px;
    }
    #little-dots-thing-bottom{
        max-width: 65%;
        padding-bottom: 40px;
    }
}


/* main text informations*/
#text-main{
    margin: 50px auto;
    font-size: 1.5em;
    text-align: center;
    max-width: 60%;
}
#text-main div {
    padding : 10px;
}

#strikethrough{
    text-decoration: line-through;
}

@media (max-width: 850px) {
    #text-main{
        margin: 30px auto;
        font-size: 1.3em;
        text-align: center;
        max-width: 95%;
    }
    #text-main div {
        padding : 10px;
    }

}

/*handling the tiles for month day hour*/

#tiles {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 75vw;
    justify-content: center;
}

.tile {
    display: flex;
    flex-direction: column;
    margin: 20px;
    text-align: center;
}

.timer-bubble{
    padding: 30px;
    color: white;
    background: linear-gradient(0deg, rgba(51,144,179,1) 0%, rgba(64,187,224,1) 100%);
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 4em;
}

/* main countdown */

@media (max-width: 850px) {
    #main-countdown{
        font-size: 0.7em;
        max-width: 85%;
        margin: auto;
    }
    #tiles {
        width: 85vw;
    }
    .timer-bubble{
        padding: 25px;
    }
    .tile{
        margin: 10px;
    }
}


/* timers */
.div-timer{
    padding: 10px;
}


#main-count-timer{
    margin-bottom: 35px;
    font-size: 1.8em
}

@media (max-width: 850px) {
    #main-count-timer{
        margin-bottom: 0;
    }
}

/* #countdown{
    margin-bottom: 150px;
} */

/* button handling*/

#show-more{
    text-align: center;
    border-radius: 15px;
    padding: 15px;
    font-size: 1.3em;
    margin-top: 20px;
    background: linear-gradient(0deg, rgba(51,144,179,1) 0%, rgba(64,187,224,1) 100%);
    color: white;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.2);
}