body{
   
    background: linear-gradient(to right, rgb(4, 38, 77), rgb(3, 112, 190) );
    position: relative;


}

h2{
    text-align: center;
    color: white;
    font-size: 3.0em;
    font-family:  Tahoma, Arial, Helvetica, sans-serif;
    animation: move 5s forwards;
    animation-iteration-count: 1;
}
form{
  
  text-align: center;
  position: relative;
  
}

section{
  position: relative;

}

label{
  
  font-size: 20px;
  color: white;
}

input {
  border: none;
  background: none;
  outline: none;
  color: inherit;
}

#city{
    color: white;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding: 15px;
    font-size: 2rem;
    text-align: center;
    

    
}

#submit{
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-size: 25px;
    max-width: 100%;
    cursor: pointer;
}

#error-message{
  text-align: center;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}

#submit:hover{
  background-color: rgb(55, 103, 177);
  color: white;

}

#report-section{
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  margin-top: 10px;
  padding-top: 10px;
  color: whitesmoke;

}

#city-name{
  font-family: 'Cooper Black', sans-serif;
  text-transform: uppercase;
  font-size: 30px;
  letter-spacing: 0.05em;
  margin-top: 40px;
  color: rgb(59, 58, 58);

}

#country-code{
  
  font-size: 15px;
  background-color: burlywood;
  padding: 0.2em 0.6em;
  border-radius: 30px;
}

#temp{
  margin:0px;
}

hr.rounded {
  border-top: 2px solid silver;
  border-radius: 5px;
  width: 90%;
}

/*@keyframes move{
  0%{transform: translateX(-100px);
      -ms-transform: translateX(-100px);
  }
  100%{transform: translateX(1px);
    -ms-transform: translateX(1px);
  }
}
*/

.container {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    box-shadow: 0 16px 16px 0 rgba(0,0,0,0.3);
    transition: 1s;
    border-radius: 10px;
    position: relative; 
    width: 300px;
    height: auto;
    color: black;
    font-size: 25px;
    max-width: 100%;
    visibility: hidden; 
    background-color: rgba(213, 233, 255, 0.7)
    

  }

  
  
  
/* On mouse-over, add a deeper shadow */
.container:hover {
    box-shadow: 0 25px 25px 0 rgba(0, 0, 0, 0.7);
  }
  
  /* Add some padding inside the card container */
  .card {
    padding: 2px 16px;
  }
  
  
  #image {
    display: flex;
    flex-direction: column;
    border-radius: 5px; 
    width: 100px;
    max-width: 100%;
    height: auto;
    margin-top: 40px;
    background-image: radial-gradient(rgb(188, 212, 248), rgb(55, 103, 177));

  }

  #temp{
    float: left;
    font-size: 3rem;
    font-weight: bold;
    margin-top: 5px;
    color: black;
  }

  .city-temp{
    float: left;
    font-size: 2.0em;
    font-family: Arial, Helvetica, sans-serif;
  }

  .container sup {
    font-size: 0.5em;
  }

@media screen and (max-width: 700px) {
    body{
      position: relative;
    }
    
    form {
      display: flex;
      flex-direction: column;
      
    }
     
     #city,
     form button {
      width: 100%;
    }
     
    form .message {
      position: static;
      max-width: none;
      min-height: 0;
      margin-top: 10px;
    }

    .container {
      display: flex;
      flex-direction: column;
      max-height: 100%;    
      max-width: 100%;
    }

    hr.rounded {
      border-top: 2px solid silver;
      border-radius: 5px;
      width: 80%;
    }
    
  }

  @media screen and (max-width: 420px) {
    body{
      position: relative;
      align-items: center;
      background-image: linear-gradient(rgb(1, 38, 80), rgb(3, 112, 190) );
      display: flex;
      flex-direction: column;

    }

    form {
      display: flex;
      flex-direction: column;
      
    }
    
    .container {
      display: flex;
      flex-direction: column;
      max-height: 100%; 
      max-width: 100%;

    }

    #city{
      background: none;
      color: white;
      font-size: 20px;
      border-bottom: 3px, solid, white;
    }

    form button {
      max-width: 100%;
    } 

    hr.rounded {
      border-top: 2px solid silver;
      border-radius: 5px;
      width: 80%;
    }

    
  }

   /*for snow background effect*/
  .main {
  font-weight: bold;
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 30px;
  z-index: 1;
  background-image: 
    linear-gradient(rgba(30,32,33,0.2), rgba(30,42,53,1)),
     url("https://images.unsplash.com/photo-1552910996-e666ad64695c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80");
  background-size: cover;
  background-position: bottom center;
}