@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');


html, body {
    margin: 0;
    padding: 0;
    font-family: 'Sora', sans-serif;
}

#container {
    display: grid;
    grid-template: auto 2fr 1fr / 1fr 1fr;
    align-content: space-between;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    gap: 10vh;
}

#search-container {
    grid-area: 1 / 1 / 1 / 1;
    display: flex;
    width: fit-content;
    height: fit-content;
    margin-left: 5vw;
    margin-top: 5vh;
    justify-content: center;
    align-content: center;
    gap: 1rem;
}

#weather-search {
    height: 3rem;
    font-size: 1.5rem;
    font-family: "Sora";
    align-self: center;
    border-radius: .5rem;
    background-color: rgba(255, 255, 255, 0.3);
    color: black;
    border: .15rem solid white;
    padding-left: .5rem;
}

#weather-search:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

#weather-search:focus {
    outline: none;
    border: .15rem solid gray;
    background-color: rgba(255, 255, 255, 0.8);
}

#weather-search::placeholder {
    color: rgb(40, 40, 40)
}

#weather-search:focus::placeholder {
    opacity: .15;
}

#fetch-new-weather {
    height: fit-content;
    width: fit-content;
    padding: 1rem;
    align-self: center;
    border-radius: .5rem;
    font-family: "Sora";
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.8);
    border: .1rem solid gray;
    cursor: pointer;
}

#fetch-new-weather:hover {
    background-color: rgb(255, 255, 255);
}

#fetch-new-weather:active {
    background-color: rgba(197, 197, 197, 0.8);;
}

#toggle-degrees {
    height: fit-content;
    width: fit-content;
    padding: .9rem;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    font-weight: 900;
    border-radius: .5rem;
    border: .1rem solid gray;
    cursor: pointer;
    align-self: center;
}

#toggle-degrees:hover {
    background-color: rgb(255, 255, 255);
}

#toggle-degrees:active {
    background-color: rgba(197, 197, 197, 0.8);
}

#today-weather-info-card {
    grid-area: 2 / 1 / 2 / 1;
    display: grid;
    grid-template: repeat(5,auto) / 1fr 1fr;
    padding: 1rem;
    height: fit-content;
    width: fit-content;
    margin-left: 5vw;
    gap: 1rem;
    background-color: rgba(240, 248, 255, 0.406);
    border-radius: 1rem;
}

#location {
    grid-area: 1 / 1 / 1 / 1;
    font-weight: 700;
    font-size: 2rem;
}

#local-time {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}

#local-time-data {
    font-size: 1.5rem;
    font-weight: 700;
}

#temperature {
    grid-area: 2 / 1 / 4 / 1;
    font-weight: 800;
    font-size: 5rem;
    align-self: center;
}

#weather-state {
    grid-area: 2 / 2 / 2 / 3;
    font-size: 2rem;
    font-weight: 500;
    justify-self: center;
    display: flex;
    gap: 1rem;
}

#weather-state-label {
    align-self: center;
}

#weather-state-image {
    display: inline;
    
}

#feels-like {
    grid-area: 3 / 2 / 3 / 3;
    font-size: 1.5rem;
    justify-self: center;
    width: 100%;
}

#im-a-line {
    grid-area: 4 / 1 / 4 / 3;
    border-bottom: .2rem solid rgba(255, 255, 255, 0.5);
    width: 100%;
    height: fit-content;
}

#max-temp {
    grid-area: 5 / 1 / 5 / 1;
    font-size: 1.5rem;
    gap: 1rem;
    display: flex;
    justify-content: space-between;
}

#min-temp {
    grid-area: 5 / 2 / 5 / 3;
    font-size: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

#wind {
    grid-area: 6 / 1 / 6 / 1;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
}

#kmh-label {
    font-size: 1rem;
    display: inline;
}

#humidity {
    grid-area: 6 / 2 / 6 / 3;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* #visibility {
    grid-area: 7 / 1 / 7 / 1;
    font-size: 1.5rem;
    justify-self: left;

}

#pressure {
    grid-area: 7 / 2 / 7 / 3;
    font-size: 1.5rem;
    justify-self: left;

} */

#daily-hourly-cards {
    grid-area: 3 / 1 / 3 / 3;
}

#loading-animation {
    display: inline;
    width: 80px;
    height: 80px;
    position: fixed;
    left: 50%;
    top: 50%;
  }
#loading-animation:after {
    content: " ";
    display: block;
    width: 10rem;
    height: 10rem;
    margin: 1rem;
    border-radius: 50%;
    border: 1rem solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: loading-animation 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}