*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'montseratt', sans-serif;
    overflow-x: hidden;
}

.app{
    /* background-image: url(./images/untitled.png); */
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(./images/untitled.png);
    /* background-color: aqua; */
    /* background: linear-gradient(to bottom, #005C97 0%, #363795 100%); */
    /* background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.4)), url(./images/cloud.jpeg); */
    background-size: cover;
    background-position: center;
    transition: all 0.9s ease-in-out;
   
}

.app.warm{
    /* background-image: url(./images/warm.png); */
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(./images/warm.png);
    
   /* background-color: brown; */
   /* background: linear-gradient(to bottom, #8E0E00 0%, #1F1C18 100%); */
    /* background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.4)), url(./images/warm.jpg); */
    background-size: cover;
    background-position: center;

   
}
main{
    min-height: 100vh;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0,75));
    padding: 50px;
}

.search-box{
    width: 100%;
    margin: 0 0 75px;
}

.search-box .search-bar{
    display: block;
    width: 50%;
    margin: 0 auto;
    padding: 15px;
    appearance: none;
    background: none;
    border: none;
    outline: none;
    background-color: rgba(225, 225, 225, 0.5);
    border-radius: 0px 0px 16px 16px;
    margin-top: -25px;
    box-shadow: 0px 5px rgba(0, 0, 0, 0.2);
    color: #313131;
    font-size: 20px;
    transition: all 0.4s ease;
}

/* .search-box .search-bar: focus{
    background-color: rgba(225, 225, 225, 0.75);
} */

.location-box .location{
    color: #FFF;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    text-shadow: 3px 3px rgba(50, 50, 70, 0.5);
}

.location-box .date{
    color: #FFF;
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    text-align: center;
    text-shadow: 2px 2px rgba(50, 50, 70, 0.5);
}

.weather-box{
    text-align: center;
}

.weather-box .temp{
    position: relative;
    display: inline-block;
    margin: 30px auto;
    background-color: rgba(225, 225, 225, 0.2);
    border-radius: 16px;
    padding: 15px 25px;
    color: #FFF;
    font-size: 102px;
    font-weight: 900;
    text-shadow: 3px 6px rgba(50, 50, 70, 0.5);
    text-align: center;
    box-shadow: 3px 6px rgba(0, 0, 0, 0.2);
}

.weather-box .weather{
    color: #FFF;
    font-size: 48px;
    font-weight: 700;
       text-shadow: 3px 6px rgba(50, 50, 70, 0.5);
}

.description{
    color: #FFF;
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    text-align: center;
    text-shadow: 2px 2px rgba(50, 50, 70, 0.5);
}

hr{
    margin-top: 30px;
    width: 50%;
    margin: 0 auto;
   
}
.description-2{
   
    color: #FFF;
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    text-align: center;
    text-shadow: 2px 2px rgba(50, 50, 70, 0.5);
    padding: 30px 400px;
}








@media only screen and (max-width: 767px) and (min-width: 320px)  {
    .description-2{
   
        padding: 30px 20px;
    }
    hr{
        width: 100%;
    }
    main{
        padding: 20px;
    }
    .search-box .search-bar{
        margin-top: 43px;
    }
  }

  
  @media only screen and (max-width: 1200px) and (min-width: 768px)  {
    .description-2{
   
        padding: 30px 150px;
    }
    .search-box .search-bar{

        margin-top: 39px;
      
  
    }
  }

  @media only screen and (max-width: 1366px) and (min-width: 1024px)  {
    .description-2{
        
        padding: 30px 200px;
    }
    .search-box .search-bar{

        margin-top: 68px;
      
  
    }

  }

  
  @media only screen and (max-width: 1920px) and (min-width: 1200px)  {
    .description-2{
        
        padding: 30px 400px;
    }
    .search-box .search-bar{

        margin-top: -50px;
    }
}