* {
   margin: 0;
   padding: 0;
}

body {
   background-image: url(weather_icons/background2.jpg);
   background-color: #cccccc;
   background-size: cover;
   background-attachment: fixed;



}

 


#header {
   text-shadow: 8px 8px 10px rgba(142, 133, 140, 0.77);
   color: #333333;
   font-size: 3rem;
   padding: 1rem;
   font-weight: 900;
   text-align: center;
   border: 1px solid black;



}

img {

   margin: 1rem;
   width: 6rem;
   height: auto;

}

.icons {
   grid-row: 2/5;
   grid-column: 1/4;
   align-self: center;
   justify-content: center;
   margin: 0.2rem;

}

h1 {
   font-size: 6rem;
   margin-top: 1rem;
   text-align: center;
   font-weight: 900;
   color: #333333;
   border-color: #333333;


}

#data {
   background-color: rgba(255, 255, 251, .35);
   backdrop-filter: blur(5px);
   max-width: 400px;
   height: 340px;
   display: grid;
   grid-template-columns: repeat(8, 12.5%);
   grid-template-rows: repeat(5, 20%);
   grid-column-gap: 0.2rem;
   grid-auto-flow: column;
   padding: 1rem;
   margin: 0.5rem auto;
   border: 1px solid black;

   -webkit-box-shadow: 4px 3px 5px 0px rgba(50, 50, 50, 0.75);
   -moz-box-shadow: 4px 3px 5px 0px rgba(50, 50, 50, 0.75);
   box-shadow: 4px 3px 5px 0px rgba(50, 50, 50, 0.75);
}

.cityName {
   text-shadow: 2px 1px 5px rgba(150, 150, 150, 0.8);
   align-self: center;
   grid-column: 1/9;
   font-weight: 900;
   font-size: 2.7rem;
   color: #aliceblue;
   margin: 0.2rem;
}

.temperature {
   text-shadow: 2px 1px 5px rgba(150, 150, 150, 0.8);
   grid-column: 1/8;
   grid-row: 2/4;
   font-weight: 900;
   font-size: 1.7rem;
   color: #000000;
   margin-top: 1rem;

}

.windspeed {
   text-shadow: 2px 1px 5px rgba(150, 150, 150, 0.8);
   font-weight: 900;
   font-size: 1.2rem;
   color: #000000;
}





.celsius {
   text-shadow: 2px 1px 5px rgba(150, 150, 150, 0.8);
   grid-row: 2/3;
   grid-column: 2/3;
   font-weight: 900;
   font-size: 3rem;
   color: #000000;
   justify-self: center;
}

.celsius2 {
   text-shadow: 2px 1px 5px rgba(150, 150, 150, 0.8);
   background: white;
   grid-row: 4/5;
   grid-column: 1/9;
   font-weight: 900;
   font-size: 1rem;
   color: #000000;
   justify-self: start;
}

.winddirection {
   text-shadow: 2px 1px 5px rgba(150, 150, 150, 0.8);
   grid-column: 1/9;
   font-weight: 900;
   font-size: 1.2rem;
   color: #000000;
}

.curentCondition {
   text-shadow: 2px 1px 5px rgba(150, 150, 150, 0.8);
   grid-column: 1/9;
   font-weight: 900;
   font-size: 1.2rem;
   color: #000000;
}

.windchildfactor {
   text-shadow: 2px 1px 5px rgba(150, 150, 150, 0.8);
   grid-column: 1/9;
   font-weight: 900;
   font-size: 1.2rem;
   color: #000000;

}

.details {
   margin-top: 0.2rem;
   grid-column: 1/9;
   grid-row: 4/5;

}

.details > div {
   margin: 0.4rem;
}

.warning {
   text-shadow: 2px 1px 5px rgba(150, 150, 150, 0.8);
   font-weight: 900;
   font-size: 1.2rem;
   color: #000000;
}

.date {
   text-shadow: 2px 1px 5px rgba(150, 150, 150, 0.8);
   font-weight: 900;
   font-size: 1.2rem;
   color: #000000;
}

select {
   -webkit-appearance: none;
   border: 0 none;
   color: #333333;
   background: transparent;
   font-size: 20px;
   font-weight: bold;
   padding: 2px 10px;
   width: 378px;


}

#city {
   background-color: rgba(255, 255, 255, .55);
   backdrop-filter: blur(5px);
   margin: 1rem;
   overflow: hidden;
   width: 220px;
   -moz-border-radius: 9px 9px 9px 9px;
   -webkit-border-radius: 9px 9px 9px 9px;
   border-radius: 9px 9px 9px 9px;
   box-shadow: 1px 1px 11px #333333;
   padding: 0.6rem;


}

#country {
   padding: 0.6rem;
   background-color: rgba(255, 255, 255, .55);
   backdrop-filter: blur(5px);
   margin: 0.5rem;
   overflow: hidden;
   width: 220px;
   -moz-border-radius: 9px 9px 9px 9px;
   -webkit-border-radius: 9px 9px 9px 9px;
   border-radius: 9px 9px 9px 9px;
   box-shadow: 1px 1px 11px #333333;
   margin-left: 30px;


}

#country:hover,
#city:hover {
   background-color: rgba(255, 255, 255, .95);
}

@media only screen and (max-width: 600px) {
   .details {
      grid-column: 1/8;
      grid-template-columns: repeat(1fr, 5);
      grid-row-gap: 0;
   }

   .temperature {
      font-size: 2rem;
   }

   .temp {
      display: none;
   }

   img {
      width: 7rem;

   }

   .icons {
      grid-row: 3/3;
      grid-column: 1/3;

   }

   .cityName {
      font-size: 1.5rem;

      grid-column: 1/8;

   }

   #country {
      margin-left: 1rem;
   }

   #data {
      max-width: 800px;
      max-height: 500px;
      grid grid-template-rows: repeat(6, 25%);
      grid-row-gap: 0;
      grid-column-gap: 0;
      margin: 0.2rem;

   }

}