@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Annie+Use+Your+Telescope&family=Ephesis&family=Mali&family=Tenor+Sans&family=Edu+SA+Beginner&family=Dancing+Script&family=Akaya+Kanadaka&display=swap');

:root {
  --old-rose: oklch(79.82% 0.1307 14.82)/*oklch(74.99% 0.196 14.82)*/;
  --old-rose-backup: #FF9DA5/*#ff7f8c*/;
  --mint-green: oklch(80.12% 0.2042 160.94);
  --mint-green-backup: #0FFFAF;
  --caribbean-current: oklch(45.7% 0.1066 189.02);
  --caribbean-current-backup: #006560;
  --sky-blue: oklch(69.12% 0.1383 214.72);
  --snow: oklch(95% 0.03 9.49);
  --snow-transparent: oklch(95% 0.03 9.49 / 50%);
  --sandy-brown: oklch(79.51% 0.164 60.65);
  --sandy-brown-backup: #FFA44D;
  --crimson: oklch(54% 0.221 17.91);
  --crimson-backup: #CE003B;
  --blush: oklch(95.18% 0.03 20.89);
  --blush-backup: #FFE9E8;
  --mango: oklch(0.8617 0.1937 86.18);
  --lavender: #b698ff;
  --salmon: oklch(77.35% 0.1697 26.71);
  --black: oklch(31.72% 0 0);
  --black-transparent: oklch(31.72% 0 0 / 50%);
  --box-background-color: rgba(32, 32, 32, 0.2);
  --box-standard-shadow: 0.25rem 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.25);
  --depth: 1rem 1rem 2rem #00000050;

  --font-annie: 'Annie Use Your Telescope', cursive;
  --font-alex: 'Alex Brush', cursive;
  --font-ephesis: 'Ephesis', cursive;
  --font-mali: "Mali", cursive;
  --font-tenor-sans: 'Tenor Sans', sans-serif;
  --font-edu: "Edu SA Beginner", cursive;
  --font-dancing-script: "Dancing Script", cursive; /* Used on the Quilt Customizer */
  --font-akaya: "Akaya Kanadaka", system-ui;

  --font-logo: 'Ephesis', cursive;

  font-size: 16px;
}

body {
  background-color: var(--snow);
  margin: 0px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.annie {
  font-family: var(--font-annie) !important;
}
.alex {
  font-family: var(--font-alex) !important;
}
.ephesis {
  font-family: var(--font-ephesis) !important;
}
.tenor-sans {
  font-family: var(--tenor-sans) !important;
}
.mali {
  font-family: var(--font-mali) !important;
}
.edu {
  font-family: var(--font-edu) !important;
}
.dancing-script {
  font-family: var(--font-dancing-script) !important;
}
.akaya-kanadaka {
  font-family: "Akaya Kanadaka", system-ui !important;
}
#header-content,
#header-content-fixed,
#header-content-additional {
  position: relative;
  width: 100%;
  background-color: var(--snow);
  box-shadow: var(--depth);
  z-index: 99;
  padding: 1rem 0;
}
#header-content > div {
  max-width: 70rem;
}
#header-content-fixed {
  position: fixed;
  top: 0;
  transition: opacity 0.5s, visibility 0.5s;
}
#header-main-fixed {
  width: 60rem;
  max-width: 70vw;
}
#header-main-small {
  row-gap: 2rem;
}
#home-section {
  max-width: 90vw;
}
#home-section-test {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100%;
  gap: 1rem;
}

#header-logo,
#header-logo-small,
#header-logo-fixed {
  padding: 0 1.25rem;
  font-size: 3rem;
  font-family: var(--font-logo);
  cursor: pointer;
}
#header-logo-fixed {
  font-size: 3rem;
}
.header-button {
  font-family: var(--font-edu);
  font-size: 1.75rem;
  cursor: pointer;
  text-decoration: underline transparent;
  transition: text-decoration 0.25s ease;
}
a.header-link:hover .header-button {
  text-decoration-color: black;
}
a.header-link {
  color: black;
  text-decoration: none;
  padding: 0 1rem;
}
a.header-link:link, a.header-link:hover, a.header-link:visited {
  color: black;
  text-decoration: none;
}

