@font-face {
  font-family: Montserrat;
  src: url("../fonts/Montserrat/Montserrat-Regular.ttf");
  font-display: swap;
}

@font-face {
  font-family: Courgette;
  src: url("../fonts/Courgette/Courgette-Regular.ttf");
  font-display: swap;
}

:root {
  --color-blue: #2136A5;
  --color-purple: #b40f88;
  --color-purple-light: #f3cfe9;
  --color-purple-medium: #F6A9E1;
  --color-purple-dark: #700051;
  --color-orange: #F18714;
  --color-orange-dark: #DE7400;
  --font-family-header: Courgette, serif;
  --font-family-body: Montserrat, sans-serif;
  --font-size-p: calc(1rem + 0.3vw);
  --font-size-p-large: calc(1.1rem + 0.5vw);
  --box-shadow: 5px 5px 15px black;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

h1 { font-size: calc(1.5rem + 2.2vw); }
h2 { font-size: calc(1.3rem + 2vw); }
h3 { font-size: calc(1.1rem + 1.8vw); }
p {
  font-size: var(--font-size-p);
  line-height: 1.3;
}
p.larger-font { font-size: var(--font-size-p-large); }
.larger-font { font-size: var(--font-size-p-large); }

table tr th { font-size: var(--font-size-p); }
table tr td { font-size: var(--font-size-p); }

h1, h2, h3 { font-family: var(--font-family-header); }
p { font-family: var(--font-family-body); }

img { display: block;}

@media only screen and (min-width: 500px) {
  .section-block { padding: 40px 20px; }
}

@media only screen and (max-width: 499px) {
  .section-block { padding: 20px 10px; }
}

.orange { color: var(--color-orange-dark); }

.purple { color: var(--color-purple-medium); }

.purple-dark { color: var(--color-purple); }

.blue {color: var(--color-blue); }

.bg-black-color-white {
  background: black;
  color: white;
}

.standard-button {
  background: none;
  padding: 10px;
  margin: 20px;
  font-family: var(--font-family-body);
  font-size: var(--font-size-p);
  cursor: pointer;
  transition: 0.6s all;
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
}

.standard-button.light {
  color: white;
  border: solid 2px white;
}

.standard-button.dark {
  color: black;
  border: solid 2px black;
}

.standard-button.light:hover {
  box-shadow: inset 0 50px 0 0 white;
  color: black;
}

.standard-button.dark:hover {
  box-shadow: inset 0 50px 0 0 black;
  color: white;
}

a.inline-link:link, a.inline-link:visited, a.inline-link:active {
  color: inherit;
  text-decoration: underline;
}

a.inline-link:hover {
  color: var(--color-purple);
  transition: 0.5s all;
}

:focus {
  outline-color: var(--color-orange);
}

form :focus {
  outline-color: var(--color-blue);
}

/* STYLES FOR ALL PAGES */

.webp header {
  background: linear-gradient(rgba(255,255,255,1) 20%, rgba(255,255,255,0.6), rgba(255,255,255,1)), url(../img/mike-castro-demaria-AQIB4qsI8wI-unsplash_2500x1667.webp) center center no-repeat;
  background-size: cover;
}
.no-webp header {
  background: linear-gradient(rgba(255,255,255,1) 20%, rgba(255,255,255,0.6), rgba(255,255,255,1)), url(../img/mike-castro-demaria-AQIB4qsI8wI-unsplash_2500x1667.jpg) center center no-repeat;
  background-size: cover;
}

header { color: black; }
header h1 { padding: 150px 10px 10px; margin: 0; }
header p { padding: 10px; }

@media only screen and (max-width: 799px) {
  .section-block-inset { padding: 10px; }
  .full-width-div-in-inset-block { margin: 10px; }
}

@media only screen and (min-width: 800px) {
  .section-block-inset { padding: 20px; }
  .full-width-div-in-inset-block { margin: 20px; }
}

.section-block-inset { box-shadow: inset 0 0 25px black; }

.full-width-div-in-inset-block {
  padding: 20px;
  box-shadow: var(--box-shadow);
}

.music-list {
  text-align: left;
}

.music-list li {
  font-size: var(--font-size-p);
  font-family: var(--font-family-body);
  list-style-type: none;
  margin-bottom: 10px;
}

.music-list li::before {
  content: '\266B';
  margin-left: -26px;
  margin-right: 12px;
}

div.hidden, .hidden { display: none; }

/* ADDRESS CONTACT INFO ABOVE NAVBAR */

#address-phone-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: black;
  font-family: var(--font-family-body);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}

