body {

    --shadow: #3f4f5654;
    --font: #3F4F56;
    --blue: #08BBCF;
    --light_blue:#78dbe6;
    --yellow: #FCBE1F;
    --gray: #CFCFCF;
    --white: #FFFFFF;
    --white2: #FFFFFF;
    --l_blue: #52DCEC;
    --bg-search: var(--white2);

    margin: 0;
    color: var(--font);
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    transition: 0.3s ease;
    background-color: var(--white);
    animation: fadeIn 2s ease;
}

body.light {

    --shadow: #3f4f5654;
    --font: #3F4F56;
    --blue: #08BBCF;
    --light_blue:#78dbe6;
    --yellow: #FCBE1F;
    --gray: #CFCFCF;
    --white: #FFFFFF;
    --white2: #FFFFFF;
    --l_blue: #52DCEC;
    --line_g: #0000003f;

    background-color: var(--white);

    .shadow{
        box-shadow: 4px 5px 7px var(--shadow);
        border-radius: 0.5rem;
        transition: 0.3s ease;
    }

    .shadow:hover {
        transform: translateY(-5px);
        box-shadow: 4px 7px 13px var(--shadow);
    }
}

body.dark {

    --shadow: rgba(0,0,0,0.5);
    --font: #ffffff;
    --blue: #52DCEC;
    --light_blue:#52dcecce;
    --yellow: #FCBE1F;
    --gray: #FFFFFF;
    --white: #3F4F56;
    --white2: #323F45;
    --l_blue: #08BBCF;
    --line_g: #ffffff3f;
    
    background-color: var(--white);

    .shadow{
        box-shadow: none;
        background-color: var(--white2);
        border-radius: 0.5rem;
        transition: 0.3s ease;
    }

    .shadow:hover {
        transform: translateY(-5px);
    }
}

/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/

/* ANIMAÇÕES HOVER*/

.shadow:hover,
div#temp_prin:hover #icon_side_1 {
    > svg {
        #nuvem path, #nevoa, #bola_r {
            stroke-dasharray: 500;
            stroke-dashoffset: 0;
            animation: icon_ani_path 0.5s ease;
        }

        #bola {
            animation: icon_ani_bola 0.5s ease;
        }

        #chuva, #raio {
            animation: icon_ani_chuva 0.5s ease;
        }

        #neve {
            transform-origin: 50% 50%;
            animation: icon_ani_neve 0.5s ease;
        }
    }
}


/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/

/* TELA DE ERRO */

div#error {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    font-size: 10px;
    text-align: center;
    margin: 0;
    padding: 2rem;
    box-sizing: border-box;
    gap: 2rem;

    h1{
        font-size: 2.5rem;
    }

    h2{
        font-size: 1.5rem;
    }

    p{
        margin: 2rem 0 1rem;
        font-size: 1rem;
    }

    button{
        background: var(--l_blue);
        border: none;
        padding: 0.5rem 1rem;
        color: var(--white);
        border-radius: 1rem;
        cursor: pointer;
        border: 1px solid var(--l_blue);
        transition: 0.3s ease;
    }

    button:hover{
        background-color: var(--white);
        color: var(--l_blue);
    }

    svg{
        path, circle{
            stroke-dasharray: 500;
            stroke-dashoffset: 0;
            animation: icon_ani_path 1s ease;
        }
    }

}


/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

/* TELA DE CARREGAMENTO */

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 111;
}

#loading-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}



