*{
    box-sizing: border-box;
    margin:0;
    padding:0;
    }
    
   
    
    .text{
    text-align: center;
    color:white;
    
    font-size: 20px;
    padding: 20px;
    font-family: sans-serif;
    font-style: italic;
    margin:0 auto;
    margin-bottom: 70px;
    margin-top: 40px;
    width:70%;
    
    }
    
    .wheather{
    
    
    
    background:rgba(5, 92, 110, 0.8);/*rgba(1, 86, 79, 0.7);   rgba(5, 92, 110, 0.7);  rgba(7, 71, 101, 0.7)*/ 
    width: 20%;
    text-align: center;
    margin: 0 auto;
    padding:15px; 
    border-radius: 10px;
    font-family: 'Abel', sans-serif;
    color:#dbd5d5;/* #11b6a4*/
    padding-bottom:5px;
    border:2px solid lightblue;
    
    }
    
    
    
    #image2{
   
    margin-right:10px;
    width:50px;
    height: 50px;
    margin-bottom:0;
    margin-top:0;
    }
    
    
    .imgDescr{
    
    display: flex;
    justify-content: center;
    align-items: center;
     
    
    
    }
    
    .cityTemp{
    padding:0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    }
    
    
    .temp{
    padding-left: 15px;
    color:orange;
    font-size: 17px;
    }
    
    #central{
    margin:0px auto;
    width:80%;
    
    animation-name:boxAnimation;
      animation-duration:1.5s; 
    background-size:cover;
    background-position: center;
    background-attachment: fixed;
    
    height:80%;
    }
    
     @keyframes boxAnimation{
      
     
       from {transform:scale(0)}
        to {transform:scale(1)}
      
      }
    
    
    .closeBtn{
    position:absolute;
    color:rgb(219, 215, 215);
    font-size: 30px;
    z-index: 1;
    right:30px;
    top:20px;
    cursor:pointer;
    background: rgb(240, 106, 17);
    border-radius: 50%;
    width:40px;
    text-align: center;
    }
    
    .box{
    margin:0 auto;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.9);
    position: fixed;
    z-index: 10;
    display:none;
    animation-name:opacit;
      animation-duration:0.5s; 
     top:0;
     left:0;
     bottom: 0;
    
    }
    
    
    
     @keyframes opacit{
      
      from{opacity: 0}
      to{opacity: 1}
     
      
      }
    
    
    
      @media screen and (min-width: 150px){
       
        #central{
          margin:50px auto;
          width:85%;
          
        
          
          height:450px;
          }
       
       
       
       
       
       
        .wheather{
        
        background:rgba(5, 92, 110, 0.8);
        width: 60%;
        
        
        }
        
        
        .text{
        
       
        width: 90%;
        margin-bottom: 60px;
        margin-top: 20px;
        font-size: 21px;
        }
        
        
        
        
        }
    
    
    
    
    
    @media screen and (min-width: 700px){
    
      #central{
        margin:40px auto;
        width:85%;
        
      
        
        height:90%;
        }
    
    
    
      .wheather{
    
    background:rgba(5, 92, 110, 0.8);
    width: 30%;
   
    
    }
    
    
    .text{
    
    
    width: 70%;
  
    margin-bottom: 60px;
    margin-top: 20px;
    font-size: 20px;
    }
    
    
    
    
    }