@import url('https://fonts.googleapis.com/css2?family=Mandali&family=PT+Sans:ital@1&display=swap');

:root {
    --dark-blue: #211E6D;
    --pink: #FEE4E5;
    --teal: #00C9B7;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
}

body {
    background: linear-gradient(5deg, var(--dark-blue) 45%, var(--pink) 35%);
}

/*****************Alert Statement************/
.alert {
    position: absolute;
    width: 100vw;
    background-color: #F1FF38;
    text-align: center;
    height: 5%;
    padding: 10px;
    font-size: medium;
    font-weight: bold;
}

.alert p {
    display: inline-block;
}

.alert button {
    font-size: 10px;
    cursor: pointer;
}

/************************************************/


/************** Main Container******************/
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 55px;
}

a img {
    position: absolute;
    right: 2rem;
    width: 2.5rem;
    top: 2.5rem;
    z-index: 1;

}

/*******Heading*******/
.heading {
    font-size: 4rem;
    font-family: 'PT Sans', sans-serif;
    color: var(--teal);
}

.birthday-heading {
    color: #FE5171;
}

.sub-heading {
    font-size: 4vmin;
    margin-top: 3%;
    margin-bottom: 1rem;
    font-family: 'Mandali', sans-serif;
}

/*******************************/

/******Statement*****/
.statement {
    font-size: 4vmin;
    font-family: 'Mandali', sans-serif;
    display: none;
}

/***********/

/****Inputs and Check Button******/
.birthday-label,
.lucky-number-label,
.check-button {
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 4vmin;
    color: var(--teal);
    font-family: 'Mandali', sans-serif;
}

.reset-button {
    color: var(--teal);
}

.birthday,
.lucky-number {
    width: 25vh;
    height: 5vh;
    text-align: center;
}

.check-button,
.reset-button {
    font-size: 3vmin;
    border-radius: 5px;
    width: 12vh;
    font-weight: bold;
    padding: 1px;
    background-color: var(--pink);
    font-family: 'Mandali', sans-serif;
    cursor: pointer;
}

.graphic {
    display: block;
}

/*******************************************/


/*********Results gif*************/
.loading-gif {
    display: none;
    width: 15vw;
    height: 10vw;
    margin: 2rem;
}

.row {
    display: flex;
}

.lucky-gif,
.lucky-gif-mirror {
    display: none;
    width: 20vw;
    height: 10vw;
    margin: 0.3rem;
    flex: 33%;
    padding-right: 25rem;
    z-index: 1;
}

.first,
.second {
    width: 60vh;
    height: 60vh;
}

/*******************/

/**Result Statement**/
.result-statement {
    display: none;
    font-family: 'PT Sans', sans-serif;
    color: #9f302d;
    /* margin-top: 5rem; */
    font-size: 10vh;
    font-weight: bold;
    position: absolute;
    top: 25vw;

}

/**********************/

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

    .heading {
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }

    .alert {
        font-size: 10px;
    }

    .container {
        margin-top: 75px;
    }

    .first,
    .second {
        width: 45vh;
        height: 40vh;
        /* margin: 2rem; */
        padding: 2px;
    }

    .lucky-gif {
        padding-right: 180px;
        margin: 1rem;
        z-index: 0;
    }

    .lucky-gif-mirror {
        padding-right: 300px;
        margin: 1rem;
        z-index: 1;
    }

    .result-statement {
        font-size: 4vh;
        top: 40vh;
    }
}