#address-phone-nav a:not(#nav-hamburger) {
  color: white;
  padding: 5px 20px;
  font-size: calc(0.68rem + 0.1vw);
}

#address-phone-nav a {
  text-decoration: none;
}

#address-phone-nav a:hover {
  text-decoration: underline;
}

#address-phone-nav #nav-hamburger:hover {
  text-decoration: none;
  cursor: pointer;
}

/* NAVBAR ON ALL PAGES */

#page-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-links {
  cursor: pointer;
  background: none;
  font-family: var(--font-family-body);
  font-size: var(--font-size-p);
  border: none;
  text-decoration: none;
}

.current-page { font-weight: 800; }
.socmed-logo { padding: 10px; }

/* Careful, this media query is also used in javascript (colors.js)*/
@media only screen and (max-width: 999px) {

  .nav-hidden { width: 0; }
  .nav-shown { width: 250px; }

  nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    background: rgba(0,0,0,0.8);
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 20px;
    z-index: 10;
    box-shadow: var(--box-shadow);
    transition: 0.5s;
  }
  #page-nav { flex-direction: column; }
  .navbar-links {
    color: white;
    padding: 10px;
  }
  .navbar-links:hover, .navbar-links:active, .navbar-links:target, .navbar-links:focus, .navbar-links:focus-visible {
    background: url("../img/PinkSquiggleDark.png") center center no-repeat;
    background-size: contain;
  }

  .current-page {
    background: url("../img/PinkSquiggleDark.png") center center no-repeat;
    background-size: contain;
  }

  #nav-home-logo { display: none; }

  #close-nav {
    color: white;
    font-size: 36px;
    text-decoration: none;
    top: 5px;
    right: 10px;
    margin-left: 180px;
    padding: 5px;
    background: none;
    border: none;
  }
  #close-nav:hover {
    cursor: pointer;
  }
  #address-phone-nav {
    min-height: 40px;
    padding-right: 20px;
  }
  #nav-hamburger {
    position: absolute;
    top: 0;
    right: 0;
    text-decoration: none;
    background: none;
    border: none;
  }
}

@media only screen and (min-width: 1000px) {
  nav {
    position: sticky;
    top: 28px;
    height: 28px;
    z-index: 5;
  }
  #page-nav {
    background: white;
    position: sticky;
    top: 0;
  }
  .navbar-links {
    color: black;
    padding: 10px 1.5vw;
  }
  .navbar-links:hover, .navbar-links:active, .navbar-links:target, .navbar-links:focus, .navbar-links:focus-visible {
    background: url("../img/PinkSquiggle.png") center center no-repeat;
    background-size: contain;
  }

  .current-page {
    background: url("../img/PinkSquiggle.png") center center no-repeat;
    background-size: contain;
  }

  #address-phone-nav {
    height: 28px;
  }

  #nav-home-mobile { display: none; }
  #nav-home-logo { display: block; background: none; }
  #nav-home-logo:hover { background: none; }
  #close-nav { display: none; }
  #nav-hamburger { display: none; }
}

/* FOOTER */

