/* FRONT END STYLES */
.garrett-unhide {
  display: none;
}

.alertBar {
  display: block;
  background-color: #ffcc00;
  text-align: left;
  cursor: pointer;
  padding: 0.5em 0 0.5em 0.5em;
  background: linear-gradient(177deg, rgb(255, 255, 255) 0%, rgb(255, 204, 0) 50%, rgb(255, 240, 182) 75%);
  margin-right: 0;
  margin-left: 0;
  ;

  & p {
    margin: 0;

    &>* {
      padding-right: 0.5em;
    }
  }

  & a {
    color: #000000;
    text-decoration: underline;
  }

  &>div {
    padding-left: 0;
    padding-right: 0;
  }
}

.youtube-video {
  display: flex;
  justify-content: center;
  margin-bottom: 3em;

  & iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
}

/* Form */

.contact_form {
  margin-bottom: 2em;

  & fieldset {
    width: 100%;
    display: grid;
    grid-template-columns: 125px 1fr;
  }

  & input,
  select,
  textarea,
  button:not([type="submit"]) {
    width: 100%;
    margin: 0.5em 0;
    padding: 0.5em;
    border: 1px solid #cccccc;
    border-radius: 7px;
    transition: border-color .25s ease-in-out;
    outline: none;

    &:focus {
      border: 1px solid #00779b;
    }
  }

  & label {
    margin-top: 0.5em;
  }

  & textarea {
    min-height: 150px;
    max-height: 500px;
    resize: vertical;
  }

  & button {
    border: none;
    border-radius: 7px;
    color: #ffffff;
    margin: 0.5em 0;
    padding: 0.5em;
    transition: background-color .25s ease-in-out;
    background-color: #aaaaaa;
    white-space: nowrap;

    &:hover {
      background-color: #00779b;
    }
  }

  & button[type="submit"] {
    position: relative;
    left: 125px;
  }

}

@media (max-width: 768px) {
  .contact_form fieldset {
    grid-template-columns: calc(125px * 0.75) 1fr;
  }
}

/* Weather */

#weather .weather {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;

  & .left {
    align-items: end;
    display: grid;
  }

  & .right {
    align-items: end;
    display: grid;
    gap: 1em;
  }

  & .datetime {
    font-size: 0.8em;
  }

  & h3 {
    margin-top: 1em;
    margin-bottom: 0;
    color: #00779b;
  }

  & h4 {
    font-size: 2em;
    margin-top: 0.1em;
  }

  & h5 {
    color: #00779b;
    text-transform: capitalize;
  }

  & .temps,
  .info,
  .dayCycle {

    & span:first-of-type {
      text-transform: capitalize;
    }

    & span:last-of-type {
      font-weight: bold;
    }
  }

  & form {
    margin-top: 4em;
  }
}

@media (max-width: 767px) {
  #weather .weather {
    display: block;

    & form {
      margin: 2em 0;
    }
  }
}