#sol_s{
    stroke-dasharray: 150;
    stroke-dashoffset: 0;
    animation: sun 5s infinite;
  }

  @keyframes sun {
    0% {
      stroke-dashoffset: -150;

    }

    20%{
      stroke-dashoffset: -150;

    }

    40%{
      stroke-dashoffset: -150;

    }

    70%{
      stroke-dashoffset: 0;

    }

    80%{
      stroke-dashoffset: 0;

    }

    100%{
      stroke-dashoffset: -150;

    }
  }

  /*----------*/

  #raio_sol{
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    animation: sun_r 5s infinite;
  }

  @keyframes sun_r {
    0% {
      opacity: 0;

    }

    20%{
      opacity: 0;

    }

    40%{
      opacity: 0;

    }

    70%{
      opacity: 1;

    }

    80%{
      opacity: 1;

    }

    100%{
      opacity: 0;
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  /*-----------------------------------------------------------------------*/
  /*-----------------------------------------------------------------------*/
  /*-----------------------------------------------------------------------*/
  /*chuva*/
  

  #agua path {
    stroke-dasharray: 10;
    stroke-dashoffset: 5;
    animation: dash 1s infinite;
  }

  @keyframes dash {
    100% {
      stroke-dashoffset: -15;
    }
  }

  /*----------*/

  #agua{
      animation: dash_a 5s infinite;
  }

  @keyframes dash_a {
    0% {
      opacity: 0;
    }

    20%{
      opacity: 1;
    }

    40% {
      opacity: 1;
    }

    60% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  /*----------*/

  #nuvem_l path {
    stroke-dasharray: 500;
    stroke-dashoffset: 0;
    animation: dash_i 5s infinite;
  }

  @keyframes dash_i {
    0% {
      stroke-dashoffset: -500;

    }

    20%{
      stroke-dashoffset: 0;

    }

    40%{
      stroke-dashoffset: 0;

    }

    60%{
      stroke-dashoffset: -500;

    }

    100%{
      stroke-dashoffset: -500;

    }
  }

/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

/* CSS GERAL */

p{
    margin: 0;
}

h1, h2, h3 {
    font-weight: 300;
    margin: 0;
}

h2{
    font-size: 1.7rem;
}

h3 {
    margin: 2rem 0 0;
}

#light_i path, #night_i path, a svg path{
    transition: 0.3s ease;
}

#toggle-button:hover #light_i path{
    stroke: var(--yellow);
}

#toggle-button:hover #night_i path{
    stroke: var(--blue);
}

a:hover svg path{
    fill: var(--blue);
}

/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/

/* CSS PRINCIPAL */

div#main {
    display: flex;
    height: 100vh;
}

div#side_1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    text-align: center;
    box-shadow: 2px 0 10px var(--shadow);
    padding: 30px;

    button {
        background-color: unset;
        border: none;
        cursor: pointer;
        height: 100%;
        width: 100%;
        padding: 0;
    }

    #side_cont{
        flex: 11;
        display: flex;
        flex-direction: column;
    }

    #btn_ref{
        display: flex;
        width: 100%;
        align-items: center;
        gap: 0.5rem;

        #refresh{
            width: 1.5rem;
        }
    }

    #search_b{
        display: flex;
        align-items: center;
        width: 100%;
        gap: 1.5rem;
        margin-bottom: 2rem;
        flex: 1;
        justify-content: space-between;

        #search_bar{
            width: 100%;
            position: relative;

            input#search {
                background-color: var(--white);
                border-radius: 0.7rem;
                width: 100%;
                height: 3rem;
                border: 0.15rem solid var(--font);
                padding: 0.3rem 0.6rem;
                color: var(--font);
                box-sizing: border-box;
                transition: 0.3s ease;
            }

            input#search:focus{
                outline: none;
                border-color: var(--blue);
                background-color: var(--bg-search);
            }
            
            input#search::placeholder{
                color: var(--font);
                opacity: 0.5;
            }

            div#suggestions {
                position: absolute;
                left: 50%;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                width: 100%;
                background: var(--bg-search);
                display: flex;
                flex-direction: column;
                align-items: center;
                border-radius: 0.5rem;
                z-index: 1;
                box-shadow: 2px 3px 7px var(--shadow);
                padding: 0 1rem;
                box-sizing: border-box;

                .suggestion-item {
                    width: 100%;
                    padding: 1rem;
                    box-sizing: border-box;
                    cursor: pointer;
                    transition: 0.3s ease;
                }

                .suggestion-item:hover{
                    color: var(--blue);
                }

                hr{
                    margin: 0;
                    width: 100%;
                }
            }
        }

        #btn_l_n{

            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 2.5rem;
            height: 2.5rem;
        }
    }

    div#header_side_1 {
        width: 100%;
        text-align: left;
        flex: 1;

        h1{
            font-size: 1rem;
        }
    }

    div#temp_prin {
        display: flex;
        align-items: center;
        gap: 3rem;
        flex: 6;

        #icon_side_1{
            width: 10rem;
            max-height: 10rem;
            flex: 1;
        }
    
        #temp_side_1 {
            display: flex;
            flex-direction: column;
        }
    }

    #temp_s_m{
        font-size: 4rem;
    }

    #temp_s_mi_ma{
        margin: 0;
        font-size: 1.5rem;
        display: flex;
        justify-content: center;
        gap: 2rem;

        span:nth-child(1){
            padding-left: 0.8rem;
        }
    
        span:nth-child(1)::before{
            left: -0.8rem;
        }
    
        span:nth-child(2){
            padding-right: 0.8rem;
        }
    
        span:nth-child(2)::after{
            right: -0.8rem;
        }
    }

    #footer_side_1 {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        font-weight: 300;
        flex: 1;

        div{
            display: flex;
            align-items: center;

            p{
                span{
                    font-weight: 600;
                }
            }
        }

        svg{
            width: 2rem;
            margin-right: 1rem;
        }
    }
}

