*:focus {
  outline: none;
}
body {
  background-color: gray;
}
#main {
  position: absolute;

  left: 40%;
  

  

  border: 5px solid rgb(204, 220, 219);
  padding: 20px;
  border-radius: 10px;
  background-color: rgb(254, 254, 254);
}
.input-box {
  height: 40px;

  width: 350px;

  

  border-radius: 10px;
  margin: 20px;
  box-shadow: 3px 3px 3px 3px #e7e2e2;
  border-color: rgb(245, 241, 241);
}
input {
  background-image: url("icon.png");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 25px;
  padding-left: 40px;
}
.wrapper {

  

  max-width: 450px;


  display: flex;
  overflow-x: auto;
}

.wrapper .item {
  min-width: 80px;

  height: 100px;
  text-align: center;

  margin: 3px;
 
}
button{
  background-color: white;
  border: none;
}
button:hover{
  border: 2px solid rgb(15, 209, 235);
  
}

.inner-div {
  border: 4px solid rgb(246, 248, 247);
}
.temp {
  display: flex;
  justify-content: space-around;
}


.inner-div {
  border: 4px solid mintcream;
}

.temp1 {
  min-width: 150px;
  margin: 10px;
  padding-left: 10px;
  text-align: left;
  font-size: 30px;

  

}
h1 {
  font-size: 20px;
}
.temp2 {
  min-width: 150px;

  background-color: rgb(231, 244, 248);

  

  margin: 10px;
  text-align: center;
  padding: 10px;
}

.sun{
  display: flex;
  justify-content: space-between;
}
.time{
  display: flex;
  justify-content: space-between;
}
#section-1{
  display: none;
}
#section-2{
  display: none;
}
#section-3{
  display: none;
}
#section-4{
  display: none;
}
#section-5{
  display: none;
}
#section-6{
  display: none;
}
.vl {
  border-left: 6px solid rgb(200, 186, 186);
  height: 200px;
}
.day{
  font-size: 17px;
  font-weight: 5px;
  margin: 2px;
}

@media only screen and (max-width: 800px) {
  #main {
    position: absolute;
    left:2%;
    padding:5px;
    
  }
}