/*
Theme Name: YanchenYe.com
Author: Yanchen Ye
Author URI: www.yanchenye.com
Description: The supporting theme for YanchenYe.com
Version: 1.0.0
*/

/* ================================================================= IMPORT FONTS ================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wdth,wght@0,6..12,75..125,200..1000;1,6..12,75..125,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gilda+Display&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");

@font-face {
  font-family: "KaiTi";
  src: local("KaiTi"), url("assets/KaiTi.woff2") format("woff2");
  unicode-range: U+4E00-9FA5;
  font-display: swap;
}

@font-face {
  font-family: "SimSun";
  src: local("SimSun"), url("assets/SimSun.woff2") format("woff2");
  unicode-range: U+4E00-9FA5;
  font-display: swap;
}

@font-face {
  font-family: "SourceHan";
  src: local("Source Han Serif SC VF Medium"),
    url("assets/SourceHanSerifCN-Medium.woff2?v=2") format("woff2");
  unicode-range: U+4E00-9FA5;
  font-display: swap;
}

/* ================================================================= GLOBAL SETUPS ================================================================= */
/* Static Global Variables */
:root {
  font-family: var(--regular-font);
  text-decoration-thickness: 1px;
  --standard-horizontal-margin: var(--xl);
  --standard-vertical-margin: var(--xl);
  --standard-padding: var(--m);
  --standard-gap: var(--s);
  --standard-border: 1px solid;
  --standard-border-radius: 8px;
  --standard-ui-border-radius: 1em;
  /* Buttons */
  --standard-button-font: var(--opensans);
  --standard-button-padding: var(--xs) var(--s);
  --standard-tag-padding: 0.1em var(--s);
  --standard-button-border: var(--standard-border);
  --standard-button-border-radius: var(--standard-ui-border-radius);
  --standard-tag-border-radius: var(--m);
  --standard-button-letter-spacing: -0.5pt;
  /* Input */
  --standard-input-font: var(--opensans);
  --standard-input-padding: var(--xs) var(--s);
  --standard-input-border: var(--standard-border);
  --standard-input-border-radius: var(--standard-border-radius);
  /* animation */
  --standard-transition: all 0.3s;
  /* Fonts */
  --regular-font: "Nunito Sans", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --libre-franklin: "Libre Franklin", "Noto Sans SC", "Microsoft YaHei",
    sans-serif;
  --opensans: "Open Sans", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --notoserif: "Noto Serif", "SimSun", serif;
  --playfair: "Playfair Display", "SourceHan", serif;
  --glida: "Gilda Display", "SourceHan", serif;
  /* Scrollbar */
  --scrollbar-track-color: #232323;
  --scrollbar-track-active-color: #2b2928;
  --scrollbar-thumb-color: #707070;
  --scrollbar-thumb-hover-color: #4c4a48;
  --scrollbar-thumb-active-color: #3b3938;
  --scrollbar-thumb-shadow: 0 0 2px black;
  --scrollbar-thumb-border-radius: 10px;

  /* To be sorted */
  /* --window-border-radius: 30px; */
  --footer-fontsize: 12pt;
  /* --meta-fontsize: 13pt;
  --meta-fontspace: 1pt;
  --svg-padding: 13px;
  --movement-size: 23pt; */
  
  a,
  .button,
  input,
  svg {
    transition: var(--standard-transition);
  }
}

@media screen and (min-width: 1500px) {
  :root {
  --xxl: 5rem;
  --xl: 3rem;
  --l: 1.5rem;
  --m: 1rem;
  --s: 0.75rem;
  --xs: 0.5rem;
  --xxs: 0.3em;
  --header-size: 60px;
  --scrollbar-size: 15px;
  font-size: clamp(14pt, 0.6vw, 20pt);
  --standard-content-width: 950px;
  --standard-plate-width: 1920px;
  --standard-horizontal-margin: clamp(5rem, 6vw, 7rem);
  }
}

@media screen and (max-width: 1499px) and (min-width: 1100px) {
  :root {
  --xxl: 4rem;
  --xl: 2.5rem;
  --l: 1.5rem;
  --m: 1rem;
  --s: 0.75rem;
  --xs: 0.5rem;
  --xxs: 0.3em;
  --header-size: 60px;
  --scrollbar-size: 6px;
  font-size: 13pt;
  --standard-content-width: 950px;
  --standard-plate-width: 1200px;
  --standard-horizontal-margin: clamp(2rem, 5vw, 4rem);
  }
}

@media screen and (max-width: 1099px) and (min-width: 750px) {
  :root {
  --xxl: 4rem;
  --xl: 2.3rem;
  --l: 1.5rem;
  --m: 1rem;
  --s: 0.75rem;
  --xs: 0.5rem;
  --xxs: 0.3em;
  --header-size: 60px;
  --scrollbar-size: 6px;
  font-size: 13pt;
  --standard-content-width: 750px;
  --standard-plate-width: 800px;
  }
}

@media screen and (max-width: 749px) {
  :root {
  --xxl: 3rem;
  --xl: 2rem;
  --l: 1.4rem;
  --m: 1rem;
  --s: 0.75rem;
  --xs: 0.5rem;
  --xxs: 0.3em;
  --header-size: 60px;
  --scrollbar-size: 4px;
  font-size: 12pt;
  --standard-content-width: 750px;
  --standard-plate-width: 750px;
  }
}

/* Scrollbar */
/* ::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-track-color);
}
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  box-shadow: var(--scrollbar-thumb-shadow);
  border-radius: var(--scrollbar-thumb-border-radius);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover-color);
}
::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active-color);
}

::-webkit-scrollbar-track:active {
  background-color: var(--scrollbar-track-active-color);
} */

/* fonts */
.opensans {
  font-family: var(--opensans);
}

.libre-franklin {
  font-family: var(--libre-franklin);
}

.playfair {
  font-family: var(--playfair);
}

.glida {
  font-family: var(--glida);
}

/* Animations */

@keyframes green-in {
  from {
    background-color: #9dc384;
  }
}

/* ================================================================= CANVAS Color Schemes ================================================================= */