.webp footer {
  background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)), url(../img/denise-jans-RQ0_Fp2Hr2M-unsplash_rotate_2500x1400.webp) center top no-repeat;
  background-size: cover;
}
.no-webp footer {
  background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)), url(../img/denise-jans-RQ0_Fp2Hr2M-unsplash_rotate_2500x1400.jpg) center top no-repeat;
  background-size: cover;
}

footer {
  margin: 0;
  padding: 20px 10px;
  color: white;
  background: black;
}

#footer-info {
  flex-flow: row wrap;
  max-width: 1000px;
  margin: auto;
}

#footer-info div {
  align-self: center;
  padding: 15px 0;
}

#footer-info a {
  font-family: var(--font-family-body);
  font-style: normal;
  text-decoration: none;
  color: white;
  padding: 10px;
  display: inline-block;
  font-size: var(--font-size-p);
}

#footer-info a:hover {
  color: var(--color-purple-medium);
}

#footer-hours p {
  margin-top: 0;
}

#footer-copyright p {
  margin: 0 auto;
}

#footer-copyright a {
  text-decoration: none;
  color: white;
}

#footer-copyright a:hover {
  color: var(--color-purple-medium);
}

#footer-copyright #kudzera {
  text-decoration: underline;
}

/* ERROR PAGE */

.webp #error-text-container {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(../img/de-an-sun-b57RqS-nQ1c-unsplash_2500x1667.webp) center center no-repeat fixed;
  background-size: cover;
}
.no-webp #error-text-container {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(../img/de-an-sun-b57RqS-nQ1c-unsplash_2500x1667.jpg) center center no-repeat fixed;
  background-size: cover;
}

#error-text-container {
  height: 50vh;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* MODALS */

.modal {
  position: fixed;
  display: flex;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  overflow: auto;
  align-items: center;
  justify-content: center;
}

.modal-content {
  flex: 1;
  background: white;
  position: relative;
  margin: 10px;
  padding: 20px;
  box-shadow: var(--box-shadow);
  overflow-y: auto;
  max-width: 700px;
  max-height: calc(100vh - 20px);
  font-family: var(--font-family-body);
  font-size: var(--font-size-p);
}

.modal-content h3, .modal-content h2 {
  margin: 0 25px;
}

.modal-content div,
.modal-content p,
.modal-content label,
.modal-content legend {
  font-size: 18px;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="date"],
form input[type="time"],
form textarea,
form select {
  border: none;
  background: #eee;
  margin: 5px 0;
  padding: 5px;
  vertical-align: middle;
  width: 100%;
  height: 28px;
  font-size: 16px;
  font-family: var(--font-family-body);
}

form textarea {
  display: block;
  height: 75px;
  resize: vertical;
}

fieldset {
  border: solid 2px var(--color-blue);
}

legend {
  margin: 0 10px;
  padding: 10px 10px 5px 10px;
  color: var(--color-blue);
}

.submit-button {
  width: fit-content;
  background: none;
  border-color: var(--color-blue);
  padding: 5px 10px;
  margin: 20px;
  cursor: pointer;
  transition: 0.3s all;
  display: inline-block;
  text-decoration: none;
  font-size: var(--font-size-p);
  font-family: var(--font-family-body);
  color: var(--color-blue);
}

.submit-button:hover {
  background: var(--color-blue);
  color: white;
  appearance: none;
  -webkit-appearance: none;
}

.feedback-text, #modal-feedback-text {
  display: block;
}

.required::after { content: " *"; }

.modal-block, .form-block {
  display: grid;
  grid-template-rows: auto;
}

.form-block p {
  padding: 0;
  margin: 0;
}

.close-modal {
  position: absolute;
  color: black;
  font-size: 40px;
  text-decoration: none;
  top: 5px;
  right: 15px;
  padding: 10px;
  background: none;
  border: none;
}

.close-modal:hover { cursor: pointer; }

p.modal-note {
  margin: 0 5px 5px;
  font-size: 15px;
  font-style: italic;
}