/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/

/* CARDS DIAS DA SEMANA */

.item_s_temp {
    display: flex;
    justify-content: space-around;
    margin-top: 0.5rem;
    font-size: 1.2rem;
    width: 100%;

    span:nth-child(1){
        position: relative;
        padding-left: 0.6rem;
    }

    span:nth-child(1)::before{
        position: absolute;
        left: -0.6rem;
        content: '➜';
        transform: rotate(270deg);
        font-weight: 900;
        color: var(--yellow);
    }

    span:nth-child(2){
        position: relative;
        padding-right: 0.6rem;
    }

    span:nth-child(2)::after{
        position: absolute;
        right: -0.6rem;
        content: '➜';
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        font-weight: 900;
        color: var(--blue);
    }
}

/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/
/*--------------------------------------------------*/

div#side_2 {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 60px;
    overflow-y: scroll;
    position: relative;

    h1{
        margin-bottom: 1rem;
    }

    div#sec_1{
        padding: 0.7rem;
    }
    
    div#sec_2{
    
        #itens_sec_2 {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
    
            .item_s{
                padding: 0.7rem;
                display: flex;
                flex-direction: column;
                text-align: center;
                flex: 1;
                align-items: center;
    
                .item_s_rain {
    
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 0.5rem;
    
                    svg{
                        width: 1.7rem;
                    }
                }
            }

            .item_s > svg{
                width: 5rem;
                margin: 0.5rem 0;
                max-height: 5rem;
                padding: 0.5rem;
                box-sizing: border-box;
            }
    
            .item_s > span:nth-child(1){
                font-weight: 600;
            }
        }
    }

    div#sec_3 {
        #items_s_3 {
            display: flex;
            justify-content: space-between;

            h3{
                margin: 0;
            }

            .item_sec_3{
                padding: 1rem;
                width: 12rem;
                height: 12rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                /*--------------------------------------------------------------*/

                /* POR DO SOL */

                #sun_cont{
                    padding: 0 0.5rem;

                    #sun_bar{
                        display: flex;
                        justify-content: center;
                        padding: 0.7rem;
                        overflow: hidden;
                        max-height: 5rem;
                    }

                    #sun_info{
                        display: flex;
                        justify-content: space-between;
                    }

                }

                /*--------------------------------------------------------------*/

                /* VENTO */

                div#buss-cont{
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;

                    #bussola_v {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        align-items: center;
                        position: relative;
                    }
    
                    #vento_info{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        gap: 1rem;
    
                        svg{
                            width: 2rem;
                        }
                    }
                }

                /*--------------------------------------------------------------*/

                /* PRECIPTAÇÃO */

                div#prec_cont {
                    text-align: center;

                    #prec_info{

                        svg {
                            -webkit-transform: translate(2rem, 1rem);
                            transform: translate(2rem, 1rem);
                            max-height: 8rem;
    
                            #water path {
                                animation-iteration-count: infinite;
                                animation-timing-function: linear;
                                animation-duration: 3s;
                            }
                        }
                    }
                }
                
                /*--------------------------------------------------------------*/

                /* UV */

                #uv_cont{
                    display: flex;
                    justify-content: center;
                    position: relative;

                    #uv_info{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        flex: 2;
                        gap: 1rem;

                        span:nth-child(1){
                            font-size: 3.5rem;
                            font-weight: 500;
                        }

                        span:nth-child(2){
                            font-size: 1.5rem;
                        }
                    }

                    #uv_level {
                        height: 100%;
                        width: 1.5rem;
                        flex: 1;
                        display: flex;
                        justify-content: center;


                        #back_level{
                            height: 100%;
                            width: 1.5rem;
                            background-color: var(--gray);
                            border-radius: 1.5rem;
                            overflow: hidden;
                            display: flex;
                            align-items: end;

                            #front_level{
                                width: 100%;
                                border-radius: 0 0 1.5rem 1.5rem;
                            }
                        }
                    }
                }
            }
        }  
    }  
}

