* {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
}
:root {
        --colorA: #ffffff;
        --colorB: #e2b659;
        --colorC: #e2b659;
        --fontA: kanit;
        --fontB: robot;
}
Body {
        font-family: poppins;
        background-color: rgb(253, 253, 253);
}
.app-météo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
}

.wrapper_indicateur {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
}
.container_input {
        display: flex;
        justify-content: center;
        align-items: center;
}
.input {
        /* width: 100%; */
        margin-left: auto;
        margin-right: auto;
        padding: 15px;
        margin-top: 20px;
        text-align: left;
        font-family: var(--fontA);
        font-size: 1em;
        color: rgb(26, 26, 26);
        border: none;
        border-radius: 8px;
        box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.141);
}
.input::placeholder {
        color: rgb(182, 181, 181);
        text-align: center;
}
.input:focus {
        outline: none;
}
.delete {
        display: none;
}

.container_1day {
        display: none;
}
.container_1day_visible {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        border-radius: 10px;
        font-family: var(--kanit);
        color: var(--colorA);
}
h5 {
        font-family: kanit;
        font-size: 1em;
        color: white;
        font-weight: 900;
}
h2 {
        font-size: 8em;
        font-family: var(--kanit);
        font-weight: 500;
}
.wrapper_data p {
        font-family: poppins;
        color: white;
        font-size: 1em;
        font-weight: 500;
        color: black;
        text-align: left;
}

.wrapper_data_weather {
        display: flex;
        flex-direction: column;
        margin-top: 0px;
}
.wrapper_data {
        align-items: flex-end;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        border-radius: 20px;
        gap: 10px;
        padding: 20px;
        margin-top: -60px;
}
.wrapper_data > * {
        flex: 1 1 34%;
}

.indicateur {
        font-weight: 700;
        font-family: var(--roboto);
        font-size: 1em;
        text-align: left;
        text-transform: uppercase;
        color: black;
}

.wrapper-town-weatherType {
        display: flex;
        gap: 20px;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: navy;
}
.town {
        font-size: 4rem;
        text-align: center;
        font-family: kanit;
        font-weight: 800;
        text-transform: capitalize;
        color: navy;
        margin-bottom: 20px;
}

.weather {
        font-size: 1.3em;
        text-transform: uppercase;
        font-weight: 200;
        color: navy;
}
.container_weather {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
}

.icons {
        font-size: 2em;
        color: transparent;
        background-image: linear-gradient(90deg, #4f64dc 0%, #e6b30d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
}

.section-dataToday {
        width: 100%;
        display: flex;
        justify-content: center;
}
.container_datasDay {
        display: flex;
        display: none;
}
.wrapper-infos-today {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border: 3px rgb(215, 214, 214) solid;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 2px 2px 10px rgba(109, 109, 109, 0.224);
        max-width: 60%;
        min-height: 150px;
        margin: 0 auto;
}
.wrapper-times {
        display: none;
}

.wrapper-wind {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* background-color: yellow; */
}

.container_8days {
        display: flex;
        flex-direction: rows;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 20px;
}
.container_8days > * {
        flex: 1 1 35%;
}

.div_container8days {
        min-height: 200px;
        max-width: 220px;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        border-radius: 20px;
        padding: 20px;
        background-image: linear-gradient(90deg, #8492df 0%, #0e1653 100%);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        gap: 20px;
}
.daily_temp {
        padding: 10px;
        margin-top: -5px;
        font-size: 2em;
        color: white;
}
.container_days_forecast {
        margin-top: 50px;
        display: flex;
        align-content: center;
        justify-content: center;
        flex-direction: column;
}
.container_days_forecast-visible {
        font-size: 1em;
        font-weight: 800;
        margin: 0 auto;
        margin-bottom: 30px;
        margin-bottom: 50px;
}

.prevision-title {
        display: none;
}
.prevision-title-visible {
        font-size: 1.4em;
        font-weight: 900;
        margin: 0 auto;
        margin-bottom: 30px;
        margin-bottom: 50px;
        display: block;
}
.div_weatherDescription {
        font-family: kanit;
        font-size: 1rem;
        font-weight: 400;
}

@media screen and (max-width: 1080px) {
        .container_8days {
                flex-wrap: wrap;
                width: 70%;
                margin: 0 auto;
        }
        .container_8days > * {
                flex: 1 1 50%;
        }

        @media screen and (max-width: 768px) {
                .wrapper_data {
                        width: 50%;
                        margin: 0 auto;
                }
                .wrapper_data > * {
                        flex: 1 1 10%;
                }
                .town {
                        font-size: 3rem;
                        text-align: center;
                        font-family: kanit;
                        font-weight: 800;
                        text-transform: capitalize;
                        color: navy;
                        margin: 20px;
                }
                .wrapper-infos-today {
                        min-width: 100%;
                }
        }
}