.modal {
  position: fixed;
  z-index: 5;
  padding-top: calc((100vh - 540px) / 2);
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
}

.modal-content {
  background: var(--color-purple);
  margin: auto;
  padding: 10px;
  width: 300px;
  position: relative;
}

.close {
  color: black;
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

fieldset {
  border: none;
  text-align: center;
  font-size: 16px;
}
#form-contents {
  display: grid;
  grid-template-areas: "header"
                       "required-note"
                       "personal"
                       "programs"
                       "comments"
                       "feedback"
                       "submit";
}

#form-contents-header {grid-area: header;}

#form-contents-header h3 {margin: 5px 0;}

#form-contents-required {grid-area: required-note;}

#form-contents-required p {
  margin: 0;
  font-size: 14px;
  text-align: right;
}

#form-contents-personal {grid-area: personal;}

input[type=text],
input[type=tel],
input[type=email],
textarea {
  width: 100%;
  margin: 5px 0;
  padding: 5px;
  font-family: var(--font-family-body);
  background: rgba(255,255,255,0.4);
  border: solid 1px black;
  font-size: 16px;
}

input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
textarea:focus {
  outline: none;
  background: rgba(255,255,255,0.6);
}

/* Changes placeholder styles */ 
::placeholder {
  color: black;
  opacity: 1;
  font-size: 16px;
}

#form-contents-programs {
  grid-area: programs;
  padding: 10px;
  text-align: left;
}

#form-contents-comments {grid-area: comments;}

#form-contents-comments textarea {
  resize: none;
  height: 80px;
}

#form-contents-feedback {grid-area: feedback;}

#form-feedback {
  color: red;
  background: white;
  display: inline-block;
  padding: 5px;
}

#form-requests span.hidden {display: none;}

#form-contents-submit {grid-area: submit;}

input[type=submit] {margin: 10px auto;}

input[type=checkbox]{margin: 5px 5px 5px 10px;}

#modal-contact-form {
  overflow: hidden;
  animation: drop-down 0.5s ease 0s forwards;
}

@keyframes drop-down {
  0% {height: 0; padding-top: 0;}
  100% {height: 100%; padding-top: calc((100vh - 540px) / 2);}
}

@keyframes drop-down-landscape {
    0% {height: 0; padding-top: 0;}
    100% {height: 100%; padding-top: calc((100vh - 300px) / 2)};
  }

@media screen and (max-height: 600px) and (orientation: landscape) {
  .modal {padding-top: calc((100vh - 300px) / 2);}
  .modal-content {width: 600px;}
  #form-contents {
    grid-template-areas: "header required-note programs"
                         "header personal programs"
                         "header comments submit"
                         "feedback feedback feedback";
    grid-template-columns: 50px 1fr 1fr;
    grid-template-rows: 25px 130px 90px 32px 0px;
  }
  #form-contents-header {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    padding-left: 10px;
  }
  #form-contents-required p {text-align: center;}
  #modal-contact-form {
    animation: drop-down-landscape 0.5s ease 0s forwards;
  }
}