*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  
}
body{
  height:100vh;
  display:flex;
  justify-content:center;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(rgb(47,150,163), rgb(48,62,143));
  font-family: sans-serif;
  color:white;
  
}

.location,
.temperature{
  height:30vh;
  width:50%;
  display:flex;
  justify-content:space-around;
  align-items:center;
}
.temperature{
  flex-direction:column;
}

.degree-section{
  display:flex;
  align-items:center;
  cursor:pointer;
}

.degree-section span{
  margin:10px;
  font-size:20px;
}

.degree-section h2{
  font-size:50px;
}



@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 
      body{
        height:70vh;
        display:flex;
        flex-direction: column;
        justify-content:center;
        align-items: center;
      }

      .degree-section h2{
        font-size:200px;
      }

      .location,
.temperature{
  height:30vh;
  width:50%;
  display:flex;
  font-size: 30px;

}

.degree-section span{
  margin:20px;
  font-size:80px;
}

.location{
  font-size: 40px;
}

.temperature-description{
  font-size: 50px;
}
  }