#information {
  position: relative;
  background: linear-gradient(0deg, #FFFFFF66, #FFFFFF66), url("/pictures/FabricBackground5-Edit.jpg") 0% 0%/cover no-repeat;
  background-color: var(--snow);
  width: 100%;
  z-index: 10;
  flex-grow: 1;
}
.info-section {
  position: relative;
  width: 100%;
  font-family: var(--font-mali);
}
#information.no-background {
  background: none;
  background-image: none;
  background-color: var(--salmon);
}
#information > .table:first-child {
  padding-top: 10rem;
}
#footer {
  height: 6rem;
  background-color: var(--lavender);
}
.information-spacer {
  position: relative;
  height: 10rem;
  background-color: var(--lavender);
  box-shadow: var(--depth);
  z-index: 90;
}
.line {
  height: 0.25rem;
  width: 100%;
  background-color: var(--crimson-backup);
  background-color: var(--crimson);
}
.content {
  width: 100%;
}

.info-section > .table > .tr > .td {
  width: 45rem;
  padding: 3rem 2rem;
}
.info-section > .table > .tr > .td.slim {
  padding: 1rem 2rem;
}
.info-section > .table > .tr > .td.hidden {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.info-section > .table:first-child {
  padding-top: 10rem;
}
.standard-width {
  width: 75vw;
}
.small-width {
  width: 60vw;
}
.dialog-width,
.fixed-width {
  width: 50rem;
  max-width: 40vw;
}
.info-section > .width75p {
  width: 75vw;
}
.gallery-preview-picture {
  max-width: 49rem;
  max-height: 39rem;
  border: 0.25rem solid var(--salmon);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#gallery-preview-content-parent {
  width: 50rem;
  height: 40rem;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
#gallery-preview-content {
  display: inline-block;
  position: relative;
  background-color: var(--salmon);
}

.table {
  display: table;
}
.table.center {
  margin: 0 auto;
}
.center-margin {
  margin: 0 auto;
}
.left-margin {
  margin-left: auto;
}
.right-margin {
  margin-right: auto;
}
.middle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.center-all {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
  vertical-align: top;
}
.td.equal-padding {
  padding: 1rem;
}
.td.middle {
  vertical-align: middle;
}
.caption {
  display: table-caption;
  caption-side: top;
}
.caption.bottom {
  display: table-caption;
  caption-side: bottom;
}
.caption.center {
  text-align: center;
}

.padding {
  padding: 1rem;
}

/* GRIDS */
.grid {
  display: grid;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  gap: 1rem;
}
.grid.information {
  background-color: var(--snow);
  border: 0.25rem solid transparent;
}
.grid.center {
  margin: 0 auto;
}
.grid.columns1 {
  grid-template-columns: repeat(1, minmax(max-content, 1fr));
}
.grid.columns2 {
  grid-template-columns: repeat(2, minmax(max-content, 1fr));
}
.grid.columns2min {
  grid-template-columns: repeat(2, minmax(min-content, 1fr));
}
.grid.columns2auto {
  grid-template-columns: repeat(auto-fill, minmax(calc(73vw / 2), 1fr));
}
.grid.columns3 {
  grid-template-columns: repeat(3, minmax(max-content, 1fr));
}
.grid.columns3min {
  grid-template-columns: repeat(3, minmax(min-content, 1fr));
}
.grid.columns3auto {
  grid-template-columns: repeat(auto-fill, minmax(calc(73vw / 3), 1fr));
}
.grid.columns4 {
  grid-template-columns: repeat(4, minmax(max-content, 1fr));
}
.grid.columns4auto {
  grid-template-columns: repeat(auto-fill, minmax(calc(73vw / 4), 1fr));
}
.grid.columns5 {
  grid-template-columns: repeat(5, minmax(max-content, 1fr));
}
.grid.columns5auto {
  grid-template-columns: repeat(auto-fill, minmax(calc(73vw / 5), 1fr));
}
.grid.columns5min {
  grid-template-columns: repeat(5, minmax(min-content, 1fr));
}
.grid.gap-big {
  gap: 1rem;
}
.grid.gap {
  gap: 0.5rem;
}
.grid.gap-small {
  gap: 0.25rem;
}
.grid.gap-none {
  gap: 0;
}
.grid.hide {
  max-height: 0;
  overflow: hidden;
  border-color: transparent;
  padding: 0;
}
.grid > .heading, .flex > .heading {
  background-color: var(--snow);
  border: 0.5rem solid var(--lavender);
  box-shadow: var(--depth);
  border-radius: 2rem;
}
.grid > .heading.salmon, .flex > .heading.salmon {
  border-color: var(--salmon);
}
.grid > .heading.snow, .flex > .heading.snow {
  border-color: var(--snow);
}
.grid > .heading.mango, .flex > .heading.mango {
  border-color: var(--mango);
  background-color: var(--mango);
}
.grid > .information, .flex > .information {
  background-color: var(--snow);
  border: 0 solid transparent;
}
.grid > .subinformation, .flex > .subinformation {
  background-color: var(--snow-transparent);
  border: 0 solid transparent;
  padding: 1rem;
}
.spacer-first {
  height: 2rem;
}
.grid > .spacer-big {
  height: 5rem;
}
.grid > .spacer, .flex > .spacer {
  height: 2rem;
}
.grid > .spacer-small, .flex > .spacer-small {
  height: 1rem;
}
.grid > .spacer-none, .flex > .spacer-none {
  height: 0;
}
.grid > .colspan2 {
  grid-column: span 2;
}
.grid > .colspan3 {
  grid-column: span 3;
}
.grid > .colspan4 {
  grid-column: span 4;
}
.grid > .colspan5 {
  grid-column: span 5;
}
.grid > .rowspan2 {
  grid-row: span 2;
}
.grid > .rowspan3 {
  grid-row: span 3;
}
.grid > .rowspan4 {
  grid-row: span 4;
}
.grid > .rowspan5 {
  grid-row: span 5;
}
.grid > .rowspan6 {
  grid-row: span 6;
}
.grid > .rowspan7 {
  grid-row: span 7;
}
.grid > .less-padding {
  padding: 0.25rem;
}
.grid > .padding {
  padding: 0.5rem;
}
.grid > .extra-padding {
  padding: 1rem;
}
.grid > .column-header {
  border-bottom: 1px solid var(--black);
}


.flex {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
}
.flex.row {
  flex-flow: row wrap;
}
.flex.column {
  flex-flow: column wrap;
  justify-content: flex-start;
}
.flex > .grow {
  flex-grow: 1;
}
.flex.basis {
  flex-basis: min-content;
}


p {
  font-size: 1.5rem;
  font-family: var(--font-mali);
  margin: 0;
}
#footer > p {
  font-size: 1.5rem;
}
p.underline {
  text-decoration: underline;
}
p.subinfo {
  font-style: italic;
  font-family: var(--font-edu);
  color: #505050;
  text-align: center;
  font-size: 1.25rem;
  padding: 0.1rem;
  background-color: #0000000F;
}
.center:not(.table) {
  text-align: center;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
p.justify {
  text-align: justify;
}
p.big {
  font-size: 2rem;
}
p.small {
  font-size: 1.25rem;
}
p.tiny {
  font-size: 1rem;
}
p.header {
  font-size: 3rem;
  font-family: var(--font-alex);
}
p.header.relaxed {
  font-family: var(--font-annie);
}
hr {
  border: 0;
  border-bottom: 2px dashed var(--salmon);
  width: 100%;
  margin: 1.5rem 0;
}


.collapse-button {
  cursor: pointer;
}
.collapse-button::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  transition: transform 0.5s;
  display: inline-block;
}
.collapse-button.hide::after {
  transform: rotate(-90deg);
}
.collapsable.hide {
  max-height: 0;
  overflow: hidden;
  border-color: transparent;
  padding: 0;
}