/* Black-white Canvas */
section.blackwhite,
footer.blackwhite,
header.blackwhite,
dialog.blackwhite,
.blackwhite.colorscheme {
  /* Basic */
  --color: #ccc;
  --brighten-color: white;
  --soften-color: #999;
  --background-color: #0a0a0a;
  --semi-transparent-background-color: #0000004d;
  --alternate-background-color: #161a1c;
  --alternate-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  --border-color: #444444;
  --soften-border-color:#333333;
  --hover-color: #eee;
  /* --svg-clickable-hover-filter: brightness(130%); */
  --background-shadow: 0 300px 300px #0000004d inset,
    0 -100px 100px #a0a0a01a inset;
  --scrollbar-track-color: transparent;
  --scrollbar-track-active-color: transparent;
  /* Buttons */
  --button-font-weight: 500;
  --button-color: #a3b6cf;
  --button-background-color: transparent;
  --button-border-color: #a3b6cf;
  --button-shadow: none;
  --button-hover-color: #d0d0d0;
  --button-hover-background-color: #2b3437;
  --button-hover-border-color: #a3b6cf;
  --button-active-color: #a3b6cf;
  --button-active-background-color: #1e2426;
  --button-active-border-color: #a3b6cf;
  /* Accented Buttons */
  --accented-button-font-weight: 500;
  --accented-button-color: black;
  --accented-button-background-color: #839dbe;
  --accented-button-border-color: #839dbe;
  --accented-button-shadow: none;
  --accented-button-hover-color: black;
  --accented-button-hover-background-color: #a3b6cf;
  --accented-button-hover-border-color: #a3b6cf;
  --accented-button-active-color: black;
  --accented-button-active-background-color: #7088a9;
  --accented-button-active-border-color: #a3b6cf;
  /* SVG Toggles */
  --toogle-background-color: transparent;
  --toggle-border-color: transparent;
  --toogle-hover-background-color: #333;
  --toggle-hover-border-color: #4c4c4c;
  --toogle-active-background-color: #232325;
  --toggle-active-border-color: #4c4c4c;
  /* Input Boxes */
  --input-color: var(--soften-color);
  --input-placeholder-color: var(--soften-color);
  --input-background-color: #eee;
  --input-border-color: var(--border-color);
  /* --input-svg-clickable-hover-filter: brightness(70%); */
  --input-hover-color: var(--input-color);
  --input-hover-background-color: #333;
  --input-hover-border-color: #333;
  --input-focus-color: black;
  --input-focus-background-color: var(--input-background-color);
  --input-focus-border-color: var(--input-border-color);
  --input-focus-shadow: 1px 1px 3px #00000080 inset;
}

/* Dark Canvas */
section.dark,
footer.dark,
header.dark,
dialog.dark,
.dark.colorscheme {
  /* Basic */
  --color: #ccc;
  --brighten-color: white;
  --soften-color: #999;
  --background-color: #232323;
  --alternate-background-color: #2e2f2f;
  --semi-transparent-background-color: #0000004d;
  --alternate-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  --border-color: #a0a0a0;
  --soften-border-color: #4b4b4b;
  --hover-color: #eee;
  /* --svg-clickable-hover-filter: brightness(130%); */
  --background-shadow: 0 300px 300px #0000004d inset,
    0 -100px 100px #a0a0a01a inset;
  --scrollbar-track-color: transparent;
  --scrollbar-track-active-color: transparent;
  /* Buttons */
  --button-font-weight: 400;
  --button-color: #c1b98d;
  --button-background-color: transparent;
  --button-border-color: #c1b98d;
  --button-shadow: none;
  --button-hover-color: #dfd9b9;
  --button-hover-background-color: #333;
  --button-hover-border-color: #c1b98d;
  --button-active-color: #cac18d;
  --button-active-background-color: #222;
  --button-active-border-color: #c1b98d;
  /* Accented Buttons */
  --accented-button-font-weight: 500;
  --accented-button-color: #232323;
  --accented-button-background-color: #bc9c53;
  --accented-button-border-color: #bc9c53;
  --accented-button-shadow: none;
  --accented-button-hover-color: #232323;
  --accented-button-hover-background-color: #ecb941;
  --accented-button-hover-border-color: #c1b98d;
  --accented-button-active-color: #232323;
  --accented-button-active-background-color: #b58e33;
  --accented-button-active-border-color: #c1b98d;
  /* SVG Toggles */
  --toogle-background-color: transparent;
  --toggle-border-color: transparent;
  --toogle-hover-background-color: #333;
  --toggle-hover-border-color: #4c4a48;
  --toogle-active-background-color: #232323;
  --toggle-active-border-color: #4c4a48;
  /* Input Boxes */
  --input-color: #232323;
  --input-placeholder-color: #888;
  --input-background-color: #eee;
  --input-border-color: var(--border-color);
  /* --input-svg-clickable-hover-filter: brightness(70%); */
  --input-hover-color: var(--input-color);
  --input-hover-background-color: #333;
  --input-hover-border-color: #333;
  --input-focus-color: black;
  --input-focus-background-color: var(--input-background-color);
  --input-focus-border-color: var(--input-border-color);
  --input-focus-shadow: 1px 1px 3px #00000080 inset;
}

/* Light Canvas */
section.light,
footer.light,
header.light,
dialog.light,
.light.colorscheme {
  /* Basic */
  --color: #333;
  --brighten-color: #111; /* to be decided */
  --soften-color: #555; /* to be decided */
  --background-color: #fffaf0;
  --alternate-background-color: #f3ece0;
  --semi-transparent-background-color: #0000004d;
  --alternate-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  --border-color: #a0a0a0; /* to be decided */
  --soften-border-color: var(--border-color);
  --hover-color: black;
  /* --svg-clickable-hover-filter: brightness(70%); */
  --background-shadow: none;
  --scrollbar-track-color: transparent;
  --scrollbar-track-active-color: transparent;
  /* Buttons */
  --button-font-weight: 400;
  --button-color: #6b4b00;
  --button-background-color: transparent;
  --button-border-color: #6b4b00;
  --button-shadow: none;
  --button-hover-color: #fffaf0;
  --button-hover-background-color: #232323;
  --button-hover-border-color: #232323;
  --button-active-color: black;
  --button-active-background-color: #f5eede;
  --button-active-border-color: #232323;
  /* Accented Buttons */ /* to be decided */
  --accented-button-font-weight: 500;
  --accented-button-color: var(--color);
  --accented-button-background-color: #e3bc5a;
  --accented-button-border-color: var(--accented-button-background-color);
  --accented-button-shadow: none;
  --accented-button-hover-color: #fffaf0;
  --accented-button-hover-background-color: #232323;
  --accented-button-hover-border-color: #232323;
  --accented-button-active-color: #232323;
  --accented-button-active-background-color: #b58e33;
  --accented-button-active-border-color: #c1b98d;
  /* SVG Toggles */
  --toogle-background-color: transparent;
  --toggle-border-color: transparent;
  --toogle-hover-background-color: #eee;
  --toggle-hover-border-color: #ddd;
  --toogle-active-background-color: #232323;
  --toggle-active-border-color: #4c4a48;
  /* Input Boxes */
  --input-color: var(--color);
  --input-placeholder-color: #888;
  --input-background-color: transparent;
  --input-border-color: var(--border-color);
  /* --input-svg-clickable-hover-filter: brightness(70%); */
  --input-hover-color: var(--input-color);
  --input-hover-background-color: transparent;
  --input-hover-border-color: var(--input-border-color);
  --input-focus-color: black;
  --input-focus-background-color: #eee;
  --input-focus-border-color: var(--input-border-color);
  --input-focus-shadow: 0 0 1px #00000080 inset;
}

