/* morningstar-template */
:root {
  font-size: 62.5%;
  letter-spacing: 0.2rem;
  box-sizing: border-box;

  /* adjustable sizes^ */
  /* header */
  --size-Header-Primary-Height: 6rem;
  --size-Header-Menu-Height: 4rem;
  --size-Header-Font-Link: 1.8rem;
  /* padding */
  --size-Icon-Padding: 0.5rem;
  --size-Padding-l1: 1rem;
  --size-Padding-l2: 2rem;
  /* widgets */
  --size-Scroll-Top-Button-Width: 4rem;
  /* defaults */
  --size-Default-Font: 1.6rem;
  /* adjustable sizes$ */

  /* logo */
  /* --size-Logo-Height: 4rem; */

  /* sizes of non-automated nature */
  /* --size-Main-Height: calc(100vh - var(--size-Header-Primary-Height)); */
  --size-Header-Offset: calc(
    var(--size-Header-Menu-Height) + var(--size-Header-Primary-Height)
  );
  --size-Logo-Width-Ratio: 4;
  --size-Fit-Viewport: calc(100% - var(--size-Header-Primary-Height) - 4rem);
  /* layers */
  --layer-Background: 0;
  --layer-Widget-Loader: 10;
  --layer-Header: 11;
  --layer-Dialog: 12;

  /* borders */
  --border-basic: 0.1rem solid var(--solid-dark);
  --border-basic-dark-L1: 0.1rem solid var(--solid-dark);
  --border-basic-light-L1: 0.1rem solid var(--solid-light);
  --border-inset-L1: 0.1rem inset;
  --border-outset-L1: 0.1rem outset;

  /* focus */
  --focus-accessible: 0.4rem inset aliceblue;

  /* shadows */
  /* offset-x offset-y blur spread color */
  --shadow-box-inset: 0 0 0.05rem 0.05rem inset black;

  /* images */
  --img-logo-large: url("/public/context/images/logo-large.webp");
  --img-logo-small: url("/public/context/images/logo-small.webp");
  --img-intro-light: url("/public/context/images/light-mode-intro-1024.webp");

  /* icons */
  --icon-gear: url("/public/context/icons/gear.svg");
  --icon-caution: url("/public/context/icons/triangle-exclamation-solid.svg");

  /* filters */
  --filter-green: invert(48%) sepia(79%) saturate(1500%) hue-rotate(86deg)
    brightness(118%) contrast(119%);
  --filter-yellow: invert(98%) sepia(70%) saturate(2978%) hue-rotate(316deg)
    brightness(118%) contrast(94%);
  --filter-grey: invert(48%) saturate(1500%) brightness(118%) contrast(119%);
  --filter-white: invert(100%) sepia(100%) saturate(1%) hue-rotate(102deg)
    brightness(110%) contrast(102%);
  --filter-light-blue: invert(88%) sepia(9%) saturate(855%) hue-rotate(289deg)
    brightness(97%) contrast(93%);

  /* mixins */
  --solid-dark: #161616;
  --alpha-dark: #161616ee;
  --solid-light: #ffffff;
  --alpha-light: #ffffff98;

  /* adjustable colors^ */
  /* --color-CTA-Background: #00a2ff; */
  --color-CTA-Background: #005a8f;
  /* header */
  --color-Header-Background: #683f55;
  --color-Header-Font: #f7e760;
  /* body */
  --color-Body-Background: #f5deb3;
  /* main */
  --color-Main-Background-Dark: #07183b;
  --color-Font-Light: #ffffff;
  /* dialog */
  --color-Dialog-Topbar: #161616;
  --color-Dialog-Close-Button: #ff0000;
  --color-Dialog-Background: #ececec;
  /* button */
  --color-Button-Background: #f5deb3;
  --color-Button-Background-Hover: #f5deb3;
  /* input */
  --color-Input-Background: #f5deb3;
  /* adjustable colors$ */

  /* header > button */
  --color-Header-Button-Background: transparent;
  --color-Header-Button-Background-Hover: var(--alpha-dark);

  /* padding-top: var(--size-Header-Primary-Height); */
}

::-moz-selection {
  /* Code for Firefox */
  color: var(--color-Font-Light);
  background: var(--color-Main-Background-Dark);
}

