body{
  
   
    background-color:#BFDFEC;
      background-repeat:repeat-x;
   background-image:url("https://i.stack.imgur.com/b7z29.png");
    animation: movement 10s linear infinite; 
  
}
@keyframes movement{
  0% {
    background-position:0px 0px;
  }
  100%{
    background-position:400px 0px;
  }
}
.main{
 width:340px;
  margin:auto;
  
 margin-top:30px ;


}

  #container{
   height:520px;
   width:80%;
background-color: #47CF73;
   margin: auto;
   margin-top: 30px;
   display: flex;
   flex-direction: column;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  #upper{
    height:300px;
    width:95%;
    /* border:1px solid gold; */
    margin:auto;
    display: flex;
     justify-content: space-between;
  }
 #tempDiv{
   height:200px;
   width:48%;
 background-color: #86B9E0;
  display: flex;
  flex-direction: column;
  padding: 5%;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }


 #frame{
   height:305px;
   width:48%;
   /* border:1px solid firebrick; */
   background-color: #F9D200 ;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }
 #forecast{
  height:180px;
  width:95%;
 background-color: #002551;
  margin: auto;
  display: flex;
  color: white;
  justify-content: space-evenly;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }