body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background: #222;
  background-image: url('https://source.unsplash.com/1600x1000/?landscape');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 120%;
}

.card {
  background: #000000d0;
  color: white;
  padding: 2em;
  border-radius: 30px;
  width: 40vw;
  /* max-width: 420px;  */
  margin: 1em;
  align-items: center;
  backdrop-filter: blur(3px) saturate(200%);
    -webkit-backdrop-filter: blur(3px) saturate(200%);
    background-color: rgba(80, 96, 124, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
}

.search {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1em;
}

button {
  margin: 0.5em;
  border-radius: 50%;
  border: none;
  height: 44px;
  width: 44px;
  outline: none;
  background: #fff7f72b;
  color: white;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

input.search-bar {
  border: none;
  outline: none;
  padding: 0.4em 1em;
  border-radius: 24px;
  background: #fff7f72b;
  color: white;
  font-family: inherit;
  font-size: 105%;
  width: calc(100% - 100px);
}

button:hover {
  background: #7c7c7c6b;
}
img#image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0vh;
  padding-top: 0vh;
  margin-bottom: 0vh;
  margin-top: 2vh;
}
h1.card-title {
  text-align: center;
  font-family: inherit;
  font-size: 100%;
  padding-top: 0vh;
  padding-bottom: 2px;
  margin: 0vh;
}
h2.card-temp {
  text-align: center;
  align-content: center;
  font-family: inherit;
  font-size: 400%;
  margin: 0vh;
}
p{
  text-align: center;
  align-self: center;
  font-family: inherit;
  font-size: 110%;
}

.weather.loading {
  visibility: hidden;
  max-height: 20px;
  position: relative;
}
.weather.loading:after {
  visibility: visible;
  content: "Loading...";
  color: white;
  position: absolute;
  top: 0;
  left: 20px;
}
/* Portrait */
/* Iphone SE, Surface Pro 7*/
@media only screen and (min-height: 568px) and (orientation: portrait) {
  body {
    background-size: 100% 100%;
  }
  .card {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 60em;
    height: 100vh;
  }
  .card.text-center {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 80vh;
    width: 80vw; 
  }
   img#image {
    margin-top: 1px;
    padding-top: 10px; 
  } 
  h1.card-title {
    margin: 5px;
  }
  h2.card-temp {
    margin: 1px;
  }
  p#wind {
    padding-top: 2px;
    margin: 2px;
  }
  P#humidity {
    padding-bottom: 0px;
    padding-top: 2px;
    margin: 2px;
  }
  p#weather {
    padding-bottom: 0px;
    padding-top: 2px;
    margin: 2px; 
  }
}
@media only screen and (min-height: 568px), (max-width: 300px) and (orientation: portrait) {
  .search {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: .5em; 

  }
}

/* Samsung Galaxy 8 */
@media only screen and (min-height: 700px) and (orientation: portrait) {
  .card {
    width: 70%;
  }
  .card.text-center {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 80vh;
    width: 80vw; 
  }
  .search {
    margin-top: 1em;
  }
  img#image {
    position: relative;
    margin: 0vh;
    padding-top: 0;
    height: 10em;
    margin-left: auto;
    margin-right: auto;
  }

  h1.card-title {
    font-size: 300%;
  }
  h2.card-temp {
    font-size: 450%;
  }
  p#wind {
    padding-top: 18px;
  }
  P#humidity {
    padding-top: 10px;
  }
  p#weather {
    padding-top: 8px;
    margin: 6px; 
  } 
}

/* Samsung Galaxy A51/71 */
@media only screen and (min-height: 900px) and (orientation: portrait) {
  h1.card-title {
    font-size: 400%;
  }
  p#wind {
    font-size: 150%;
  }
  P#humidity {
    margin: 2px;
    font-size: 150%;
  }
  p#weather {
     margin-top: 3em; 
    font-size: 150%;
  }
}