::selection {
  color: var(--color-Font-Light);
  background: var(--color-Main-Background-Dark);
}

html {
  max-width: 100vw;
}
/* accessibility */
:focus-visible {
  outline: var(--focus-accessible);
}

/* elements */
body {
  background-color: var(--color-Body-Background);
  font-family: "Source Sans 1", "Arial Narrow", Arial, sans-serif;
  font-size: var(--size-Default-Font);
  padding: 0;
  margin: 0;
}
main {
  position: relative;
  min-height: calc(100vh - var(--size-Header-Primary-Height));
  margin-top: var(--size-Header-Primary-Height);
  /* border-bottom: var(--border-basic); */
}
button {
  background-color: var(--color-Button-Background);
  padding: 0.5rem;
}
button:hover,
button:focus {
  color: var(--color-Font-Light);
  background-color: var(--alpha-dark);
  text-decoration: underline 0.2rem;
}

a:hover,
button:hover {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-family: "Libre Baskerville", "Times New Roman", Times, serif;
  color: #683f55;
}
section {
  padding: var(--size-Padding-l1);
}

dialog {
  z-index: var(--layer-Dialog);
  overflow: hidden;
  font-size: 62.5%;
  padding-left: var(--size-Padding-l1);
  padding-right: var(--size-Padding-l1);
  margin: 1rem;
  padding: 0;
}
dialog hgroup {
  padding-left: var(--size-Padding-l1);
  padding-right: var(--size-Padding-l1);
}
fieldset {
  border: none;
}

footer {
  display: grid;
  padding: 1rem;
  margin-bottom: 4rem;
}
footer hr {
  width: 100%;
}
#copyright-statement {
  margin: auto;
}
footer nav.grid {
  grid-template-areas: ". one . two . three .";
  grid-template-columns: auto max-content 1rem auto 1rem max-content auto;
}
footer nav ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 4rem;
}
footer nav li {
  margin-top: 10px;
  margin-bottom: 10px;
}
footer nav #social-media {
  text-align: center;
}
footer a {
  color: #1f1fff;
}

/* utility classes */

.header-offset {
  padding-top: var(--size-Header-Menu-Height);
}
.no-padding {
  padding: 0;
}
.text-container {
  padding: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
}
.page-home .text-container {
  margin-top: auto;
  margin-bottom: auto;
  padding: 2rem;
  font-size: 2rem;
}
.page-home h1 {
  color: #ececec;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-block {
  padding: 2rem 5%;
}
.text-block li {
  margin-bottom: 2rem;
}
.shadow-drop {
  box-shadow: 0 0.5rem 3.5rem #161616;
}
.shadow-thin {
  box-shadow: 0 0rem 2rem #161616;
}
.icon {
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
}
#main .icon {
  margin-right: 1rem;
}
#main :hover > .icon,
#main :focus > .icon {
  filter: var(--filter-white);
}
.grid {
  display: grid;
}
.grid-one {
  grid-area: one;
}
.grid-two {
  grid-area: two;
}
.grid-three {
  grid-area: three;
}

/* decorative classes */
.shadow-box {
  box-shadow: 1rem 0rem 1rem var(--solid-dark),
    -1rem 0rem 1rem var(--solid-dark), var(--shadow-box-inset);
}

.cta-container {
  max-width: max-content;
}
.cta-link {
  background-color: var(--color-CTA-Background);
  color: var(--color-Font-Light);
  font-weight: bold;
  text-shadow: none;
  text-decoration: none;
  padding: 1rem;
  border-radius: 1rem;
}
.cta-link .icon {
  margin-right: var(--size-Icon-Padding);
  filter: var(--filter-white);
}

/* header-container */
.header-container {
  background-color: var(--color-Header-Background);
  border-bottom: var(--border-outset-L1);
  z-index: var(--layer-Header);
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

/* header-primary */
.header-primary {
  box-shadow: 0rem -0.25rem 0.25rem inset var(--alpha-dark);
  border-bottom: var(--border-basic-dark-L1);
  overflow: hidden;
}
.header-primary.grid {
  grid-template-areas: ". one . two . three .";
  grid-template-columns: 2rem max-content 1rem auto 1rem max-content 2rem;
}

/* header-primary logo */
.header-primary .logo-container {
  display: block;
}
.header-primary .logo-container a {
  display: flex;
  max-height: 100%;
  max-width: fit-content;
}
.header-primary .logo-container img {
  max-height: var(--size-Header-Primary-Height);
}

/* header-primary hamburger button */
.header-primary .hamburger-container {
  align-content: center;
}
.header-primary button {
  background-color: var(--color-Header-Button-Background);
  color: var(--color-Header-Button-Font);
  border: none;
  border-radius: 0.25rem;
}
.header-primary button:hover {
  background-color: var(--color-Header-Button-Background-Hover);
  outline: var(--border-inset-L1);
}
.header-primary button:active {
  box-shadow: var(--shadow-box-inset);
}

/* header-menu */
.header-menu {
  background-color: var(--alpha-dark);
  height: var(--size-Header-Menu-Height);
  transition: 0.25s linear;
  transition-property: height, background-color;
  box-shadow: 1rem 0rem 0.5rem var(--solid-dark),
    0rem 0.25rem 0.5rem inset var(--solid-dark), var(--shadow-box-inset);
  overflow: hidden;
  align-items: center;
}
.header-menu * {
  transition: 0.25s;
  transition-property: opacity;
}
.header-menu.grid {
  grid-template-areas: ". one . two . three .";
  grid-template-columns: 2rem max-content 1rem auto 1rem max-content 2rem;
}

/* header-menu links */
.header-menu nav ul {
  display: inline-flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.header-menu nav ul li {
  height: 100%;
}
.header-menu nav a {
  display: inline-block;
  color: var(--color-Header-Font);
  font-weight: bold;
  text-decoration: none;
  padding: var(--size-Padding-l1);
}
.header-menu nav a[aria-current="page"] {
  background-color: var(--alpha-dark);
  text-decoration: underline 0.2rem;
}
.header-menu nav a .icon {
  filter: var(--filter-yellow);
  margin-right: var(--size-Icon-Padding);
  /* height: var(--size-Header-Menu-Height / 2); */
}
/* header-menu search */
.header-menu .search-container {
  background-color: var(--color-Input-Background);
  height: max-content;
  width: max-content;
  margin: auto;
}
.header-menu .search-container input {
  background-color: transparent;
  border: none;
}
.header-menu .search-container button {
  background-color: transparent;
}

.header-menu .search-container fieldset {
  padding: 0;
  margin: 0;
}
.header-menu .search-container fieldset.grid {
  grid-template-areas: ". one . two .";
}
.header-menu .search-container input:focus-visible {
  outline: none;
}
.header-menu .search-container fieldset:focus-within {
  outline: var(--focus-accessible);
}

#user-header {
  display: grid;
  align-content: center;
  justify-content: right;
}
#user-header div {
  width: max-content;
}

/* main */
main .background-frame {
  /* position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  align-content: center;
  overflow: hidden; */
}

.page-404 .text-container {
  margin-top: 20%;
}

/* page-home */
.page-home .background-frame {
  padding-top: 8rem;
  padding-bottom: 4rem;
  padding-left: 6rem;
  padding-right: 6rem;
  background-image: var(--img-intro-light);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: calc(100vh - var(--size-Header-Primary-Height));
}

.page-home .background-frame .hero.grid {
  grid-template-areas: ". one ." ". two .";
}
.page-home .background-frame .hero .cta-container {
  margin: 1rem auto;
}
.page-home .shadow-box {
  background-color: var(--alpha-dark);
  color: var(--color-Font-Light);
  text-shadow: 0rem 0rem 0.5rem var(--solid-dark),
    0rem 0rem 0.5rem var(--solid-dark);
}

/* page-login, page-register, page-contact */
/* .page-contact .form-container, */
.page-contact {
  text-align: center;
}
.page-contact .form-container p {
  max-width: 300px;
  text-align: justify;
  margin: 1rem auto;
}
.page-login,
.page-totp {
  padding: 10rem 5%;
}
.page-login .form-container,
.page-register .form-container {
  height: max-content;
  width: max-content;
  max-height: var(--size-Fit-Viewport);
  margin: auto;
}