/* ================================================================= Structures ================================================================= */
/* Responsive */
/* @media screen and (min-width: 1100px) {
  header nav.main-menu {
    flex: 1 0 470px;
    max-width: clamp(470px, calc(40vw + 1rem), 1128px);
  }
  header form.search {
    flex: 1 0 300px;
    max-width: 600px;
    margin: auto;
  }
} */

/* @media screen and (min-width: 750px) {
  .header-menu.container {
    > label {
      display: none !important;
    }
    .main-menu li.trp-language-switcher-container {
      display: none;
    }
  }
} */

/* Static */
html {
  background-color: #0a0a0a;
}

html:has(header:not(.none)):not(:has(.embed.fullscreen)) {
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 0 max-content;
    > * {
      flex: 1 0 max-content;
    }
  }
}

body:has(dialog[open]) {
  overflow: hidden;
}

body:has(header label.menu-toggle > input:checked) {
  overflow: hidden;
}

header {
  color: var(--color);
  border-bottom: var(--standard-border) var(--border-color);
  background-color: var(--background-color);
  width: 100%;
  z-index: 90;
  *:hover {
    text-decoration: none !important;
  }
  ul {
      display: flex;
      list-style-type: none;
      padding: 0;
  }
  > .top-container {
    display: grid;
    justify-content: space-between;
    align-items: center;
    > a.logo {
      grid-area: logo;
    }
    > ul.main.menu {
      grid-area: menu;
    }
    > form.search {
      grid-area: search;
    }
    > ul.language.menu {
      grid-area: language;
    }
    > label.menu-toggle {
      grid-area: menu-toggle;
    }
    > div.placeholder {
      grid-area: placeholder;
    }
  }
  > div.top-container.mobile-only {
    grid-template-areas: "placeholder logo menu-toggle";
    grid-template-columns: calc(1.393rem + (var(--xs)*2)) auto calc(1.393rem + (var(--xs)*2));
    padding: 5px 0;
    transition: padding 0.3s;
  }
  > nav.top-container.hide-for-mobile {
    display: grid;
    grid-template-areas: "logo menu search language";
    grid-template-columns: max-content minmax(500px, 1000px) minmax(300px, 500px) max-content;
    padding: 0 var(--standard-padding);
    max-width: calc(100% - (var(--standard-padding) * 2));
    width: calc(1920px + (var(--standard-horizontal-margin) * 2));
    margin: auto;
    gap: var(--standard-padding);
    > ul {
      justify-content: space-evenly;
      gap: var(--standard-padding);
      max-width: 1000px;
      margin: auto;
      text-align: center;
      min-width: max-content;
      width: 100%;
    }
  }
  nav.extended-mobile-menu {
    padding: var(--standard-padding);
    > ul.menu {
      flex-direction: column;
      border-radius: var(--standard-ui-border-radius);
      overflow: hidden;
      > li {
        background-color: var(--button-active-background-color);
        a {
          display: block;
          padding: var(--s);
        } 
      }
      > li:not(:first-child) {
        border-top: solid 2px var(--background-color);
      }
      > li:hover {
        background-color: var(--button-hover-background-color);
      }
    }
    form.search {
      --background-color: var(--button-active-background-color);
      --padding: var(--s);
    }
  }
}

/* search form on the header 
  All States
*/
form.search.header {
  --textcolor: var(--color);
  --background-color: transparent;
  --padding: var(--xs);
  --structure: calc(1.393rem + var(--padding)) auto 0;
  display: grid;
  grid-template-areas: "left-icon textbox right-icon";
  grid-template-columns: var(--structure);
  padding: var(--padding);
  background-color: var(--background-color);
  border-radius: var(--standard-ui-border-radius);
  color: var(--textcolor);
  transition: background-color 0.3ms;
  svg {
    fill: var(--textcolor);
    transition: fill 0.3ms;
  }
  input[type="text"] {
    grid-area: textbox;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    ::placeholder {
        color: var(--input-placeholder-color);
    }
    ::-ms-input-placeholder {
        color: var(--input-placeholder-color);
    }
  }
}
form.search.header:hover {
  --background-color: var(--button-hover-background-color);
}
form.search.header:has(*:focus) {
  --structure: calc(1.393rem + var(--padding)) auto calc(1.393rem + var(--padding));
  --background-color: var(--input-focus-background-color);
  --textcolor: var(--input-focus-color);
  svg.close {
    display: block;
  }
}
@media screen and ((min-width: 1100px) or (max-width: 749px)) {
  /* General */
  form.search.header {
    > label.folding-toggle {
      display: none;
    }
    > label.search-button {
      grid-area: left-icon;
      padding-right: var(--padding);
    }
    > label.close-button {
      grid-area: right-icon;
      padding-left: var(--padding);
    }
  }
}

