/* setting the fonts, and gradient background */
body {
    margin: 0%;
    padding: 0%;
    background-color: #85FFBD;
    background-image: linear-gradient(90deg, #fffb7d 0%, #85ffbd 50%, #FFFB7D 100%);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 4vw;
}
/* styling the inputs and buttons */
input, button{
    border-radius: 50px;
    text-align: center;
    background-color: #FFFB7D;
}
/*all the different main containers  */
.divs {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15vh;
}
/*adding a border to the buttons*/
button {
    border: solid 1px #85FFBD;
}
/*adding a border to the inputs*/
input {
    border: #85FFBD solid 3px;
}
/*setts 4 of the 6 divs to be column*/
#number_display, #number_chooser, #guesses, #vinner_vinner{
    flex-direction: column;
}
/*styles the "trekk tilfeldeige tall" button*/
#randomize_button{
    width: 40vw;
    height: 5vh;
}
/*styles the mini div where the "velg antall tall" button resides*/
#number_button_holder {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/*styles a mini div that contains all of the inputs*/
#your_guesses_holder {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
}
/*classes for the inputs*/
.your_input {
    width: 10vw;
    display: flex;
    justify-content: center;
    text-align: center;

}
/*styles the last main div*/
#vinner_vinner {
    margin-top: 2vh;
    height: 50vh;
    text-align: center;
    justify-content: flex-start;
}
/*styles the vinctory displayer*/
#vinner_display {
    font-size: 6vw;
    font-weight: 400;
}
/*styles the button that appers after checking your kupon*/
.restart_button{
    width: 25vw;
    height: 5vh;
    margin-bottom: 10vh;
    border: solid #85FFBD 2px;
}

/*adjusts the values to fit a bigger screen*/
@media screen and (min-width: 700px) {
    #header {
        font-size: 3vw;
        margin-top: 3vh;
    }

    #velg_antall_tall {
        width: 40vw;
        font-size: 4vh;
        margin-top: 10vh;
    }

    #number_button_holder {
        display: flex;
        flex-direction: column;
    }

    #submit_button,
    #number_submit,
    #randomize_button {
        width: 10vw;
        height: 5vh;
        font-size: 1.2vw;
    }

    #randomize_button {
        width: 13vw;
        height: 6vh;
        margin-top: 15vh;
    }

    #dine_tall_tekst {
        font-size: 2.5vw;
        margin-top: 10vh;
    }

    .your_input {
        width: 5vw;
        height: 5vh;
        font-size: 2vw;
    }

    #number_display {
        height: 20vh;
        margin-top: 4vh;
    }

    #your_numbers {
        font-size: 2vw;
    }

    #guesses {
        margin-top: 5vh;
    }

    #sjekk_kupong {
        width: 10vw;
        height: 5vh;
    }

    #vinner_display {
        font-size: 3vw;
    }
    .restart_button{
        width: 10vw;
        height: 5vh;

    }
}