body {
  background-image: linear-gradient(to top, rgb(215, 216, 209), pink);
  background-size: cover;
  display: grid;
  justify-content: center;
  align-items: center;
  margin:auto;
  grid-template-areas:
    "header"
    "form div div"
    "table"
    "div"
    "main"
    "footer";
}

header {
  color: red;
  font-size: 50px;
  text-align: center;

}

.get-zip-code,
.weather {
  position: relative;
  float: center;
  text-align: center;
margin:auto;
}

#search:hover {
  color: red;
}

#zipcode {
  width: 60px;
  height: 20px;
  justify-self: center;
}

.WeatherMessage {
  margin-top: 10px;
  position: relative;
  color: rgb(243, 42, 42);
  font-size: 20px;


}

.display-header {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: bolder;
}

#select-month,
#select-year {
  display: inline;
  position: relative;
  margin:auto;
  margin-top: 20px;

  border: 2px rgb(34, 32, 32) solid;
  padding: 4px;
  font-size: 20px;
  background-color: rgb(250, 245, 250);
}

.grid {
  border-collapse: collapse;
  font-size: 1em;
  /* min-width: 400px; */
  width:90vw;
  align-items: center;
}

.grid thead th {
  text-align: center;
  background-color: rgb(187, 233, 245, 0.6);
  height: 25px;
}

.grid th,
.grid td {
  height: 20px;
  padding: 2px;
  text-align: center;
  border: 1px black solid;
  background-color: rgb(250, 240, 255, .5);
}

.grid td {
  height: 50px;
  font-size: 20px;
}

.grid tbody tr {
  border: 1px black solid;

}

.holiday-name {
  color: rgb(2, 7, 59);
  text-align:center;

}

.holiday-date {
  color: rgba(161, 10, 243, 0.5);
  text-align: center;

}

.holidayname {
  color: rgb(26, 159, 192);
  font-size: 20px;
  font-weight: bold;
  text-align: center;

}



#select-year {
  float: right;
}

.two-buttons {
  margin-top: 10px;
  margin-bottom: 10px;
}

.description {
  font-size: 20px;
  text-align: center;
}

.itstoday {
  background-color: rgb(238, 197, 83);
}

footer {

  text-align: center;
  font-size: 16px;
  color: rgb(247, 197, 197);
  opacity: .9;
  margin:0;
  margin-top: 10px;
  bottom:0;
}

@media only screen and (max-width: 1200px) {

  .grid{
    width:90%;
    align-items: center;
    margin:auto;
  }

  #select-month,
  #select-year {
    margin-top: 10px;

  }

  #select-year {
    float: right;
  }

  .display-header {
    width: 100%;
  }

  .grid th,
  .grid td {
    text-align: center;
    border: 1px rgb(17, 3, 77) solid;
    background-color: rgb(238, 215, 250, .5);

  }

  .grid thead th {
    text-align: center;
    background-color: rgb(17, 233, 245, 0.6);
  }

  .grid td {
    height: 100px;
    font-size: 16px;
  }

}

.itstoday {
  background-color: rgb(238, 197, 83);
  color: red;
  font-weight: bolder;
}


@media only screen and (max-width: 600px) {
 
  .grid{
    width:90vw;
    align-items: center;
    margin:auto;
  }


  #select-year {
    float: right;
  }

  .grid thead th {
    text-align: left;
  }

  .grid th,
  .grid td {
    text-align: left;
    height: 80px;
    font-weight: lighter;

  }

  .holiday-name {
    font-size: 12px;
  }

  .holiday-description {
    font-size: 30px;
    text-align: center;
  }

}

@media only screen and (max-width: 375px) {
  body{
    width:80%;
    margin:auto;

  }
  .grid{
    width:80vw;
    /* margin-left:20px;
    margin-right:20px; */
    margin:auto;
  }
  #select-year {
    margin-right:0;
    float: right;
  }
  .holiday-description{
    text-align: center;
    font-size: 16px;

  }
  .grid td{
    height:150px;
   
  }
  .grid thead th{
    height:60px;
  }
  header{
    text-align: center;
  }
  .get-zip-code,
.weather{
  justify-self: center;
  margin-left: 90px;
}
.holidayname{
  font-size: 14px;
  text-align: center;
}
  #select-month,
.display-header, .description{
  margin-left:90px;
}
}