@media screen and (min-width: 750px) and (max-width: 1099px) {
  header {
    form.search.header {
      --structure: calc(1.393rem + var(--padding)) auto calc(1.393rem + var(--padding));
      transition: width ease-out 0.3s;
    }
    > nav.top-container.hide-for-mobile:has(form input.folding-toggle:not(:checked)) {
      grid-template-columns: max-content minmax(400px, 1000px) max-content max-content;
      > form.search.header {
        display: flex;
        max-width: max-content;
        > input[type='text'] {
          display: none;
        }
        > label.search-button {
          display: none;
        }
      }
    }
    > nav.top-container.hide-for-mobile:has(form input.folding-toggle:checked) {
      grid-template-columns: max-content 0 minmax(400px, 1000px) max-content;
      > ul.main.menu {
        display: none;
      }
      > form.search.header:has(input[type="text"]:not(:focus)) {
        --background-color: var(--button-hover-background-color);
      }
      > form.search.header {
        > label.folding-toggle {
          display: none;
        }
        > label.search-button {
          grid-area: right-icon;
          padding-left: var(--padding);
        }
        > label.close-button {
          grid-area: left-icon;
          padding-right: var(--padding);
          > svg {
            display: block;
          }
        }
      }
    }
  }
}



/* form.search.header:has(input[type="text"]:focus) {
  grid-template-columns: calc(1.393rem + var(--padding)) auto calc(1.393rem + var(--padding));
  background-color: 0;
  input[type="text"] {
      color: var(--input-focus-color)!important;
      border-radius: 0 !important;
  }
  svg {
      fill: var(--input-focus-color)!important;
  }
  svg.close {display: block!important;
  position: static !important;
  transform: none !important;
  padding-left: var(--padding);
  }
}
form.search.header:has(:not(input[type="text"]:focus)) {
    svg.close {display: none;}
} */


@media screen and (max-width: 749px) {
  /* Header Button Action */
  header:has(label.menu-toggle > input:not(:checked)) {
    position: sticky;
    top:0;
    nav.extended-mobile-menu {
        display: none;
    }
  }
  header:has(label.menu-toggle > input:checked) {
      position: fixed;
      inset: 0 0 0 0;
      z-index: 100;
      > div.top-container {
          padding: 4vh var(--standard-padding);
      }
  }
}




footer {
  border-top: var(--standard-border) var(--border-color);
  padding: var(--m) 0 var(--xs) 0;
  color: var(--color);
  background-color: var(--background-color);
}

section {
  flex: 1 0 max-content;
  color: var(--color);
  background-color: var(--background-color);
  border-color: var(--border-color);
}

.colorscheme.with-background {
  background-color: var(--background-color);
}

.alternate-background {
  background-color: var(--alternate-background-color);
  box-shadow: var(--alternate-shadow);
}

.background-shadow {
  box-shadow: var(--background-shadow);
}

.semi-transparent-background {
  background-color: var(--semi-transparent-background-color);
}

.plate {
  /*information container used under section or screen*/
  --plate-vertical-margin: var(--standard-vertical-margin);
  --plate-horizontal-margin: var(--standard-horizontal-margin);
  --plate-margin-top: var(--plate-vertical-margin);
  --plate-margin-bottom: var(--plate-vertical-margin);
  --plate-margin-left: var(--plate-horizontal-margin);
  --plate-margin-right: var(--plate-horizontal-margin);
  --plate-max-width: var(--standard-plate-width);
  width: var(--plate-max-width);
  max-width: calc(100% - var(--plate-horizontal-margin) * 2);
  max-height: calc(100% - (var(--plate-vertical-margin) * 2));
  padding: var(--plate-margin-top) var(--plate-margin-right)
    var(--plate-margin-bottom) var(--plate-margin-left);
  margin: auto;
  .content {
    max-width: var(--standard-content-width);
    margin: 0 auto;
  }
}

.plate.full {
  min-height: 100%;
}

.plate.div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--standard-horizontal-margin);
  > .column {
    flex: 1;
    max-width: 100%;
    width: var(--standard-content-width);
    /* max-width: min(var(--standard-content-width), 100%); */
    margin: 0 auto;
    flex-direction: column;
  }
}

@media screen and (max-width: 1099px) {
  .plate.div {
    flex-direction: column;
  }
}

.plate.fullscreen {
  min-height: calc(100vh - var(--header-size) - var(--plate-margin-top) - var(--plate-margin-bottom)); 
  /* height: calc(100vh - var(--header-size));; */
}

.fullscreen.wrap {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-size) - (var(--l) * 2));
  justify-content: center;
}

.panel {
  --panel-width: 1400px;
  max-width: var(--panel-width);
  padding: var(--l);
  margin: auto;
}

@media screen and (min-width: 1500px) {
  .left-right {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: var(--l) 0;
    > .panel {
      margin: 0;
    }
  }
}

.button.container {
  display: flex;
  flex-wrap: wrap;
  /* margin: var(--xs) 0; */
  gap: var(--standard-gap);
  > *{
    flex: 0;
    flex-basis: max-content;
  }
}

@media screen and (max-width: 749px) {
  .button.container.mobile-v {
    flex-wrap: nowrap;
    flex-direction: column;
  }  
}


.tags.container {
  display: flex;
  flex-wrap: wrap;
  /* margin-top: var(--xs);
  margin-bottom: var(--xs); */
  gap: var(--standard-gap);
  font-size: 0.9rem;
}

