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

body {
    font-family: "Poppins", sans-serif;
    padding: 5%;
}

.navbar {
    float: left;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.btn, .btn:active, .btn:focus, .btn:hover, .btn:active:focus {
    background-color: transparent;
    border: none;
    padding: 0;
}


i {
    color: #7e7e7e;
}

h1 {
    font-size: 1.5em;
    margin-top: 1em;
}

.cards {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
}

.card {
    text-align: center;
    aspect-ratio: 1;
}

.card>img {
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
}
.carousel-inner {
    padding:1em;
    max-width: 2400px;
    margin: 0 auto;
    display: flex;
    gap: 0.5rem;
    grid-template-columns: repeat(3, 1fr);
}
.carousel-item{
    margin: right 0;
    flex: 0 0 33.333333%;
    display: block;
    box-shadow: 3px 5px 5px 0
}
.weatherForecast {
    overflow-x:auto;
    white-space: nowrap;

}
.weatherForecast .card {
    display: inline-block; 
    border: none;
    background: none;
}
.weather-icon {
    max-width: 150%;
    margin: 0 auto;
    display: block;
  }