.page-contact .form-container fieldset,
.page-login .form-container fieldset,
.page-register .form-container fieldset {
  border: var(--border-basic);
}
.page-contact .form-container {
  max-width: max-content;
  margin: 14rem auto;
}

.page-contact .form-container input,
.page-contact .h-captcha,
.page-contact textarea {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 300px;
}
.page-contact textarea {
  resize: none;
}

/* .page-contact .form-container input, */
.page-login .form-container input,
.page-register .form-container input {
  width: calc(100% - var(--size-Padding-l1));
}

.page-contact button[type="submit"],
.page-login button[type="submit"],
.page-register button[type="submit"] {
  background-color: #00800062;
  font-size: 125%;
  width: 300px;
  height: 4rem;
}
.page-contact .icon,
.page-login .icon,
.page-register .icon {
  height: 28px;
}

/* page-privacy-policy */
.page-privacy-policy,
.page-cookie-policy,
.page-hirschfeld,
.page-apps,
.page-about,
.page-accessibility {
  padding: 10rem 5%;
}

/* page-about */
#about-headshot {
  border-radius: 20px;
  border: 0.2rem solid black;
}
.page-about > div {
  gap: 2rem;
  display: grid;
  grid-template-areas:
    ". title title ."
    ". hr1 hr1 ."
    ". image body ."
    ". hr2 hr2 .";
}
.page-about h1 {
  grid-area: title;
  margin: 0;
}
.page-about hr:nth-of-type(1) {
  grid-area: hr1;
  width: 100%;
}
.page-about hr:nth-of-type(2) {
  grid-area: hr2;
  width: 100%;
}
.page-about .image-container {
  grid-area: image;
}
.page-about .image-container img {
  display: block;
  margin: auto;
}
.page-about .body-container {
  grid-area: body;
}
/* page-blog */
.page-blog,
.page-blog-new {
  padding: 5rem 5%;
}
.page-blog a[aria-current] {
  text-decoration: none;
}
#blog-entry article {
  display: grid;
  gap: 2rem;
  grid-template-areas:
    ". title title ."
    ". image opening ."
    ". body body .";
  grid-template-columns: 10% 40% 40% 10%;
}

#blog-title {
  grid-area: title;
  text-align: center;
}
#blog-feature-img {
  object-fit: cover;
  /* box-shadow: 0 0.5rem 3.5rem #161616; */
  border: 0.2rem solid black;
  border-radius: 20px;
  grid-area: image;
  height: 100%;
  max-width: 95%;
  margin: auto;
}
#blog-opening {
  grid-area: opening;
  align-self: flex-end;
}
#blog-body {
  grid-area: body;
}

#blog-carousel {
  text-align: center;
  letter-spacing: 0.5rem;
}

.page-blog-new > div {
  min-width: 80vw;
  max-width: 80vw;
}
.page-blog-new fieldset {
  display: grid;
}
.page-hirschfeld #img-div {
  text-align: center;
}
#img-div img {
  border-radius: 20px;
  border: 0.2rem solid black;
  max-width: 70vw;
}
.page-hirschfeld li {
  margin-bottom: 2rem;
}

#post-body {
  resize: vertical;
  min-height: 10rem;
  max-height: fit-content;
}
#post-opening {
  resize: vertical;
  min-height: 5rem;
  max-height: fit-content;
}
#password {
  font-family: monospace;
}
.page-login input {
  margin-top: 1rem;
}
.page-login #password-toggle {
  vertical-align: middle;
}

/* widget loader */

#widget-loader {
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--layer-Widget-Loader);
  background-color: black;
  align-content: center;
}
#widget-loader hgroup {
  font-family: monospace;
  width: max-content;
  height: max-content;
}
#widget-loader .text-x-center {
  width: max-content;
  height: max-content;
  margin: auto;
}
#widget-loader svg {
  filter: var(--filter-grey);
  width: 7rem;
  height: 7rem;
  margin: auto;
}
#widget-loader h3 {
  color: #ececec;
}
#widget-loader h3::after {
  position: absolute;
  content: "";
  animation: ellipses 2s linear infinite;
}
/* scroll-to-top */
.scroll-to-top-container {
  position: fixed;
  bottom: 0;
  left: calc(50% - (var(--size-Scroll-Top-Button-Width) / 2));
  z-index: calc(--layer-Widget-Loader - 1);
}
#scroll-to-top-button {
  display: none;
  width: var(--size-Scroll-Top-Button-Width);
  background-color: var(--alpha-light);
  outline: var(--border-basic-dark-L1);
  border-radius: 0.25rem;
}

