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

/* 
font-family: 'Krona One', sans-serif;
font-family: 'Oswald', sans-serif;
 */

body {
  width: 100vw;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: auto;
  width: 1725px;
}

.day {
  width: 245px;
}

.dayOfWeek {
  margin: auto;
  text-align: center;
  font-family: 'Krona One', sans-serif;
}

h4 {
  color: #4DB0D3;
  font-size: 32px;
  letter-spacing: 10px;
  margin: 0;
}

h3 {
  color: #4DB0D3;
  font-size: 96px;
  margin: 0;
}

.dataContainer {
  font-family: 'Oswald', sans-serif;
  position: relative;
  width: 100%;
}

.weatherIcon {
  position: absolute;
  margin: auto;
  width: 245px;
  height: 245px;
}

.dataBox {
  margin: auto;
  width: 215px;
  border-radius: 65px;
  height: 690px;
  background-color: #2B8BAD;
  display: grid;
  grid-template-rows: 40% 60%;
  box-shadow:
  15px 5px 45px 0 rgba(0, 0, 0, 0.25);
}

.info {
  grid-row-start: 2;
  margin: 0 auto;
  text-align: center;
}

.temp {
  font-size: 144px;
  margin-bottom: 3rem;
}

.rain, .low {
  width: 140px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-bottom: 15px;
}

.icon {
  width: 45px;
  height: 45px;
}

.icon path, .icon circle {
  fill: pink;
}

.rain span, .low span {
  font-size: 30px;
}

.cloudyStyle {
  background-color: #4DB0D3;
  color: #D3EBF4;
}

.cloudyStyle .rainLow {
  color: #D3EBF4;
}

.cloudyicon path, .cloudyicon circle {
  fill: #D3EBF4; 
}

.sunnyStyle {
  background-color: #E6DF95;
  color: #4DB0D3;
}

.sunnyStyle .rainLow {
  color: #247490;
}

.sunnyicon path, .sunnyicon circle {
  fill: #247490;
}

.stormyStyle {
  background-color: #0E2E3A;
  color: #E6DF95;
}

.stormyStyle .rainLow {
  color: #D3EBF4;
}

.stormyicon path, .stormyicon circle {
  fill: #D3EBF4
}

.snowyStyle {
  background-color: #BCE1EF;
  color: #0E2E3A;
}

.snowyStyle .rainLow {
  color: #247490;
}

.snowyicon path, .snowyicon circle {
  fill: #247490;
}

.rainyStyle {
  background-color: #4DB0D3;
  color: #E6DF95;
}

.rainyStyle .rainLow {
  color: #D3EBF4;
}

.rainyicon path, .rainyicon circle {
  fill: #D3EBF4;
}

.partly-cloudyStyle {
  background-color: #2B8BAD;
  color: #E6DF95;
}

.partly-cloudyStyle .rainLow {
  color: #D3EBF4;
}

.partly-cloudyicon path, .partly-cloudyicon circle {
  fill: #D3EBF4;
}