.imagAndLegend {
  /* border: 1px solid black; */
  padding-bottom: 30px;

  margin-left: auto;
  margin-right: auto;
}

.imagAndLegend img {
  margin: 0;
}

.imagAndLegend p {
  text-align: right;
}

#weather_examples_container {
  width: 80%;

  margin-left: auto;
  margin-right: auto;

  display: grid;
  /* grid-template-columns: 1fr 1fr; */

  /* This garantees that the columns will have the same width */
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0px 20%;
}

#weather_examples_container img {
  margin: 0;
}

#weather_examples_container p {
  font-size: 0.9rem;
}

/* .clear_overcast_examples {
  width: 80%;

  margin-left: auto;
  margin-right: auto;
} */

/* .clear_overcast_examples img {
  width: 100%;
} */

#questions_container {
  display: grid;
  grid-template-columns: 80% 45px auto;
  gap: 10px 0px;
}

#questions_container div {
  /* border: 1px solid black; */
}

#questions_container input {
  width: 40px;
  /* height: 30px; */
}

#questions_container p {
  margin: 0;
}

#button_container {
  position: relative;
  height: 55px;
}

#button_container button {
  background-color: white;
  border: 1px solid black;

  padding: 15px;

  margin-left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);

  box-shadow: 3px 3px 0px black;

  /* Animation */
  -webkit-transition: margin-top 0.1s linear, box-shadow 0.1s linear;
  -moz-transition: margin-top 0.1s linear, box-shadow 0.1s linear;
  -ms-transition: margin-top 0.1s linear, box-shadow 0.1s linear;
  -o-transition: margin-top 0.1s linear, box-shadow 0.1s linear;
  transition: margin-top 0.1s linear, box-shadow 0.1s linear;
}

#button_container button:hover {
  cursor: pointer;

  margin-top: -3px;

  /* box-shadow: 3px 6px 0px black; */
}

#button_container button p {
  margin: 0;
  /* margin-bottom: 10px; */
}

hr {
  border-top: 1px dashed black;
}

ul {
  padding-left: 20px;
}

#side_by_side_photo_container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 10px;

  margin-top: 20px;
  margin-bottom: 30px;
}

#side_by_side_photo_container img {
  margin-bottom: 0;
}

iframe.youtube {
  position: block;
  height: 55.5%;
  width: 100%;
  /* margin-bottom: 40px; */
}

div#hidden_text {
  /* background-color: pink; */
  /* display: none; */

  max-height: 80px;
  position: relative;
  overflow: hidden;

  -webkit-mask-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0, 0, 0, 1)),
    to(rgba(0, 0, 0, 0))
  );

  /* Trying to animate the max-height so it can 
     open the div smoothly */
  /* -webkit-transition: max-height 10s ease-in;
  -moz-transition: max-height 10s ease-in;
  -ms-transition: max-height 10s ease-in;
  -o-transition: max-height 10s ease-in;
  transition: max-height 10s ease-in; */
}

.noOpacityGrandient {
  -webkit-mask-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0, 0, 0, 1)),
    to(rgba(0, 0, 0, 1))
  ) !important;
}

@media only screen and (max-width: 800px) {
  #side_by_side_photo_container {
    grid-template-columns: 1fr;
  }
}