* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    scrollbar-color: rgba(255, 255, 255, 0.1) rgba(0, 0, 0, 0.3);
    scrollbar-width: thin;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#cidades {
    /* opacity: 0; */
    display: none;
}

html {
    height: 100vh;
    width: 100vw;
}

body {
    margin: 0;
    display: flex;
    width: 100%;
    min-height: 100%;
    background-color: rgb(25, 36, 50);
    overflow-y: scroll;
    overflow-x: hidden;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    align-items: center;
    padding: 1rem;
    overflow: hidden;
}

main>* {
    align-items: center;
    color: white;
    opacity: 80%;
}

main>.col>.row {
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap-reverse;
}

main>.row>div {
    margin: 1rem;
}

.row {
    display: flex;
    flex-direction: row;
}

.col {
    display: flex;
    flex-direction: column;
}

.select-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
}

.weather-wrapper {
    display: none;
    width: 100%;
    flex: 1.5;
    align-items: center;
    justify-content: center;
}



#table-wrapper {
    display: flex;
    flex: 1;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

#table-wrapper>* {
    margin: 0.5rem;
}

#table-wrapper th {
    background-color: white;
    color: black;
    border-radius: 0.7rem;
    margin-inline: 1rem;
}

#table-wrapper td {
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-inline: 2rem;
}

#table-wrapper td,
#table-wrapper th {
    padding: 0.5rem;
    overflow: hidden;
    vertical-align: middle;
    white-space: nowrap;
}

#temps {
    display: none;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem;
    margin-top: 0;
}

#resposta {
    width: 100%;
    text-wrap: wrap;
    text-align: center;
    margin: 1rem;
    max-width: 15rem;
    flex-direction: column;
}

#resposta p {
    margin: 0
}

#weatherIcon {
    margin-top: 5px;
    max-width: 76px;
    max-height: 76px;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.6));
}

select {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgb(255, 255, 255);
    padding: 0.5rem;
    margin: 0.1rem 0 0.5rem 0;
    font-size: medium;
    font-weight: 600;
    border-radius: 0.6rem;
    color: rgb(255, 255, 255);
}

option {
    color: white;
    font-weight: normal;
    background-color: rgb(24, 25, 27);
}

hr {
    display: block;
    color: white;
    width: 100%;
    opacity: 50%;
}

h2 {
    margin: 0;
    font-size: medium;
    font-weight: 600;
}

.temperatura {
    font-size: 64px;
    font-weight: lighter;
    text-shadow: 0px 0px 10px rgb(255, 255, 255);
}

.temps {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-inline: 2rem;
}

.aq-wrapper {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.aq-wrapper>* {
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.aq-wrapper>.row {
    flex-wrap: wrap;
}

.aq-wrapper>.row>* {
    margin: 0.25rem 0.5rem;
    padding: 0.3rem 1rem;
    border-radius: 0.7rem;
    text-wrap: nowrap;
    flex: 1 1 0px;
}

.aq-wrapper>.row>span>b {
    margin-right: 0.5rem;
    font-size: large;
}

.text-bg {
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    background-color: white;
    color: black;
}

.data-hora {
    display: flex;
    width: 100%;
    align-items: center;
    font-size: small;
}

.display-bg {
    font-family: monospace;
    border: 1px solid white;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 0.15rem 0.75rem;
    border-radius: 1rem;
    margin-inline: 0.2rem;
}

#aqi {
    background-color: white;
    width: 100%;
    margin: 0.5rem 0 1rem 0;
    border-radius: 0.7rem;
    padding: 0.2rem;
}

#aqi.case1 {
    background-color: rgb(0, 178, 48);
    box-shadow: 0px 0px 10px 0px rgb(0, 207, 69);

}

#aqi.case2 {
    background-color: rgb(104, 178, 0);
    box-shadow: 0px 0px 10px 0px rgb(100, 193, 0);

}

#aqi.case3 {
    background-color: rgb(179, 161, 0);
    box-shadow: 0px 0px 10px 0px rgb(238, 255, 0);

}

#aqi.case3 {
    background-color: rgb(147, 81, 0);
    box-shadow: 0px 0px 10px 0px rgb(210, 95, 0);

}

#aqi.case4 {
    background-color: rgb(154, 0, 0);
    box-shadow: 0px 0px 10px 0px rgb(255, 0, 0);
}

#aqi.case5 {
    background-color: rgb(255, 0, 234);
    box-shadow: 0px 0px 10px 0px rgb(255, 0, 234);

}

#sensacao {
    font-size: small
}

#mensagem {
    min-width: 5rem;
    text-align: center;
    font-size: smaller;
}

#addr-cidade {
    font-size: medium;
    font-weight: 600;
}

#addr-estado {
    font-size: small;
}

@media only screen and (min-width: 1024px) {
    main {
        padding: 3rem;
        padding-top: 2rem;
        border-radius: 2rem;
        border: 1px solid white;
        width: max-content;
        max-width: 60vw;
        height: min-content;
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.4);

    }

    body {
        width: initial;
        justify-content: center;
        margin: 2rem;
    }
}

/* ============================== ANIMAÇÕES =============================== */

@property --top-color {
    syntax: '<color>';
    initial-value: rgb(79, 187, 230);
    inherits: false;
}

@property --bottom-color {
    syntax: '<color>';
    initial-value: rgb(0, 94, 156);
    inherits: false;
}

@property --degree {
    syntax: '<angle>';
    initial-value: 45deg;
    inherits: false;
}


main {
    /* Optional: change initial value of the variables */
    /* --myColor1: #f64; --myColor2: brown; */

    background: linear-gradient(var(--degree), var(--top-color), var(--bottom-color));
    transition: --top-color 3s, --bottom-color 3s, --degree 1s;
}

main.chuva {
    --top-color: rgb(39, 48, 49);
    --bottom-color: rgb(121, 142, 147);
    --degree: 180deg;
}

main.tarde {
    --top-color: rgb(131, 59, 138);
    --bottom-color: rgb(255, 146, 57);
    --degree: -165deg;
}

main.noite {
    --top-color: rgb(27, 58, 112);
    --bottom-color: rgb(0, 2, 21);
    --degree: -135deg;
}

#btn-salvarpdf {
    background: linear-gradient(var(--degree), var(--top-color), var(--bottom-color));
    display: inline-flex;
    color: white;
    border: 2px solid rgba(163, 255, 163, 0.5);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    --top-color: rgb(0, 180, 60);
    --bottom-color: rgb(0, 146, 66);
    --degree: 180deg;
    transition: --top-color 0.1s, --bottom-color 0.1s;
}

#btn-salvarpdf span {
    margin-right: 0.5rem;
}

#btn-salvarpdf:hover{
    --top-color: rgb(0, 144, 48);
    --bottom-color: rgb(0, 73, 33);
}
#btn-salvarpdf:active{
    --top-color: rgb(0, 38, 17);
    --bottom-color: rgb(0, 80, 43);
}