@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #000;
}

.text-container {
    height: 25vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: #0284c7; */
  }
  
  .text-container h1{
    margin: 0;
    font-size: 100px;
    color: rgba(225,225,225, .01);
    background-image: url("https://images.unsplash.com/photo-1580193813605-a5c78b4ee01a?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-repeat: repeat;
    -webkit-background-clip:text;
    animation: animate 20s ease-in-out infinite;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
  }
  
    @keyframes animate {
      0%, 100% {
        background-position: left top;
      }
      25%{
        background-position: right bottom;
       }
      50% {
        background-position: left bottom;
      }
      75% {
        background-position: right top;
      }   
  }

.hidden {
    display: none;
}

body.clear-sky {
    background: linear-gradient(to top, #87CEEB, #B0E0E6); /* Fundo do céu */
    position: relative;
}

body.clear-sky::before {
    content: "";
    position: absolute;
    bottom: -100px; /* Posiciona o sol fora da tela inicialmente */
    left: 2%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle at center, #FFD700, #FFA500); /* Estilo do sol */
    border-radius: 50%;
    animation: sunRise 5s ease-in-out forwards; /* Animação de nascer do sol */
    z-index: -1;

}

body.clear-sky::after {
    content: "";
    position: absolute;
    bottom: -100px; /* Posiciona o sol fora da tela inicialmente */
    left: 70%;
    transform: translateX(-50%);
    width: 200px;
    height: 100px;
    background: radial-gradient(circle at 20% 20%, #FFFFFF, #F0F0F0 60%, transparent 80%); /* Estilo de nuvem */
    border-radius: 50%;
    animation: sunRise 5s ease-in-out forwards; /* Animação */
    z-index: -1;
}

@keyframes sunRise {
    0% {
        bottom: -100px; /* Começa fora da tela */
    }
    100% {
        bottom: 82%; /* Chega até o meio do céu */
    }
}


body.partly-cloudy {
    background: linear-gradient(to top, #f0f8ff, #e6f0f8);
    color: #000000; 
}

body.partly-cloudy #weather #title{
    color: #000;
}

body.partly-cloudy #forecast h2{
    color: #000;
}

body.cloudy {
    background: linear-gradient(to bottom, #b3b3b3, #e0e0e0);
    background-size: cover;
    background-repeat: no-repeat;
    animation: moveClouds 20s linear infinite;
}
@keyframes moveClouds {
    0% { background-position: 0 0; }
    100% { background-position: 100% 0; }
}

body.light-rain {
    background: linear-gradient(to bottom, #a3c1d1, #d9e7f2);
    background-size: cover;
    background-repeat: no-repeat;
    animation: drizzle 2s linear infinite; 
}

@keyframes drizzle {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

body.moderate-rain {
    background: linear-gradient(to top, #9fc3c4, #c3d6d7); 
}

body.heavy-rain {
    background: linear-gradient(to top, #7a9a9f, #9ab7b9); 
}

body.torrential-rain {
    background: linear-gradient(to top, #6b8e8d, #8da4a6); 
}

body.light-snow {
    background: linear-gradient(to top, #f0f8ff, #e6f0f8); 
}

body.moderate-snow {
    background: linear-gradient(to top, #d9e9f2, #b0d0e0); 
}

body.heavy-snow {
    background: linear-gradient(to top, #b0c4de, #a0bcd0);
}

body.hail {
    background: linear-gradient(to top, #c6e0f5, #a3c6f5);
}

body.fog {
    background: linear-gradient(to top, #d3d3d3, #c0c0c0); 
}

body.storm {
    background: linear-gradient(to top, #708090, #2f4f4f); 
}

body.strong-wind {
    background: linear-gradient(to top, #a0b0b0, #8b9e9e); 
}

/* Se necessário, ajuste a animação da chuva */
body.rainy .rain {
    display: block; 
}

body:not(.rainy) .rain {
    display: none; 
}

.rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.drop {
    position: absolute;
    width: 5px;
    height: 30px;
    background: rgba(255, 255, 255, 0.5);
    bottom: 100%;
    animation: fall linear infinite;
}

/* Animação da chuva */
@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}

/* Geração de múltiplas gotas de chuva */
.drop:nth-child(1) { left: 10%; animation-duration: 0.5s; animation-delay: 0s; }
.drop:nth-child(2) { left: 20%; animation-duration: 0.6s; animation-delay: 0.2s; }
.drop:nth-child(3) { left: 30%; animation-duration: 0.7s; animation-delay: 0.4s; }
.drop:nth-child(4) { left: 40%; animation-duration: 0.8s; animation-delay: 0.6s; }
.drop:nth-child(5) { left: 50%; animation-duration: 0.9s; animation-delay: 0.8s; }
.drop:nth-child(6) { left: 60%; animation-duration: 1s; animation-delay: 1s; }
.drop:nth-child(7) { left: 70%; animation-duration: 1.1s; animation-delay: 1.2s; }
.drop:nth-child(8) { left: 80%; animation-duration: 1.2s; animation-delay: 1.4s; }
.drop:nth-child(9) { left: 90%; animation-duration: 1.3s; animation-delay: 1.6s; }
.drop:nth-child(10) { left: 95%; animation-duration: 1.4s; animation-delay: 1.8s; }

/* Mais gotas para um efeito mais denso */
.drop:nth-child(n+11):nth-child(-n+20) {
    left: calc(5% + (90% - 5%) * random());
    animation-duration: calc(0.5s + 1s * random());
    animation-delay: calc(0s + 2s * random());
}

#container{
    /* background-color: #f0f8ff; */
    border-radius: 20px;
    padding: 18px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: 40px;
}

#search{
    display: flex;
    align-items: center;
    width: 50%; /* Ajuste a largura conforme necessário */
    max-width: 400px; /* Largura máxima */
    padding: 10px;
    border-radius: 20px;
    background-color: #e6f1f9; /* Cor de fundo */
    box-shadow: 0 10px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin: 50px 0 0px 0;
    position: relative; /* Pode ser necessário para garantir o posicionamento correto */
}

#search input{
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    padding: 0 10px;
}

#search input:focus-visible{
    outline: none;
}

#search button{
    border: none;
    background: none;
    cursor: pointer;
    padding: 0 10px;
    font-size: 18px;
}

#weather{
    margin-top: 20px;
    display: none;
    background: rgba(255, 255, 255, 0.1);
    width: 25rem;
    padding: 30px 20px;
    border-radius: 15px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
    
}

#weather.show{
    display: block;
}

#weather #title{
    text-align: center;
    margin-bottom: 5px;
    font-weight: 600;
    color: #ffffff;
}

#temp{
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    background: linear-gradient(90deg, #5a7cdc, #606dde);
    color: #fff;
    border-radius: 20px;
    padding: 20px;
}

#temp_img{
   filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2)); 
}

#temp_value{
    font-weight: bold;
    font-size: 50px;
    line-height: 55px;
}

#temp_description{
    font-weight: 500;
    text-transform: capitalize;
}

#other_infos{
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#other_infos .info{
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 4px 10px;
    border-radius: 8px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    gap: 10px;
}

