html {
  overflow-x: hidden;
}
video { 
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-50%, -50%);
}
.back
{
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-50%, -50%);
  opacity: 70%;

}
  .heading
  {
      font-size: 4vw;
      color:black;
      text-align: center;
      -webkit-animation: glow 1s ease-in-out infinite alternate;
      -moz-animation: glow 1s ease-in-out infinite alternate;
      animation: glow 1s ease-in-out infinite alternate;
  }
    @keyframes glow {
      from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e67316, 0 0 40px #e67316, 0 0 50px #e67316, 0 0 60px #e67316, 0 0 70px #e67316;
      }
      to {
        text-shadow: 0 0 20px #fff, 0 0 30px #e67316, 0 0 40px #e67316, 0 0 50px #e67316, 0 0 60px #e67316, 0 0 70px #e67316, 0 0 80px #e67316;
      }    
  /**/}
.locimg
{
    position: absolute;
    height:4vh;
    top:23%;
}
.location
{
  color:royalblue;
  font-size:3vh;
  position: absolute;
  top: 20vh;
  left:5vh;
}
.countries
{
  border-radius: 5vh;
  height: 4vh;
  width: 20vw;
  border-radius:15vh;
  font-size: large;
  padding:3px;
  position:absolute;
  top:27vh;
  left:2vw;
}
.states
{
  border-radius: 5vh;
  height: 4vh;
  width: 20vw;
  border-radius:15vh;
  font-size: large;
  padding:3px;
  top:32vh;
  position: absolute;
  left:2vw;
}
.cities
{
  border-radius: 5px;
  height: 4vh;
  width: 20vw;
  border-radius:15vh;
  font-size: large;
  padding:3px;
  position: absolute;
  top:37vh;
  left:2vw;
}
.tempa
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23%;

}
.or 
{
  color:darkgreen;
  position:absolute;
  top:41vh;
}
#getLocation
{
  position:absolute;
  height:6vh;
  width: 20vw;
  padding: 3px;
  font-size: 2vw;
  border-radius:3vh;;
  background-color:#00edff;
  top: 46vh;
  left:2vw;
}
.status
{
position: absolute;
font-weight: bold;
  font-size: 2vw;
  text-transform: uppercase;
  color:darkred;
  left:38vw;
  top: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width:27%;

}

.temp
{

  color:#17C5E8;
  background-color:white;
  border-bottom-right-radius: 5vh; 
  border-top-left-radius: 0vh; 
  border-bottom-left-radius: 5vh; 
  font-size: 3vw;
  text-align: center;
  position: absolute;
  top:68vh;
  padding:2vh;
  border-style:solid;
  border-color: #00edff;
  
}
.temp1
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104%;
}
.humidity
{
  color:#17C5E8;
  font-display: flex;
  background-color:white;
  border-bottom-right-radius: 1.5em; 
  border-top-left-radius: 4vw; 
  border-bottom-left-radius: 4vw; 
  font-size: 3vw;
  text-align:end;
  position: absolute;
  padding:2VH;
  border-color: #00edff;
  border-style: solid;
  top:81vh;
}
.humidity1
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55%;
}
.gust
{
  color:#17C5E8;
  background-color:white;
  border-bottom-left-radius: 1.5em; 
  border-top-right-radius: 4vw; 
  border-bottom-right-radius: 4vw; 
  font-size: 3vw;
  text-align: center;
  position:absolute;
  top:81vh;
  padding:2vh;
  border-color: #00edff;
  border-style: solid;
}
.gust1
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 157%;
}
.lastUpdated
{
    color:red;
    position:absolute;
    top:93vh;
    font-size:2vw;
}
/* #locations {
    margin-left: 10px;
    padding: 2px;
    font-size: 1em;
} */

.selectLocation {
  display: flex;
  flex-direction: column;
  max-width: fit-content;
  gap: 1em;

}

.sevenDays{
  display: flex;
  flex-wrap: wrap;
  gap: 1.4em;
  margin: 1vh;
  border: 4px solid green;
  padding: 15px;
  max-width: fit-content;
  top:117vh;
  color:black;
  width:110%;
  font-weight: bold;
  
}

.card {
  border: 2px solid blue;
  border-radius: 4px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sevendaysh
{
  color:deeppink;
  position:absolute;
  font-size: 4vw;
  text-align: right;
  display: flex;
  font-style: oblique;
  font-weight: bolder;
  top:100vh;
}

#mySidenav a {
  position: absolute;
  right: -10px;
  transition: 0.2s; 
  padding: 15px;
  width: 100px; 
  text-decoration: none; 
  font-size: 20px;
  color: white;
  border-radius: 10px 5px 10px 5px; 
  opacity: 100%;
}

#mySidenav a:hover {
  right: 0; 
}


#myBtn{
  top: 15vh;
  background-color: #04AA6D;
  position: absolute; 
  right: -10px; 
  transition: 0.2s; 
  padding: 15px;
  width: 100px;
  text-decoration: none; 
  font-size: 20px; 
  color: white; 
  border-radius: 10px 5px 10px 5px; 
  opacity: 100%;
}

#myBtnB {
  top: 25vh;
  background-color: #f44336;
  position: absolute; 
  right: -10px; 
  transition: 0.2s; 
  padding: 15px; 
  width: 100px; 
  text-decoration: none; 
  font-size: 20px;
  color: white; 
  border-radius: 10px 5px 10px 5px; 
  opacity: 100%;
}

.chart {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 135vh;
}

.modal {
  display: none; 
  position: absolute; 
  z-index: 1; 
  left:0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}


.modal-content {
  background-color: #fefefe;
  margin: 15% auto; 
  padding: 20px;
  border: 1px solid #888;
  border-radius: 10px;
  position: absolute;
  right: 2vh;;
  width: 30%; 
}


.close {
  color: red;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}