div#side_2 > div {
    margin-bottom: 3rem;
}

/*--------------------------------------------------------------*/

/* FOOTER */

footer{

    text-align: center; 
    font-size: 0.7rem; 
    margin: 5rem 1rem 0;

    div{
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 2rem;

        a{
            width: 2rem;
        }
    }
}

/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/

/* ANIMAÇÕES */
/*--------------------------------------------------------------*/


/* FADE-IN */

@keyframes fadeIn {
    0% { opacity: 0; }
}

/*--------------------------------------------------------------*/

/* ÁGUA */

@keyframes waveAction00 {
    0% {
        -webkit-transform: translate(0, 60px);
        transform: translate(0, 60px);
    }
    100% {
        -webkit-transform: translate(0, 60px);
        transform: translate(0, 60px);
    }
}

@keyframes waveAction01 {
    0% {
        -webkit-transform: translate(0, 30px);
        transform: translate(0, 30px);
    }
    100% {
        -webkit-transform: translate(-66px, 30px);
        transform: translate(-66px, 30px);
    }
}

@keyframes waveAction02 {
    0% {
        -webkit-transform: translate(0, -10px);
        transform: translate(0, 10px);
    }
    100% {
        -webkit-transform: translate(-66px, -10px);
        transform: translate(-66px, 10px);
    }
}

@keyframes waveAction03 {
    0% {
        -webkit-transform: translate(0, -10px);
        transform: translate(0, -10px);
    }
    100% {
        -webkit-transform: translate(-66px, -10px);
        transform: translate(-66px, -10px);
    }
}

/*--------------------------------------------------------------*/

/* HOVER ICONES */

@keyframes icon_ani_path {
    0% {
      stroke-dashoffset: -500;
    
    }
}

@keyframes icon_ani_neve {
    50% {
        transform: rotate(45deg);
    }
}

@keyframes icon_ani_chuva {
    0% {
      transform: translateY(-25px);
      opacity: 0;
    }
}

@keyframes icon_ani_bola {
    0% {
      transform: translateX(-25px);
      opacity: 0;
    }
}

/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/

/* CCS MOBILE */