#other_infos .info h2{
    font-size: 12px;
    font-weight: 600;
}

#other_infos .info i{
    text-align: center;
    font-size: 20px;
    width: 20%;
}

#temp_max_icon{
    color: #7f1d1d;
}

#temp_min_icon{
    color: #0284c7;
}

#humidity_icon{
    color: #0284c7;
}

#wind_icon{
    color: #7c3aed;
}

#forecast {
    margin-top: 20px;
    display: none;
}

#forecast.show {
    display: flex;
    flex-direction: column;
    align-items: center;
}


#forecast {
    display: none;
}

#forecast h2 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#forecast-days {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    
}

.forecast-day {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px;
    width: 150px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.forecast-day img {
    width: 50px;
}

.forecast-day p {
    margin: 5px 0;
}

.menu-bar {
    width: 100%;
    background-color: #333;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; 
}

.menu-bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
}

.menu-bar li {
    margin: 0;
}

.menu-bar a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
}

.menu-bar a:hover {
    background-color: #575757; /* Cor de fundo ao passar o mouse */
}

#title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#favorite-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #8a8a8a; /* Cor padrão da estrela */
    margin-left: 10px;
}

#favorite-btn:hover {
    color: #ffd700; /* Cor para destacar o botão ao passar o mouse */
}