/* SPECIFIC TO EACH MODAL (EXCEPT TEACHERS) */
.modal-adult-name { grid-area: name; }
.modal-adult-phone { grid-area: phone; }
.modal-adult-email { grid-area: email; }
.modal-instrument-at-home { grid-area: instrument; }
.modal-hear-about { grid-area: hear-about; }

.modal-child-name { grid-area: name; }
.modal-child-birthday { grid-area: birthday; }
.modal-child-school { grid-area: school; }

/* CONTACT US */
#contact-modal-info #contact-name { grid-area: name; }
#contact-modal-info #contact-phone { grid-area: phone; }
#contact-modal-info #contact-email { grid-area: email; }
#contact-modal-info #contact-comments { grid-area: comments; }

/* PRIVATE LESSON AVAILABILITY */
#private-lesson-avail-modal #private-lesson-avail-days-table { grid-area: day-table; }
#private-lesson-avail-modal #private-lesson-avail-days-extra { grid-area: day-extra-info; }
#private-lesson-avail-modal #private-lesson-avail-start-date { grid-area: start-date; }
#private-lesson-avail-modal #private-lesson-avail-start-date-note { grid-area: start-date-note; }
#private-lesson-avail-modal #private-lesson-avail-lesson-length { grid-area: lesson-length; }

#private-lesson-avail-modal #lesson-interest-child-or-adult-wrapper { grid-area: child-or-adult; }
#private-lesson-avail-modal #private-lesson-avail-instruments-at-home-list { grid-area: instruments; }
#private-lesson-avail-modal #private-lesson-avail-experience { grid-area: experience; }

/* PRIVATE LESSON REGISTRATION */
#modal-lesson-details #lesson-instrument { grid-area: instrument; }
#modal-lesson-details #lesson-teacher { grid-area: teacher; }
#modal-lesson-details #lesson-time { grid-area: time; }


@media only screen and (max-width: 649px) {
  .modal {padding-top: 20px; }
  
  .form-block {
    grid-gap: 5px;
  }
  .modal-adult-info {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 
      "name"
      "phone"
      "email"
      "instrument"
      "hear-about";
  }
  .modal-child-info {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 
      "name"
      "birthday"
      "school";
  }
  #contact-modal-info {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:
      "name"
      "phone"
      "email"
      "comments";
  }
  #modal-lesson-details {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:
      "instrument"
      "teacher"
      "time";
  }
  #private-lesson-avail-days {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 
      "day-table"
      "lesson-length"
      "day-extra-info"
      "start-date"
      "start-date-note";
  }
  #private-lesson-avail-instruments-experience {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:
      "child-or-adult"
      "instruments"
      "experience";
  }
  #private-lesson-avail-modal .modal-content {
    padding: 5px;
  }
}

@media only screen and (min-width: 650px) {
  .form-block {
    grid-gap: 10px;
  }
  .modal-adult-info {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
      "name phone email"
      "instrument instrument instrument"
      "hear-about hear-about hear-about";
  }
  .modal-child-info {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
    "name birthday school";
  }
  #contact-modal-info {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "name phone email"
      "comments comments comments";
  }
  #modal-lesson-details {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "instrument teacher time";
  }
  #private-lesson-avail-days {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
      "day-table day-table lesson-length"
      "day-table day-table start-date"
      "day-table day-table start-date-note"
      "day-extra-info day-extra-info day-extra-info";
  }
  #private-lesson-avail-instruments-experience {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "child-or-adult child-or-adult child-or-adult"
      "experience instruments instruments";
  }
}

#private-lesson-avail-instruments-experience #private-lesson-avail-instruments-at-home-list {
  display: block;
}
#private-lesson-avail-instruments-experience.no-instruments {
  grid-template-columns: repeat(1, 1fr);
  grid-template-areas:
    "child-or-adult"
    "experience";
}
#private-lesson-avail-instruments-experience.no-instruments #private-lesson-avail-instruments-at-home-list {
  display: none;
}

.error {
  color: red;
}