form.simple {
  display: flex;
  gap: 0;
  > .button.container,
  > input[type="button"],
  > input[type="submit"],
  > input[type="reset"],
  > input[type="search"] {
    flex: 0 0 auto;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  > input[type="text"],
  > input[type="email"],
  > input[type="password"],
  > input[type="number"],
  > input[type="tel"],
  > input[type="url"],
  > input[type="date"],
  > input[type="month"],
  > input[type="week"],
  > input[type="time"],
  > input[type="datetime-local"] {
    flex: 1 0 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

form.small {
  display: flex;
  gap: var(--standard-gap);
  > .button.container,
  > input[type="button"],
  > input[type="submit"],
  > input[type="reset"],
  > input[type="search"] {
    flex: 0;
  }
  > input[type="text"],
  > input[type="email"],
  > input[type="password"],
  > input[type="number"],
  > input[type="tel"],
  > input[type="url"],
  > input[type="date"],
  > input[type="month"],
  > input[type="week"],
  > input[type="time"],
  > input[type="datetime-local"] {
    flex: 1;
  }
}

form.large {
  display: grid;
  /* margin: var(--m) 0; */
  input,
  textarea {
    margin: var(--xxs) 0 var(--m);
  }
  label {
    font-family: var(--opensans);
  }
}

/* form.search {
  --textbox-padding-offset: calc(var(--s) * 2 + 1.375em);
  --textbox-left-padding: var(--s);
  --textbox-right-padding: var(--s);
  --textbox-width: calc(
    100% - var(--textbox-left-padding) - var(--textbox-right-padding) - 2px
  );
  --search-icon-left: unset;
  --search-icon-right: unset;
  position: relative;
  > input[type="text"] {
    padding-left: var(--textbox-left-padding);
    padding-right: var(--textbox-right-padding);
    width: var(--textbox-width);
  }
  > label {
    > .search-icon {
      position: absolute;
      left: var(--search-icon-left);
      right: var(--search-icon-right);
      top: 50%;
      transform: translate(0, -50%);
    }
    > .reset-icon {
      position: absolute;
      left: var(--s);
      top: 50%;
      transform: translate(0, -50%);
    }
  }
}

form.search:focus-within {
  /* img:hover {
    filter: var(--input-svg-clickable-hover-filter);
  }
  svg:hover {
    fill: var(--input-hover-color);
  }
  svg {
    fill: var(--input-placeholder-color);
  }
} */

/*form.search.standard {
  --textbox-left-padding: var(--textbox-padding-offset);
  --search-icon-left: var(--s);
  > label {
    > .open,
    > .close {
      display: none;
    }
  }
} */

/* form.search.folding {
  --textbox-left-padding: var(--textbox-padding-offset);
  --textbox-right-padding: var(--textbox-padding-offset);
  --search-icon-right: var(--s);
  > input[type="text"] {
    display: none;
  }
  > label > .search-icon {
    display: none;
  }
  > input:has(~ label > .folding-toggle:checked) {
    display: inline-block;
    width: var(--textbox-width);
    opacity: 1;
    @starting-style {
      opacity: 0;
      width: 0px;
    }
  }
  > label:has(> .folding-toggle:checked) {
    ~ label > .search-icon {
      display: inline;
      opacity: 1;
      transition: opacity 0.3s 0.3s ease-out;
      @starting-style {
        opacity: 0;
      }
    }
  }
} */

/* @media screen and ((min-width: 1100px) or (max-width: 749px)) {
  form.search.header {
    --textbox-left-padding: var(--textbox-padding-offset);
    --search-icon-left: var(--s);
    flex: 1;
    > label {
      > .open,
      > .close {
        display: none;
      }
    }
  }
  form.search.header {
    input {
      color: var(--input-placeholder-color);
      background-color: transparent;
      border-color: transparent;
    }
  }
  form.search.header:hover {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="datetime-local"],
    textarea {
      background-color: var(--input-hover-background-color);
      border-color: var(--input-hover-border-color);
    }
  }
} */

/* ================================================================= Size variants ================================================================= */

.xxl {
  font-size: var(--xxl);
}

.xl {
  font-size: var(--xl);
}

.l {
  font-size: var(--l);
}

.m {
  font-size: var(--m);
}

.xxl,
.xl,
.l,
.m {
  line-height: 1em;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1rem;
  font-weight: 400;
}

.weight200 {
  font-weight: 200;
}

.weight300 {
  font-weight: 300;
}

.weight400 {
  font-weight: 400;
}

.weight500 {
  font-weight: 500;
}

.weight600 {
  font-weight: 600;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

h1:hover,
h2:hover,
h3:hover {
  text-decoration: none;
}

.margin-v-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.margin-v-xxs {
  margin-top: var(--xxs);
  margin-bottom: var(--xxs);
}

.margin-v-xs {
  margin-top: var(--xs);
  margin-bottom: var(--xs);
}

.margin-v-s {
  margin-top: var(--s);
  margin-bottom: var(--s);
}

.margin-v-m {
  margin-top: var(--m);
  margin-bottom: var(--m);
}

.margin-v-l {
  margin-top: var(--l);
  margin-bottom: var(--l);
}

.margin-v-xl {
  margin-top: var(--xl);
  margin-bottom: var(--xl);
}

.margin-v-xxl {
  margin-top: var(--xxl);
  margin-bottom: var(--xxl);
}

/* ================================================================= Standard Elements ================================================================= */
p {
  margin: 0 0 var(--m);
  font-size: 1em;
  text-wrap: pretty;
  line-height: 1.45em;
}

*[onclick],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="search"],
form > label > svg {
  cursor: pointer;
}

.none {
  display: none !important;
}

/* iframe {
  border: none;
  display: block;
  margin: auto;
}

iframe.soundcloud {
  width: 100%;
}

iframe.youtube {
  width: 100%;
  aspect-ratio: 17/10;
} */

a,
a:visited {
  color: inherit;
  /* cursor: pointer; */
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--hover-color);
  text-decoration: underline;
  .inline-svg,
  .logo-svg {
    fill: var(--hover-color);
  }
}

a.nounderline:hover {
  text-decoration: none !important;
}

/* Dark and Fine Prints */
.soften,
.fine-print {
  color: var(--soften-color);
  fill: var(--soften-color);
  border-color:var(--soften-border-color);
}

b,.brighten {
  color: var(--brighten-color);
  fill: var(--brighten-color);
}

.fine-print {
  font-size: var(--s);
}

.balancedwrap {
  text-wrap: balance;
}

/* Links and Buttons */

.inline-svg {
  font-size: 1em;
  height: 1.393em;
  width: 1.393em;
}

svg {
  vertical-align: text-top;
  fill: var(--color);
}

.logo-svg {
  shape-rendering: geometricPrecision;
}

/* .inline-svg.naked:hover {
  filter: var(--svg-clickable-hover-filter);
} */

.flex {
  display: flex;
}

.flex.wrap {
  flex-wrap: wrap;
}


ul.plain {
  list-style-type: none;
  padding: 0;
  > li {
    padding: 0;
  }
}

a.button,
span.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="search"] {
  --color: var(--button-color);
  color: var(--color);
  padding: var(--standard-button-padding);
  border: var(--standard-button-border);
  border-radius: var(--standard-button-border-radius);
  font-family: var(--standard-button-font);
  letter-spacing: var(--standard-button-letter-spacing);
  flex: 1 0 max-content;
  font-weight: var(--button-font-weight);
  background-color: var(--button-background-color);
  border-color: var(--button-border-color);
  box-shadow: var(--button-shadow);
  text-align: center;
  /* cursor: pointer; */
  font-size: inherit;
}

a.button.tag,
button.tag,
span.button.tag {
  padding: var(--standard-tag-padding);
  border-radius: var(--standard-tag-border-radius);
  flex: 0 0 max-content;
}

a.button:hover,
a:has(span.button):hover > span.button,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="search"]:hover {
  --hover-color: var(--button-hover-color);
  color: var(--hover-color);
  text-decoration: none;
  background-color: var(--button-hover-background-color);
  border-color: var(--button-hover-border-color);
}

