*,
 *::after,
 *::before{
    box-sizing: border-box;
 }

 :root{
    --spacing-medium:8px;       /*variable*/
    --spacing-regular:16px;    /*variable*/

    --font-regular:1rem;
    --font-small:0.5rem;
    --font-large:2rem;
    --font-xl:4rem;

    --font-semibold: 600;
    --gradient: linear-gradient( 135deg, #5db1b4 10%, #1a1a338c 100%);
 }

 h1,
 h2{
    margin: 0;
 }

 p{
    margin: var(--spacing-medium);
 }

 body{
    margin:0;
    font-family: Arial, Helvetica, sans-serif ;
    max-width:800px;
    margin: var(--spacing-regular) auto;
    background-color: #222831;
    color: #ffffff;
 }

 /*mobile first approach*/

 .container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-areas: 
    "search search"
    "current current"
    "hourly hourly"
    "fiveday fiveday"
    "feelslike humidity";
    gap:var(--spacing-regular);
    
 }

 .container,.container>article{           /*container=>parent,article=>child*/
    border:1px solid;                      /*applying this to all articles present in container*/
    border-radius: var(--spacing-regular);
    padding: var(--spacing-regular);
 }

 #search{
   /* outline-color: var(--gradient); */
   grid-area: search;
   font-size: var(--font-large);
   border-radius: var(--font-regular);
   padding: var(--spacing-medium);
   background-image: var(--gradient);
   color:wheat;
   border-radius: 25px;
   border: none;
   font-weight: 600;
   cursor: pointer;
   
 }

 input{
   text-align: center;
 }

/* styles related to current weather */

 #current-forecast{
    grid-area: current;
    text-align: center ;
 }


 #current-forecast .temp{
    font-size: var(--font-xl);
 }

 #current-forecast .Description{
    font-size: var(--font-regular);
    font-weight: var(--font-semibold);
    padding-bottom: 10px;
 }

 #current-forecast .min-max-temp{
    font-size: var(--font-regular);
    font-weight: var(--font-semibold);
 }

 /* styles related to hourly forecast */

 #hourly-forecast{
    grid-area: hourly;
    text-align: center;
 }

 #hourly-forecast .hourly-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(100px,1fr);
    overflow-x: auto;
    gap: var(--spacing-medium);
 }

 ::-webkit-scrollbar{ 
    display: none;                  /*pseudo-class used to hide scrollbar*/
 }


 #hourly-forecast .hourly-container .icon{
    height: 50px;
    width: 50px;
    object-fit: contain;
 }

 #hourly-forecast .hourly-container .hourly-temp{
    font-size: var(--font-regular);
    font-weight: var(--font-semibold);
 }

 #hourly-forecast{
    grid-area: hourly;
 }

 #five-day-forecast{
    grid-area: fiveday;
    text-align: center;

 }

 #five-day-forecast .five-day-forecast-container{
    display: grid;
    grid-auto-flow: row;
 }

 .five-day-forecast-container .day-wise-forecast{
   display: grid;
   grid-template: auto / repeat(4,1fr);
   gap: var(--spacing-regular);
   place-items: center;
 }

 .five-day-forecast-container .day-wise-forecast .min-temp,
 .five-day-forecast-container .day-wise-forecast .max-temp{
   font-size: var(--font-regular);
   font-weight: var(--font-semibold);
 }

 .five-day-forecast-container .day-wise-forecast .min-temp{
   opacity: 50%;
 }

 .five-day-forecast-container .day-wise-forecast .max-temp{
   justify-self: end;
 }
 
 .five-day-forecast-container .day-wise-forecast .icon{
   width: 75px;
   height: 75px;
 }

 .five-day-forecast-container .day-wise-forecast .day{
   text-transform: capitalize;
   justify-self: start;
 }


 #feels-like{
    grid-area: feelslike;
    text-align: center;
 }

 #humidity{
    grid-area: humidity;
    text-align: center;
 }


 @media (width>=650px) {
   .container{
      grid-template-columns: repeat(4,1fr);
      grid-template-areas: 
      "search search search search"
      "current current current current"
      "hourly hourly fiveday fiveday"
      "feelslike humidity fiveday fiveday";
      
   }
 }




 /* Animation styles */

 #search:hover{
   transition: transform 200ms ease;
   transform: scale(0.95);  
 }