@media (max-width: 1440px) {

    #items_s_3{
        display: grid !important;
        gap: 1rem;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        justify-items: center;

        .item_sec_3{
            width: 100% !important;
            box-sizing: border-box;

            #sun_cont {
                max-width: 11.5rem;
                margin: auto;
            }

            div#buss-cont {
                flex-direction: row !important;
                gap: 2rem !important;
                justify-content: space-evenly;
                height: 100%;

                #vento_info {
                    flex-direction: column;
                }
            }

            div#prec_cont {
                display: flex;
                align-items: center;
                position: relative;
        
                #prec_info {
                    width: 100%;
                    overflow: hidden;
                    flex: 1;
        
                    svg{
                        width: 100%;
                        min-width: 18rem;
                        overflow: hidden;
                    }
                }

                span{
                    flex: 1;
                    font-size: 1.2rem;
                }
            }

            #uv_level {
                padding: 1rem 0;
                box-sizing: border-box;
            }
        }
    }

}

@media (max-width: 1350px) {

    #itens_sec_2{
        overflow-x: scroll;
        white-space: nowrap;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding: 0.7rem 0.5rem !important;
    }

    #itens_sec_2::-webkit-scrollbar {
        display: none;
    }

    .item_s{
        min-width: 7rem;
    }

}

@media (max-width: 1250px) {

    div#main{
        flex-direction: column;

        div#side_1{
            flex-direction: column;

            #search_b{
                flex: none;
            }

            #side_cont {
                flex: none;
                display: flex;
                width: 100%;
                align-items: center;
                flex-direction: row;
                justify-content: space-between;

                div#header_side_1{
                    text-align: left;
                    flex: none;
                    width: initial;
                }
        
                div#temp_prin{
                    flex: none;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;

                    #icon_side_1 {
                        flex: none;
                        max-width: 8rem;

                        svg{
                            display: flex;
                        }
                    }
                }

                #footer_side_1 {
                    margin: 0;
                    flex: none;
                    align-items: flex-end;
                }
            }
        }
    }

    div#sec_1{
        overflow-y: scroll;
        white-space: nowrap;
        -ms-overflow-style: none;
        scrollbar-width: none;

        div{
            min-width: 800px;
        }
    }

    div#sec_1::-webkit-scrollbar {
        display: none;
    }

    div#side_1, div#side_2{
        flex: none;
    }

    div#side_2{
        overflow-y: initial;
        position: initial;
    }

    div#prec_cont {

        #prec_info {
            flex: 2 !important;
        }
    }

}

@media (max-width: 900px) {

    div#main{
        gap: 2rem;
    }

    div#side_1 {
        padding: 2rem 1rem !important;
        height: initial !important;
        align-items: normal !important;
        gap: 3rem !important;

        #search_b{
            margin: 0 !important;
        }

        #side_cont{
            flex-direction: column !important;
            align-items: initial !important;
            gap: 3rem !important;

            div#temp_prin {
                justify-content: center !important;

                #icon_side_1 {
                    max-width: 7rem;
                }
            }

            #footer_side_1 {
                align-items: center !important;
                
                div{
                    justify-content: flex-start;
                    width: 100%;
                }
            }
        }
    }

    div#side_2{
        h1:nth_child(1), h1:nth-child(3){

            margin-bottom: 1.7rem;

        }
    }

    #items_s_3{
        display: flex !important;
        flex-direction: column !important;
    }

}

@media (max-width: 500px) {

    div#temp_prin{
        justify-content: space-around !important;

        #icon_side_1 {
            max-width: 5rem !important;
        }

        #temp_s_m {
            font-size: 3.5rem;
        }

        #temp_s_mi_ma{
            gap: 1rem;
        }
    }

    div#side_2 {
        padding: 1.3rem 0;

        > h1{
            margin-left: 1rem;
        }

        #sec_1{
            border-radius: inherit;
        }

        div#sec_2, div#sec_3 {
            padding: 0 1rem;
        }

        #prec_info {

            svg{
                transform: translate(-2rem, 1rem) !important;
                -webkit-transform: translate(-2rem, 1rem) !important;
            }
        }
    }
}