style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 1.2px;
}


body {
    height: 100vh;
    display: flex;
    display: -webkit-flex;
    background-size: cover;
    flex-direction: column;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 62%;
    color: white;
    background-size: cover;
    background-color: rgba(5, 5, 5, 0.856);
    align-content: center;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

h1 {
    font-size: 1.1em;
}

.location {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 3em;
    
}

.current-date {
    font-size: 2em;
    border-left: 1px solid white;
    padding-left: .8em;
    margin-left: .8em;
}

.temperature {
    width: 70%;
    display: inline-block;
    text-align: center;
}



.degree-section {
    display: inline-block;
    left: auto;
    right: auto;
    cursor: pointer;
}

.degree-section span {
    display: inline-block;
    margin-left: .5em;
    font-size: 3.5em;
}

.degree-section h2 {
    display: inline-block;
    font-size: 7em;
    margin: auto;
}

.temperature-description {
    font-size: 3em;
}

.daily-description {
    margin-top: .5em;
    font-size: 1.6em;
    text-align: center;
    margin-bottom: 3em;
    
}

/* today summary section */
.today-section {
    width: 92%;
    display: flex;
    border-radius: 1em;
    background: rgba(32, 31, 31, 0.945);
    flex-direction: column;  
    margin-bottom: 1em;  
}


.today-section p {
    color: rgb(255, 255, 255);
    font-size: 1.6em;
    padding: .8em 1.2em;
    margin-top: auto;
    border-bottom: .1em solid rgba(56, 56, 56, 0.24);
    letter-spacing: 1.5px;
}


.today-summary {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2em 1.5em;
    
}

.precipitationSection, .windSection, .tempSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: .1em solid rgba(56, 56, 56, 0.24);

}

#precipitation, #wind, #dailyTemp {
    font-size: 1.6em;
    padding-bottom: .2em;
}

#precipSummary, #windSummary, #tempSummary {
    font-size: 1.3em;
    letter-spacing: normal;
}

/* Weekly section  */
#weeklyHeader {
    font-size: 1.6em;
    padding: .8em 1.2em;
    margin-top: auto;
    border-bottom: .1em solid rgba(56, 56, 56, 0.24);
    letter-spacing: 1.5px;
}

.weekly { 
    width: 92%;
    display: flex;
    border-radius: 10px;
    background: rgba(32, 31, 31, 0.945);
    /* box-shadow: 0 10px 6px -6px rgba(20, 20, 20, 0.596); */
    flex-direction: column;
  
}

.weekly > div {
    color: rgb(255, 255, 255);
    font-size: 1.4em;
    padding: .8em 1.2em;
    border-bottom: .1em solid rgba(56, 56, 56, 0.24);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#dayOneDay, #dayTwoDay, #dayThreeDay, #dayFourDay, #dayFiveDay, #daySixDay, #daySevenDay {
    width: 30%;
}


#dayOneTemp, #dayTwoTemp, #dayThreeTemp, #dayFourTemp, #dayFiveTemp, #daySixTemp, #daySevenTemp {
    text-align: end;
    width: 30%;
}



.bg-cloudy {
    background-image: url('https://images.unsplash.com/photo-1479688895406-3f032f15f0ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');

}

.bg-partly-cloudy-day {
    background-image: url('https://www.keremeosreview.com/wp-content/uploads/2019/08/17960027_web1_190731-ok-shu-weather-tues.jpg');
}

.bg-partly-cloudy-night {
    background-image: url('https://i.pinimg.com/originals/82/82/6c/82826c36941bafde93f3598ac41931b6.jpg');
}

.bg-rain {
    background-image: url('https://images.unsplash.com/photo-1417008914239-59b898b49382?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1364&q=80');
}

.bg-sunny {
    background-image: url('https://images.unsplash.com/photo-1531147646552-1eec68116469?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
}

.bg-clear-night {
    background-image: url('https://cdn.pixabay.com/photo/2017/06/08/06/03/british-columbia-2382640_960_720.jpg');
}

.bg-snow {
    background-image: url('https://cdn.pixabay.com/photo/2018/12/09/09/15/christmas-3864552_960_720.jpg');
}

.bg-sleet {
    background-image: url('https://cdn.britannica.com/67/123867-050-9D287BC3/Sleet-ground.jpg');
}

.bg-wind {
    background-image: url('https://cdn.pixabay.com/photo/2019/01/26/18/41/trees-3956743_960_720.jpg');
}

.bg-fog {
    background-image: url('https://cdn.pixabay.com/photo/2019/08/28/12/20/landscape-4436636_960_720.jpg');
}

.bg-thunderstorm {
    background-image: url('https://i.pinimg.com/originals/ce/4c/e3/ce4ce321f2729bdaf2c2f0272987301a.jpg');
}


  
  @media (min-width: 595px) {
    .weekly, .today-section {
      width: 500px;
    }
  }