/*Ipad Mini*/
@media only screen and (min-height: 1000px) and (orientation: portrait) {  
  img#image {
    height: 20vh;
    width: auto;
  }
  .search {
    margin-top: 2em;
  }
  
  button {
    height: 90px;
    width: 90px;
  }
  .card {
    width: 80vw;
  }
  input.search-bar {
    font-size: 200%;
    height: 5vh;
  }
  button:hover {
    background: #7c7c7c6b;
  }
  h1.card-title {
    font-size: 600%;
  }
  h2.card-temp {
    font-size: 450%;
  }
  p#wind {
    font-size: 200%;
  }
  P#humidity {
    font-size: 200%;
  }
  p#weather {
    margin: 10px;
    font-size: 200%;
  }
}
/* Surface Pro 7 */
@media only screen and (min-height: 1300px) and (orientation: portrait) {
  .search {
    margin-top: 2em;
  }
  
  button {
    height: 90px;
    width: 90px;
  }
  .card {
    width: 80vw;
  }
  input.search-bar {
    font-size: 200%;
    height: 5vh;
  }
  img#image {
    height: 20vh;
    width: auto;
  }
  
  button:hover {
    background: #7c7c7c6b;
  }
  h1.card-title {
    font-size: 500%;
    margin-top: 0vh;
    margin-bottom: 0vh;
  }
  h2.card-temp {
    font-size: 600%;
    margin-top: 0vh;
    margin-bottom: 0vh;
  }
  p#wind {
    font-size: 250%;
  }
  P#humidity {
    font-size: 250%;
    padding-top: 15px;
    margin: 6px;
  }
  p#weather {
    padding-top: 1em; 
    margin: 0vh;
    font-size: 250%;
  }
}



/* Landscape */
/*Galaxy Fold landscape*/
@media only screen and (min-height: 250px) and (orientation: landscape) {  
  body {
    background-size: 100% 100%;
  }
  .card {
    margin-top: 0px;
    margin-bottom: 0px;  
    padding-top: 60em;
    height: 100vh;
  }
  .card.text-center {
    margin-top: 1em;
    margin-bottom: 0px;
    padding-top: 1em;
    padding-bottom: 0px;
    height: 80vh;
  }
  button {
    height: 30px;
    width: 30px;
  }
  
  input.search-bar {
    font-size: 80%;
  }
  img#image {
    display: block;
    height: 3em;
    width: 3em;
    padding-bottom: 0vh;
    padding-top: 2px;
  }
  h1.card-title {
    font-size: 150%;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  h2.card-temp {
    font-size: 150%;
    margin-top: 0px;
    padding: 0px;
    margin-bottom: 0px;
  }
  p{
    font-size: 70%;
  }
  p#wind {
    padding-top: 0px;
    margin: 0px;
  }
  P#humidity {
    padding-bottom: 0px;
    padding-top: 0px;
    margin: 0px;
  }
  p#weather {
    padding-bottom: 0px;
    padding-top: 0px;
    margin: 0px;
  }
}

/* Cell phone landscape */
@media only screen and (min-height: 320px) and (orientation: landscape) {
  body {
    background-size: 100% 100%;
  }
  .card {
    margin-top: 0px;
    margin-bottom: 0px;  
    padding-top: 60em;
    height: 100vh;
  }
  .card.text-center {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 80vh;
  }
  button {
    height: 30px;
    width: 30px;
  }
  
  input.search-bar {
    font-size: 80%;
  }
  img#image {
    height: 6em;
    width: 6em;
    padding-bottom: 0vh;
    padding-top: 0px;
  }
  h1.card-title {
    font-size: 150%;
    padding-top: 0vh;
    padding-bottom: 0px;
  }
  h2.card-temp {
    font-size: 200%;
  }
  p{
    font-size: 80%;
  }
  p#wind {
    padding-top: 2px;
    margin-top: 0vh;
    margin-bottom: 0vh;
  }
  P#humidity {
    padding-bottom: 0px;
    margin-top: 0vh;
    margin-bottom: 0vh;
  }
  p#weather {
    padding-bottom: 0px;
    padding-top: 2px;
    margin-top: 0vh;
    margin-bottom: 0vh;
  }
}
/* Samsung S8+ landscape */
@media only screen and (min-height: 320px) and (orientation: landscape) {
  body {
    background-size: 100% 100%;
  }
  .card {
    margin-top: 0px;
    margin-bottom: 0px;  
    padding-top: 60em;
    height: 100vh;
  }
  .card.text-center {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 80vh;
  }
  button {
    height: 30px;
    width: 30px;
  }
  
  input.search-bar {
    font-size: 80%;
  }
  img#image {
    height: 4.5em;
    width: 4.5em;
    padding-bottom: 0vh;
    padding-top: 0px;
  }
  h1.card-title {
    font-size: 150%;
    padding-top: 0vh;
    padding-bottom: 0px;
  }
  h2.card-temp {
    font-size: 200%;
  }
  p{
    font-size: 80%;
  }
  p#wind {
    padding-top: 2px;
    margin-top: 0vh;
    margin-bottom: 0vh;
  }
  P#humidity {
    padding-bottom: 0px;
    margin-top: 0vh;
    margin-bottom: 0vh;
  }
  p#weather {
    padding-bottom: 0px;
    padding-top: 2px;
    margin-top: 0vh;
    margin-bottom: 0vh;
  }
}
/*Nest Hub*/
@media only screen and (min-height: 550px) and (orientation: landscape) {
  .text-center{
   height: 70vh;
 } 
 img#image {
   padding-top: .25em;
   margin-top: 0vh;
   padding-top: 0vh;
   height: 10em;
   width: 10em;
 }
 h1.card-title {
   font-size: 250%;
 }
 h2.card-temp {
   font-size: 200%
 }
 p#wind {
   margin: 0vh;
   font-size: 100%;
 }
 P#humidity {
   margin: 0vh;
   font-size: 100%;
 }
 p#weather {
   margin: 0vh;
   font-size: 100%;
 }
}