a, a:link, a:visited {
  color: var(--black);
  text-decoration: none;
  font-family: var(--font-mali);
  text-decoration: underline;
  display: inline-block;
}
a:hover {
  text-decoration: none;
}
a.no-underline {
  text-decoration: none;
}

.small-format {
  display: none;
}

.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, select {
  font-family: var(--font-edu);
  font-size: 2rem;
  text-align: center;
  border-radius: 5rem;
  outline: none;
  border: 2px solid var(--mango);
  box-shadow: 0.25rem 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.25);
}
input[type="number"] {
  width: 10rem;
  border-color: var(--mango);
  font-family: var(--font-annie);
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

p.button, input[type="radio"] + label {
  font-size: 1.5rem;
  font-family: var(--font-edu);
  background-color: var(--salmon);
  border-radius: 5rem;
  padding: 0.5rem 3rem;
  border: 0.1rem solid black;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
  width: fit-content;
  max-width: 25rem;
  box-shadow: var(--box-standard-shadow);
}
p.button.no-margin {
  margin: 0;
}
p.button.icon {
  padding: 0.5rem 1.5rem;
}
p.button.inline {
  display: inline-block;
}
p.button.mango {
  background-color: var(--mango);
}
p.button.snow {
  background-color: var(--snow);
}
p.button.lavender {
  background-color: var(--lavender);
}
p.button.sandybrown {
  background-color: var(--sandy-brown);
}
p.button.caribbeancurrent {
  background-color: var(--caribbean-current);
}
p.button.mintgreen {
  background-color: var(--mint-green);
}
p.button.crimson {
  background-color: var(--crimson);
  color: var(--snow);
}
p.button.disabled {
  background-color: var(--black-transparent);
  color: var(--snow);
}
p.button:not(.disabled):hover {
  background-image: linear-gradient(-45deg, transparent 40%, #FFFFFF99 50%, transparent 60%);
  background-size: 300%;
  background-position-x: 100%;
  animation: shimmer 0.75s ease-in-out;
}
@keyframes shimmer {
  to {
    background-position-x: 0%;
  }
}

input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  background-color: var(--black);
  color: var(--snow);
  font-family: var(--font-annie);
}
input[type="radio"]:checked + label {
  background-color: var(--salmon);
  color: var(--black);
}
input[type="radio"].sandybrown:checked + label {
  background-color: var(--sandy-brown);
}
input[type="radio"].lavender:checked + label {
  background-color: var(--lavender);
}
input[type="radio"].mango:checked + label {
  background-color: var(--mango);
}
input[type="radio"].mintgreen:checked + label {
  background-color: var(--mint-green);
}



/* Checkbox Switches */
.switch {
  position: relative;
  display: inline-block;
  width: 4rem;
  height: 2rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--black);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 1rem;
}

