/* Small/Phone View ***************/
/* the onclick JS toggles the .reponsive class from display none (.navigation li) to display block because the responsive class is added to the end of the class list like this in HTML.
  <ul class="navigation responsive">
*/
.responsive li {
  display: block;
}

.responsive a.ham::before {
  content: "❌";
}

.active {
  background: #081c15;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

/* Media Query for medium+ views */
@media only screen and (min-width: 768px) {
  .navigation {
    display: flex;
  }

  .navigation li {
    display: block;
    /* change state in small view */
    flex: 1 1 auto;
  }

  .navigation li:first-child {
    display: none;
  }
}

@media (max-width: 650px) {
  main {
    padding: 0 5%;
    margin: 0;
  }
  header #site-title {
    padding: 0 5%;
    text-align: center;
    font-size: 20px;
  }
  header #site-motto {
    padding-top: 5%;
  }
  header #site-logo img {
    padding-right: 20px;
  }

  legend {
    font-size: 2.1rem;
  }

  footer p {
    font-size: 1.1rem;
  }
  main .sub-container-form1 {
    text-align: left;
    padding: 0 4%;
    grid-column: 1/13;
    grid-row: 1/3;
  }
  main .sub-container-form2 {
    margin-top: 10%;
    padding: 4%;
    grid-column: 1/13;
    grid-row: 2/3;
  }
  main label.top input {
    max-width: 92%;
  }
}

@media (max-width: 650px) {
  .navigation a {
    font-size: clamp(1rem, 2vmin, 1.5rem);
  }

  video {
    width: 400px;
    height: 250px;
  }

  .cards {
    grid-template-columns: 1fr;
  }
}