* {
 margin: 0;
 padding: 0;
}
.container {
 min-height: 100vh;
 width: 100vw;
 min-width: 200px;
 background: url(desert.jpg);
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: 45vh 10vh 1fr 0.1fr;
}
.time_date {
 grid-area: 1/1/2/2;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 color: rgb(61, 59, 59);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}
.search_panel {
 grid-area: 1/2/2/3;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
}
.copyright {
 background-color: #aee8ec;
 grid-row-start: 4;
 grid-column: 1/4;
 display: flex;
 align-items: center;
 justify-content: center;
 border-top-right-radius: 10px;
 border-top-left-radius: 10px;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
  Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 margin-left: 10px;
 margin-right: 10px;
}
.search_panel input {
 width: 70%;
 height: 20px;
 border-radius: 10px;
 border: 1px solid black;
 background-color: rgb(220, 235, 235);
 outline: 3px solid orange;
}
.search_panel input:hover,
.search_panel input:focus {
 border-color: cadetblue;
 outline-color: yellow;
}
.error {
 font-size: xx-large;
 color: maroon;
 position: absolute;
 transform: translateY(50px);
 border: 2px solid black;
 border-radius: 10px;
 background-color: aquamarine;
 display: none;
}
.country_city {
 grid-area: 1/3/1/4;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 font-family: monospace;
 color: rgb(61, 59, 59);
}
.country {
 font-size: max(5vw, 30px);
}
.city {
 font-size: max(2vw, 10px);
}
.weather_dashboard {
 background-color: rgb(175, 228, 238);
 border-radius: 25px;
 grid-area: 3/1/4/4;
 opacity: 0.9;
}
.time {
 height: 40%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: max(1vh, 5vw, 30px);
}
.date {
 font-size: max(1.5vh, 1.5vw);
}
.weather_dashboard {
 margin: 10px;
 padding: 10px;
 display: none;
 align-items: center;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
[class$="temp"] {
 display: flex;
 align-items: center;
 font-size: xx-large;
}
.temperature {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}
.text {
 font-size: 12px;
 color: rgb(34, 34, 34);
 padding: 10px;
 font-family: monospace;
}
.description {
 font-family: monospace;
 font-size: x-large;
}
.weatherdescription,
.temperature,
[class$="item"] {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
 height: 150px;
}

.text + * {
 font-size: xx-large;
}
.temp {
 margin-left: 20px;
}
@media only screen and (max-width: 500px) {
 .container {
  display: flex;
  flex-direction: column;
 }
 .copyright {
  margin-top: auto;
 }
 .weatherdescription,
 .temperature,
 [class$="item"] {
  border: 2px solid rgb(126, 203, 238);
  border-radius: 20px;
  margin: 2px;
 }
}