a.button:active,
button:active,
span.button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="search"]:active {
  --color: var(--button-active-color);
  color: var(--color);
  background-color: var(--button-active-background-color);
  border-color: var(--button-active-border-color);
}

a.button.accented,
button.accented,
span.button.accented,
input[type="button"].accented,
input[type="submit"],
input[type="search"].accented {
  --color: var(--accented-button-color);
  color: var(--color);
  font-weight: var(--accented-button-font-weight);
  background-color: var(--accented-button-background-color);
  border-color: var(--accented-button-border-color);
  box-shadow: var(--accented-button-shadow);
}

a.button.accented:hover,
button.accented:hover,
button.tag:hover,
a.button.tag:hover,
span.button.tag:hover,
a:has(span.button.accented):hover > span.button.accented,
input[type="button"].accented:hover,
input[type="submit"]:hover,
input[type="search"].accented:hover {
  --hover-color: var(--accented-button-hover-color);
  color: var(--hover-color);
  text-decoration: none;
  background-color: var(--accented-button-hover-background-color);
  border-color: var(--accented-button-hover-border-color);
}

a.button.accented:active,
button.accented:active,
span.button.accented:active,
input[type="button"].accented:active,
input[type="submit"]:active,
input[type="search"].accented:active {
  --color: var(--accented-button-active-color);
  color: var(--color);
  background-color: var(--accented-button-active-background-color);
  border-color: var(--accented-button-active-border-color);
}

