@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;600&family=Nanum+Gothic:wght@400;800&display=swap');

html{
     background-image: linear-gradient(to right,#020625

,#353970, #7379f0,#ea7f99,#ea7f99,#e17b27, #fcf0e6,#7ddce4

,#f89647,#172696,#020625

);
    background-size:600%;
    animation-duration: 200s;
animation-iteration-count: infinite;
animation-name: sunrise-sunset;
}
body{

}

article{
  display: block;
  margin-left: auto;
  margin-right:auto;
  width:60%;


}

#today{
  align-items: center;
  background-color: #91a1c5;
  box-shadow: 5px 5px 0px #2d2d2d;
}

p{
  color:#2d2d2d;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}
h1{
  color:#2d2d2d;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  size: 150%;
}


nav li{
display: inline-block;

padding-right: 20px;
}
nav li a {

  padding: 2px;
  text-decoration:none;
  background-color: #91a1c5;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
box-shadow: 5px 5px 0px #2d2d2d;

}
nav li a:link{
    color:#2d2d2d;
}
nav li a:visited{
    box-shadow: 5px 5px 0px #2d2d2d;
    color:#2d2d2d;
  }
nav li a:hover{
    box-shadow: 0px 0px 0px #2d2d2d;
    color:#2d2d2d;
}

footer li{
  display: inline-block;

  padding-right: 5px;
}
footer li a{
  text-decoration:none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
footer li a:link{
  color: #000;
}
footer li a:visited{
  color: #000;
}
@keyframes sunrise-sunset {
    0%   {background-position: 0 0;}
    25% {background-position: 50% 0;}
    50% {background-position: 90% 0;}
    60% {background-position: 60%;}
    75% {background-position: 40%;}
    100%  {background-position: 0 0;}
}

#day-forecast{
  border-collapse:separate;
  border-style: hidden;
  border: 50px;
  padding-bottom: 15px;
}
#left-side{
  padding-right: 5px;
  text-align: right;
  line-height: 10%;
}
#right-side{
  padding-left: 5px;
  text-align: left;
  line-height: 85%;
}
#cityset{
  align-self: left;
  padding-top: 10px;
}
#theme-sel{
  align-self: right;
  padding-top: 10px;
}
#weather-icon{
  width: 30%;
  margin-right: 20%;
  filter:brightness(30%);
}
#WeaDesc{
text-align: right;
size:20%;
}
#title{
  padding-top: 10px;
}