#favorite-btn.favorited {
    color: #ffd700; /* Cor para indicar que a cidade está favoritada */
}

.city-name {
    display: flex;
    justify-content: center;
    align-items: center;
}

#horario-local {
    display: block; /* Ou flex, dependendo do layout desejado */
}

@media (max-width: 768px) {
    /* Seletores mais específicos e ajustes adicionais */
    .mobile-container h1 {
      font-size: 2rem; /* Utilizando unidades relativas */
      text-align: center;
    }
  
    #temp {
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 20px;
        background: linear-gradient(90deg, #5a7cdc, #606dde);
        color: #fff;
        font-size: 1.2rem;
        border-radius: 20px;
        padding: 20px;
    }
  
    #temp_value {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
  
    #other_infos {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
  
    #search {
      width: 80%;
      margin: 0 auto; 
    }
  
    .menu-bar ul {
      flex-direction: column;
      text-align: center;
    }
  
    body {
      font-size: 16px;
      line-height: 1.5;
    }
  
    .container {
      max-width: 90%;
      margin: 0 auto;
    }

    .menu-bar ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        font-family: 'Raleway', sans-serif;
        font-size: 18px;
        
    }

    .text-container h1 {
        font-size: 70px;
    }
  
    #forecast-days{
        display: flex;
        flex-direction: row;   
    }

    .forecast-day{
        width: 135px;
    }

    .container{
        height: 100%;
    }
}

@media (max-width: 480px) {

    .menu-bar ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        font-family: 'Raleway', sans-serif;
        font-size: 10px;
        
    }

    .text-container h1 {
        font-size: 50px;
    }

    #search {
        width: 90%;
        margin: 0 auto; 
    }
}

#compare-results {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.city-result {
    border: 1px solid #ccc;
    padding: 10px;
    width: 45%;
    background: #f9f9f9;
    text-align: center;
    border-radius: 5px;
}

.comparacao{
    background-color: #414141;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 30px;
    border: solid 1px white;
    border-radius: 10px;
    box-shadow: 0 8px 15px rgb(182, 182, 182);
    margin: auto;
    transition: transform 0.7s, box-shadow 0.7s;
    margin-top: 150px;
}

.comparacao:hover {
    transform: translateY(-5px); /* Eleva o quadrado ao passar o mouse */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3); /* Sombra mais intensa no hover */
}

.cidades{
    /* background-color: #7f1d1d; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
    gap: 8px;
}

.cidades input{
    width: 100%;
    border-radius: 20px;
    border: none;
}

#city1{
    padding: 10px;
    /* background-color: #7c3aed; */
}

#city2{
    padding: 10px;
}

#compare-btn{
    background-color: #FFFFFF;
    border: #000;
    display: flex;
    padding: 9px;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 10px;
    color: rgb(0, 0, 0);
    font-weight: 600;
    font-size: larger;
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#compare-btn:hover{
    background-color: #333333;
    color: white;
    box-shadow: 0 5px 10px rgb(139, 139, 139); /* Sombra ao passar o mouse */
    transform: translateY(-2px); /* Eleva levemente o botão */
}

input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}
#city1::placeholder,
#city2::placeholder {
    color: #999;
}