a.button.borderless,
button.borderless,
span.button.borderless,
input[type="button"].borderless,
input[type="submit"].borderless,
input[type="search"].borderless {
  border-color: transparent;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

a.button.borderless:hover,
button.borderless:hover,
span.button.borderless:hover,
input[type="button"].borderless:hover,
input[type="submit"].borderless:hover,
input[type="search"].borderless:hover {
  text-decoration: none;
}


/* Input Boxes */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
textarea {
  --color: var(--input-color);
  color: var(--color);
  background-color: var(--input-background-color);
  border: var(--standard-border);
  border-color: var(--input-border-color);
  border-radius: var(--standard-input-border-radius);
  text-overflow: ellipsis;
  font-family: var(--standard-input-font);
  font-weight: 300;
  padding: var(--standard-input-padding);
  resize: none;
  font-size: inherit;
}

::placeholder {
  color: var(--input-placeholder-color);
  opacity: 1;
}

::-ms-input-placeholder {
  color: var(--input-placeholder-color);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus {
  --color: var(--input-focus-color);
  color: var(--color);
  background-color: var(--input-focus-background-color);
  border-color: var(--input-focus-border-color);
  outline: 0;
}

/* Toggle Mechanism */
/* form.show-on-focus {
  input {
    color: var(--input-placeholder-color);
    background-color: transparent;
    border-color: transparent;
  }
}
form.show-on-focus:hover {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[type="datetime-local"],
  textarea {
    background-color: var(--input-hover-background-color);
    border-color: var(--input-hover-border-color);
  }
}

form.folding {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[type="datetime-local"],
  textarea {
    background-color: var(--input-hover-background-color);
    border-color: var(--input-hover-border-color);
    color: var(--soften-color);
  }
} */

.embed {
  --embed-loader-background: var(--background-color);
  --icon-size: var(--m);
  --right-offset: var(--m);
  --top-offset: var(--m);
  --icon-border-radius: var(--icon-size);
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  > div.iframe-underlay {
    position: absolute;
    background-color: var(--embed-loader-background);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  > iframe.iframe-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  > iframe.iframe-content.loading {
    display: none;
  }
  > div.enlarge {
    --button-background: #ffffffe3;
    --button-color: #5f5f5f;
    --button-border-color: transparent;
    position: absolute;
    right: var(--right-offset);
    top: var(--top-offset);
    display: flex;
    > p.label {
      --delay: 0.3s;
      --duration: 0.1s;
      position: relative;
      font-size: var(--s);
      left: var(--xs);
      color: var(--button-color);
      box-shadow: 0 0 3px #00000040;
      margin: auto;
      background-color: var(--button-background);
      padding: var(--xxs) var(--s);
      border-radius: var(--m) 0 0 var(--m);
      border: 1px solid var(--button-border-color);
      opacity: 1;
      transition-property: opacity, display;
      transition-duration: var(--duration);
      transition-timing-function: ease-out;
      transition-delay: var(--delay);
      transition-behavior: allow-discrete;
      @starting-style {
        opacity: 0;
      }
    }
    > .enlarge-button {
      position: relative;
      width: var(--icon-size);
      height: var(--icon-size);
      padding: var(--xs);
      background-color: var(--button-background);
      border-radius: calc(var(--icon-size) + var(--xs));
      border: 1px solid var(--button-border-color);
      box-shadow: 0 0 5px #00000045;
      > svg {
        fill: var(--button-color);
      }
    }
    > .enlarge-button:hover {
      --button-background: #f3f2f1;
      --button-color: #5f5f5f;
      --button-border-color: white;
      box-shadow: 0 0 5px #00000045;
    }
  }
  > div.enlarge.loading {
    display: none;
  }
  > div.enlarge:not(:has(.enlarge-button:hover)) {
    > p.label {
      display: none;
      opacity: 0;
    }
  }
}

body:has(div.embed.fullscreen) {
  overflow: hidden;
}

.embed.fullscreen {
  > div.iframe-underlay{
    display: block;
    position: fixed;
    z-index: 99;
  }
  > iframe.iframe-content{
    display: block;
    position: fixed;
    z-index: 100;
  }
  > .enlarge {
    position: fixed;
    z-index: 101;
    > p.label > span.enlarge {
      display: none;
    }
    > .enlarge-button > svg.enlarge {
      display: none;
    }
  }
}

.embed:not(.fullscreen) {
  > .enlarge { 
    > p.label > span.close {
      display: none;
    }
    > .enlarge-button > svg.close {
      display: none;
    }
  }
}

.embed.soundcloud {
  height: 120px;
  --embed-loader-background:  #999;
}

.embed.youtube {
  aspect-ratio: 16/9;
}

.score-container {
  --aspect-ratio: 9/12;
  max-height: 1100px;
  height: 90vh;
  margin: var(--xl) auto;
  border: 2px solid var(--border-color); 
  padding: 0.5rem; 
  background-color: var(--background-color); 
}

.score-container:has(.embed:not(.fullscreen)) {
  aspect-ratio: var(--aspect-ratio);
}

.meta-plate {
  --border-radius-amount: var(--standard-ui-border-radius);
  background-color: #272727;
  display: flex;
  overflow: hidden;
  margin: var(--xl) 0;
  letter-spacing: 1px;
  font-size: var(--s);
  > div.tag {
    background-color: #838383;
    display: flex;
    > h3 {
      color: black;
      writing-mode: vertical-lr;
      margin: var(--xs) 0;
      line-height: 1.3rem;
    }
  }
  > div.information {
    padding: var(--standard-padding);
    > p {
      margin: 0;
    }
  }
}

label > .open,
label > .close {
  padding: var(--xs);
  /* border: var(--standard-border); */
  border-radius: var(--standard-border-radius);
  display: inline-block;
}

label > .open {
  /* border-color: var(--toggle-border-color); */
  background-color: var(--button-background-color);
}

label > .close {
  display: none;
  /* border-color: var(--toggle-active-border-color); */
  background-color: var(--button-active-background-color);
}

label > .close.naked,
label > .open.naked {
  padding: 0;
  border: none;
  background-color: transparent;
  transition: opacity 0.3s 0.3s ease-out !important;
}

label > .open:hover,
label > .close:hover {
  background-color: var(--button-hover-background-color);
  /* border-color: var(--toggle-hover-border-color); */
}

label > .close.naked:hover {
  background-color: transparent;
}

input[type="checkbox"]:checked {
  ~ .open {
    display: none;
  }
  ~ .close {
    display: inline;
    opacity: 1;
    transition: opacity 0.3s ease-out;
    @starting-style {
      opacity: 0;
    }
  }
}

.card.large.container {
  --width: 800px;
  --border: 1px solid;
  --picture-size: 200px;
}

.card.container {
  --scrollbar-size: 5px;
  --scrollbar-thumb-shadow: none;
  --width: 600px;
  --border: none;
  --picture-size: 400px;
  display: flex;
  /* justify-content: center; */
  gap: var(--l);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0;
  list-style-type: none;
  > .item {
    flex: 0 0 var(--width);
    overflow: hidden;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    border: var(--border);
    > .image {
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      flex: 0 0 var(--picture-size);
      border-radius: var(--standard-ui-border-radius);
    }
    > .detail {
      padding: var(--standard-padding) 0 0;
      flex: 1 0 max-content;
      > h4,
      p,
      > a > h4,
      > a > p {
        margin: 0;
      }
      > div.location,
      > a > div.location {
        display: flex;
        gap: var(--xxs);
        margin: var(--s) 0;
        font-weight: 300;
        font-size: 0.9em;
      }
    }
    ul.events {
      margin: 0;
      padding: 0;
      list-style-type: none;
      > li {
        font-size: 0.9rem;
        > a:hover {
          text-decoration: none;
          background-color: #fbf1da;
        }
        > a {
          display: flex;
          justify-content: flex-start;
          border-bottom: var(--standard-border);
          align-items: center;
          gap: var(--xs);
          padding: 0 2px;
          > span.button {
            margin: var(--xxs) 0;
            flex: 0 0 30%;
            padding: 0.2em 0.4em;
          }
          > span.time {
            flex: 1;
          }
        }
      }
      :first-child > a {
        border-top: var(--standard-border);
      }
    }
  }
  p {
    margin: var(--s) 0 0;
  }
}

ul.awards {
  list-style-type: none;
  text-align: center;
  padding: 0;
  margin: 0;
  > li {
    margin: var(--xxl) 0;
    > p {
      margin: 0;
    }
    > p.title {
      font-size: 2.45rem;
      font-family: var(--playfair);
      line-height: 1em;
      margin: 0.1em 0;
    }
    > p.award {
      font-size: 1.3rem;
      font-family: var(--notoserif);
      font-style: italic;
    }
    > p.info {
      font-weight: 300;
    }
  }
}

.wrap:has(.shadow) {
  position: relative;
  z-index: 0;
  .shadow {
    --opacity: 0.05;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
    align-content: end;
    * {
      margin: 0;
      line-height: 0.4em;
      font-weight: 600;
      opacity: var(--opacity);
      font-variation-settings: "wdth" 80;
      user-select: none;
      font-size: var(--font-size);
    }
  }
}

@media screen and (min-width: 750px) {
  .card.container > .item {
    margin: var(--m);
  }
}

div.performance.container {
  > .item {
    > .fine-print.performer {
      transition: var(--standard-transition);
    }
  }
  .item:has(> ul > li > a:hover) {
    > .fine-print.performer {
      color: var(--button-border-color);
    }
  }
}

ul.calendar-dates.container {
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 1rem;
  z-index: 99;
  padding-right: 1rem;
  margin: 0;
  > li {
    > a:hover {
      text-decoration: none;
      border-color: var(--button-border-color);
      color: var(--button-border-color);
      > .month {
        background-color: var(--button-border-color);
        color: var(--background-color);
      }
    }
    > a {
      display: grid;
      grid-template-areas:
        "month"
        "day"
        "year";
      /* grid-template-rows: 2fr 3fr 1fr; */
      border: var(--standard-border);
      border-radius: var(--standard-border-radius);
      overflow: hidden;
      > p {
        margin: 0;
        text-align: center;
      }
      > .month {
        transition: var(--standard-transition);
        grid-area: month;
        font-size: var(--s);
        background-color: var(--border-color);
        color: var(--background-color);
        text-transform: uppercase;
        padding: 2px var(--xs);
        font-weight: bold;
      }
      > .year {
        grid-area: year;
        font-size: var(--xs);
        letter-spacing: var(--xxs);
        text-indent: var(--xxs);
        padding: 0 var(--xs) 2px var(--xs);
      }
      > .day {
        grid-area: day;
        font-size: var(--m);
        line-height: var(--m);
        padding: var(--xxs) var(--xs);
        font-weight: bold;
      }
    }
  }
}

/* ================================================================= Logo ================================================================= */

.logo {
  margin: 0.25em 0;
  text-align: center;
  width: max-content;

  .logo-title {
    color: #eee;
    /* color: #eee; */
    font-family: var(--libre-franklin);
    font-size: 1.6em;
    line-height: 1.1em;
  }
  .logo-subtitle {
    /* color: #ccc; */
    font-size: 0.66em;
    font-family: var(--opensans);
    font-weight: 300;
    letter-spacing: 0.75em;
    text-indent: 0.75em;
  }
}

.logo:hover {
  text-decoration: none;
}

/* ================================================================= Styles ================================================================= */

.align-justify {
  text-align: justify !important;
}

.align-center {
  text-align: center !important;
}

.align-left {
  text-align: left !important;
}

.align-right {
  text-align: right !important;
}

.random-hue-background {
  background-color: hsl(var(--background-hue) 50% 70%);
}

.border-radius {
  --border-radius-amount: var(--standard-border-radius);
  --top-only:var(--border-radius-amount) var(--border-radius-amount) 0 0;
  --bottom-only: 0 0 var(--border-radius-amount) var(--border-radius-amount);
  --left-only:var(--border-radius-amount) 0 0 var(--border-radius-amount);
  --right-only:0 var(--border-radius-amount) var(--border-radius-amount) 0;
  --all: var(--border-radius-amount);
  --border-radius: var(--all);
  border-radius: var(--border-radius);
}

@media screen and (min-width: 1100px) {
  .hide-for-large {
    display: none !important;
  }
}

@media screen and (max-width: 1099px) {
  .large-only {
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .mobile-only {
    display: none !important;
  }
}

@media screen and (max-width: 749px) {
  .hide-for-mobile {
    display: none !important;
  }
}

/* ================================================================= Animation and Effects ================================================================= */

@supports (animation-timeline: scroll()) {
  .background-hue-fade-out {
    background-color: transparent !important;
    position: relative;
  }
  .background-hue-fade-out::before {
    --background-hue: hsl(var(--hue) 50% 18%);
    content: "";
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    animation: hue-fade-out ease-in forwards;
    animation-timeline: scroll(root y);
    animation-range: entry 0 exit 60vh;
    background-image: radial-gradient(
      circle at bottom,
      #00000000 30%,
      #00000099
    );
    background-size: 100% 100%;
    background-position: bottom center;
    z-index: -1;
  }
}

@keyframes hue-fade-out {
  from {
    background-color: var(--background-hue);
  }
  to {
    background-size: 500% 100%;
    background-color: var(--background-color);
  }
}

/* .red.background-hue-fade-out {
  --background-hue: hsl(0, 62%, 16%);
}
.dawn.background-hue-fade-out {
  --background-hue: hsl(216, 22%, 18%);
}
.green.background-hue-fade-out {
  --background-hue: hsl(173, 51%, 17%);
}
.gold.background-hue-fade-out {
  --background-hue: hsl(35, 57%, 25%);
} */

.fade-in,
.overlay-fade-in,
.fade-in-out {
  --duration: 0.3s;
  --delay: 0s;
  --slide-x: 0;
  --slide-y: 0;
  --scale: 1;
}

.fade-in,
.overlay-fade-in::before,
.fade-in-out {
  opacity: 0;
  scale: var(--scale);
  translate: var(--slide-x) var(--slide-y);
  transition-property: opacity, translate, scale, display;
  transition-duration: var(--duration);
  transition-timing-function: ease-out;
  transition-delay: var(--delay);
  transition-behavior: allow-discrete;
}

.fade-in.active,
.overlay-fade-in.active::before,
.fade-in-out.active {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

.fade-in-out:not(.active) {display: none;}

/* ========================================== current end ==================== */

form div.checkmark {
  border-color: var(-accented-button-border);
  background-color: var(--darkcanvas-accented-button-background);
  width: 100%;
  text-align: center;
  align-items: center;
  gap: 10px;
  justify-content: center;
  > * {
    /* --slideupamount: 10px; */
    color: var(--darkcanvas-accented-button-color);
    font-weight: 500;
  }
  > svg.checkmark {
    background-color: #48752c;
    border-radius: 12px;
  }
}

/* Animations */

.green-in {
  animation: green-in 0.3s ease-in;
}

/* Canvas defaults */

/* Dialog System */
dialog:focus {
  outline: 0;
}

dialog[open]::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  opacity: 1;
  transition: opacity 0.3s;
  @starting-style {
    opacity: 0;
  }
}

dialog {
  --height: 900px;
  --width: 1400px;
  position: fixed;
  height: var(--height);
  width: var(--width);
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  top: 50%;
  left: 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
  border-radius: var(--standard-ui-border-radius);
  border: 0;
  background: transparent;
  text-align: unset;
  box-shadow: 40px 40px 80px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  color: var(--color);
  background-color: var(--background-color);
  border-color: var(--border-color);
  > div {
    position: relative;
    width: 100%;
    height: 100%;
    > .close-button {
      position: absolute;
      right: 1rem;
      top: 1rem;
      z-index: 999;
    }
    > div.content {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
}

.flex-v {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  text-wrap: nowrap;
}

.align-start {
  align-items: flex-start;
}

.nogrow {
  flex-grow: 0;
}

/* .radius {
  border-radius: var(--standard-border-radius);
} */

/* Set up screen, header, and footer */


.performance-group.wrap {
  padding-bottom: 0;
  .icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--xl);
    margin: var(--l) 0;
    img {
      height: calc(var(--xxl) * 1.5);
    }
  }
  .names {
    margin: var(--l) auto;
    p.h3 {
      font-family: var(--opensans);
      font-weight: 600;
      color: #5e5e5e;
    }
  }
  ul {
    list-style: none;
    padding-left: 0;
    > li {
      font-weight: 500;
      font-size: 1.2rem;
      margin: var(--l) 0;
      text-wrap: pretty;
    }
  }
}

/* @media (1100px > width) {
  .featured.container {
    flex-wrap: wrap;
    > .item {
      flex: 1 0 min(29rem, 100%);
    }
  }
}

@media (width >= 1100px) {
  .featured.container {
    overflow: auto;
    > .item {
      flex: 0 0 29rem;
    }
  }
} */