* {
    margin: 0;
    padding: 0;
    font-family: "Fredoka";
}

label {
    font-size: min(3vw, 25px);
}

/*Partie du header*/
header {
    border: 5px solid #22427C;
    margin: 0 8%;
    margin-top: 8vh;
    height: 25vh;
    border-radius: 15px;
    background-color: #2B92F9;
    color: white;
    font-size: min(2vw, 25px);
    margin-bottom: 3vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#sunCloud {
    height: 80%;
    margin-top: 0;
}

/*Partie Selection*/

#section-selection {
    text-align: center;
    border: 5px solid #03224C;
    margin: 0 20%;
    border-radius: 15px;
    padding: 3vh 0;
}

.commune-form>div {
    margin-bottom: 3vh;
}

#day-number {
    display: flex;
    justify-content: center;
    gap: 1vh;
    align-items: center;
}

#dayRange {
    width: 5vh;
}

/*Checkbox part*/
#checkboxBox {
    display: inline-block;
    text-align: left;
}

.fakeCheck {
    display: inline-block;
    width: min(1.5vw, 15px);
    aspect-ratio: 1/1;
    border: solid #03224C 2px;
    border-radius: 3px;
    text-align: center;
    font-size: calc(min(1.5vw, 15px)*0.75);
    color: white;
    overflow: auto;
}

.BtnCheck {
    display: none;
}

.BtnCheck:hover~.fakeCheck {
    background-color: #7cf;
}

.BtnCheck:checked~.fakeCheck {
    background-color: #03224C;
}

button,
input,
select {
    font-size: min(2vw, 20px);
    border: #03224C solid 3px;
    border-radius: 10px;
    padding: 3px 5px;
    background-color: #2B92F9;
}

button:hover {
    color: white;
    background-color: #3A92E1;
    cursor: pointer;
}

#sendForm {
    margin-top: 3vh;
}

#weatherResponse {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vh;
    margin: 3vh;
}

/*Weather card*/

.section-card {
    margin: 1% 20%;
    font-size: min(3vw, 25px);
}

.weatherDay {
    text-align: center;
    border: 5px solid #03224C;
    margin-bottom: 2vh;
    border-radius: 15px;
    font-size: min(2vw, 30px);
}

/*Part of weather info*/
#weather-info {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

#card-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 1vh;
    padding: 1vh;
    border: 2px solid #03224C;
    border-radius: 12px;
}

#global-info {
    text-align: center;
    align-items: center;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 50%);
}

#city-div {
    text-align: center;
    background-color: #2B92F9;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    margin-bottom: 1vh;
    padding: 0.5vh;
}

#image-weather {

    height: 15vh;
    width: 15vh;
}

/*Weather card additional informations*/
#moreInfo {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    padding: 1vh;
    margin-top: 2vh;
    background-color: #7cf;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    font-size: min(1.8vw, 25px);
}

#latLong {
    display: flex;
    justify-content: space-evenly;
}

#wind {
    display: flex;
    justify-content: space-evenly;
}

/* gestion des médias querries */
@media screen and (max-width: 768px) {

    #section-selection,
    #section-weather,
    header {
        margin: 2vh 2%;
    }

    #sunCloud {
        height: 50%;
    }

    #image-weather {
        height: 10vh;
        width: 10vh;
    }

    #moreInfo {
        font-size: min(2.5vw, 25px);
    }

    #global-info {
        font-size: min(2.8vw, 25px);
    }

    #city-div {
        font-size: min(3vw, 25px);
    }

    #card-div {
        font-size: min(2.5vw, 25px);
    }

    #section-selection {
        font-size: min(3vw, 25px);
    }

    header {
        flex-direction: column;
        height: 20vh;
        font-size: min(4vw, 10px);
    }

    .commune-choice {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
}