/*Nest Hub Max, IPad Air, IPad Mini Landscape view*/
@media only screen and (min-height: 750px) and (orientation: landscape) {
  .text-center{
   height: 70vh;
 } 
 img#image {
   padding-top: .25em;
   margin-top: 0vh;
   padding-top: 0vh;
 }
 h1.card-title {
   font-size: 300%;
 }
 h2.card-temp {
   font-size: 300%
 }
 p#wind {
   margin: 0vh;
   font-size: 150%;
 }
 P#humidity {
   margin-top: 4vh;
   font-size: 150%;
 }
 p#weather {
   margin: 0vh;
   font-size: 200%;
 }
}

/*Surface Pro 7 Landscape view*/
@media only screen and (min-height: 750px) and (orientation: landscape) {
  .text-center{
    height: 70vh;
  } 
  img#image {
    padding-top: .25em;
    height: 16em;
    width: 16em;
    margin-top: 0vh;
    padding-top: 0vh;
  }
  h1.card-title {
    font-size: 300%;
  }
  h2.card-temp {
    font-size: 300%
  }
  p#wind {
    margin: 0vh;
    font-size: 150%;
  }
  P#humidity {
    margin-top: 4vh;
    font-size: 150%;
  }
  p#weather {
    margin: 0vh;
    font-size: 200%;
  }
}







/*IPad Air
@media only screen and (min-height: 1100px) and (orientation: portrait) {
  .search {
    margin-top: 1em;
  } 
  img#image {
    margin-bottom: 4em;
  }
  p#weather {
    font-size: 300%;
  }
}




/*LANDSCAPE MEDIA QUERIES





/*Samsung Galaxy A51/71
@media only screen and (min-height: 400px) and (orientation: landscape) {
  .card.text-center {
    height: 85vh;
  }
  .search {
    padding-top: 1em;
  }
  img#image {
    padding-top: .5em;
  }
  h1.card-title {
    font-size: 250%;
  }
  p#wind {
    font-size: 100%;
  }
  P#humidity {
    font-size: 100%;
  }
  p#weather {
    font-size: 100%;
  }
}



/*Surface Duo landscape
@media only screen and (min-height: 700px) and (orientation: landscape) {
  .card.text-center {
    height: 85vh;
  }
  .search {
    padding-top: 1em;
  }
  
  button {
    margin: 0.5em;
    border-radius: 50%;
    border: none;
    height: 30px;
    width: 30px;
    outline: none;
    background: #fff7f72b;
    color: white;
    cursor: pointer;
    transition: 0.2s ease-in-out;
  }
  img#image {
    padding-top: 2em;
  }
  h1.card-title {
    font-size: 350%;
  }
  h2.card-temp {
    font-size: 300%
  }
  p#wind {
    font-size: 100%;
  }
  P#humidity {
    font-size: 100%;
  }
  p#weather {
    font-size: 125%;
  }
}