.slider::before {
  position: absolute;
  content: "";
  height: 1.5rem;
  width: 1.5rem;
  left: 0.25rem;
  bottom: 0.25rem;
  background-color: var(--snow);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 1rem;
}

input:checked + .slider {
  background-color: var(--salmon);
}

input:checked + .slider::before {
  -webkit-transform: translateX(2rem);
  -ms-transform: translateX(2rem);
  transform: translateX(2rem);
}


@keyframes loading {
  0% {
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: translate(-50%, -50%) rotate(180deg);
  }
}
dialog#loading-spinner {
  border: 0;
  background-color: transparent;
}
dialog#loading-spinner > #loading-spinner-out {
  position: fixed;
  transform: translate(-50%, -50%);
  width: 15rem;
  height: 15rem;
  border: 1rem solid var(--salmon);
  animation: loading 5s linear 0s infinite;
}
dialog#loading-spinner > #loading-spinner-middle {
  position: fixed;
  transform: translate(-50%, -50%);
  width: 13rem;
  height: 13rem;
  border: 1rem solid var(--mango);
  animation: loading 4s linear 0s infinite reverse;
}
dialog#loading-spinner > #loading-spinner-in {
  position: fixed;
  transform: translate(-50%, -50%);
  width: 11rem;
  height: 11rem;
  border: 1rem solid var(--lavender);
  animation: loading 3s linear 0s infinite;
}

dialog {
  border: 0.25rem solid var(--salmon);
  background-color: var(--snow);
  outline: 0;
  padding: 0;
  font-family: var(--font-edu);
}
dialog.padding {
  padding: 2rem;
}
dialog.focus::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}



@media screen and (orientation: portrait) {
  :root {
    font-size: 24px;
  }
  .standard-width {
    width: 90vw;
  }
  .dialog-width {
    max-width: 80vw;
  }
  .small-width{
    width: 80vw;
  }
  .large-format {
    display: none;
  }
  .grid.small-format {
    display: grid;
  }
  #header-main-fixed {
    max-width: 90vw;
  }
  .grid.columns3auto {
    grid-template-columns: repeat(auto-fill, minmax(calc(88vw / 3), 1fr));
  }
  .grid.columns4auto {
    grid-template-columns: repeat(auto-fill, minmax(calc(88vw / 4), 1fr));
  }
  .header-button {
    font-size: 2rem;
  }
  #home-section-test {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-auto-rows: 1fr;
  }

  #header-main-admin-mobile-content:popover-open,
  #header-main-fixed-mobile-content:popover-open {
    opacity: 1;
    max-height: 50rem;
  }
  #header-main-admin-mobile-content,
  #header-main-fixed-mobile-content {
    top: 14rem;
    border: 0.1rem solid var(--old-rose);
    margin: 0 auto;
    box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.25);
    background-color: var(--snow);
    opacity: 0;
    max-height: 0;
    transition: opacity 0.75s, display 0.75s allow-discrete, max-height 1.5s;
  }
  #header-main-fixed-mobile-content {
    top: 6rem;
  }
  @starting-style {
    #header-main-admin-mobile-content:popover-open,
    #header-main-fixed-mobile-content:popover-open {
      opacity: 0;
      max-height: 0;
    }
  }

  .mobile-menu-button {
    border: 0;
    background-color: transparent;
    font-size: 1.5rem;
  }

  .mobile-hide {
    display: none;
  }

  .flex.basis {
    flex-basis: max-content;
  }  
}

@media screen and (orientation: landscape) {
  .mobile-show {
    display: none;
  }
}