/* scroll-container */
.scroll-container {
  scrollbar-color: var(--alpha-light) var(--alpha-dark);
}
.scroll-container::-webkit-scrollbar {
  background-color: var(--alpha-light);
}
.scroll-container::-webkit-scrollbar-track {
  background-color: var(--alpha-dark);
}

/* skip-to-main-content */
.skip-to-main-content-container {
  opacity: 0;
  background-color: var(--alpha-light);
  border: var(--border-basic-dark-L1);
  border-radius: 0.25rem;
  padding: var(--size-Padding-l1);
  position: fixed;
  top: 0;
  left: 30%;
  z-index: 0;
}
.skip-to-main-content-container:focus-within {
  opacity: 100;
  z-index: 99;
}

/* noscript */
#modal-noscript {
  background-color: var(--color-Dialog-Background);
  box-shadow: 0 0 0 0.2rem black;
}

#modal-noscript:has(input:checked) {
  display: none;
}

/* dialog */

.top-bar {
  display: grid;
  grid-template-areas: "icon . close";
  grid-template-columns: max-content auto max-content;
  background-color: var(--color-Dialog-Topbar);
}
.top-bar img {
  grid-area: icon;
  padding: var(--size-Padding-l1);
  filter: var(--filter-yellow);
}
.top-bar label[for="modal-close-button"] {
  grid-area: close;
  padding: var(--size-Padding-l1);
  color: #ececec;
}
.top-bar #modal-close-button {
  position: absolute;
  opacity: 0;
}
.top-bar label[for="modal-close-button"]:hover,
.top-bar label:has(:focus) {
  background-color: var(--color-Dialog-Close-Button);
}
.top-bar label[for="button"]:hover,
.top-bar label:has(:focus) {
  background-color: var(--color-Dialog-Close-Button);
}
.top-bar label:focus-within {
  outline: var(--focus-accessible);
}

/* captcha */
.h-captcha {
  background-color: #ffffff;
  border: var(--border-inset-L1);
}
.h-captcha iframe {
  border: none;
  display: block;
  margin: auto;
}

/* responsive design */

/* Default: Large devices such as laptops, computers (greater than 1024px) *

/* Medium devices such as tablets (1024px or lesser) */
@media only screen and (max-width: 1024px) {
}

/* Small devices such as phones (768px or lesser) */
@media only screen and (max-width: 768px) {
  .header-menu {
    height: auto;
  }
  .header-menu nav ul {
    display: block;
  }
  .header-menu.grid {
    grid-template-areas: ". one ." ". two ." ". three .";
    grid-template-columns: auto max-content auto;
    align-content: center;
  }
  .header-menu .search-container {
    margin-bottom: 1rem;
  }
  .page-home .background-frame {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .page-about > div {
    grid-template-areas:
      ". title title ."
      ". hr1 hr1 ."
      ". image image ."
      ". body body ."
      ". hr2 hr2 .";
  }
}

@media only screen and (max-width: 600px) {
  #blog-entry article {
    grid-template-areas:
      ". title title ."
      ". image image ."
      ". opening opening ."
      ". body body .";
    grid-template-columns: auto 45% 45% auto;
  }
  #blog-feature-img {
    max-width: 80%;
  }
}

/* animations */

@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pulse {
  40% {
    background-color: var(--alpha-light);
    box-shadow: var(--shadow-box-inset);
    outline: var(--border-inset-L1);
  }
  60% {
    background-color: var(--alpha-light);
    box-shadow: var(--shadow-box-inset);
    outline: var(--border-inset-L1);
  }
}
@keyframes ellipses {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* classes: animated */
.spin-clockwise {
  animation: spin 2s linear infinite;
}
.fade {
  animation: fade 0.25s forwards;
}
.pulse {
  animation: pulse 0.75s;
}
.closed {
  background-color: black;
  height: 0;
  padding: 0;
}
.closed * {
  opacity: 0;
}
.filter-grey {
  filter: var(--filter-grey);
}