/*
88888888ba
88      "8b                                  ,d
88      ,8P                                  88
88aaaaaa8P' ,adPPYba, ,adPPYba,  ,adPPYba, MM88MMM
88""""88'  a8P_____88 I8[    "" a8P_____88   88
88    `8b  8PP"""""""  `"Y8ba,  8PP"""""""   88
88     `8b "8b,   ,aa aa    ]8I "8b,   ,aa   88,
88      `8b `"Ybbd8"' `"YbbdP"'  `"Ybbd8"'   "Y888
*/

/* A (more) Modern CSS Reset by Andy Bell, updated 2023-09-18 */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

* {
  outline: none;
}

body {
  cursor: default;
  margin: 0;
}

a {
  text-decoration: none;
}

abbr {
  cursor: help;
}

@supports (field-sizing: content) {
  textarea {
    field-sizing: content;
  }
}

/*
88888888888
88                               ,d
88                               88
88aaaaa  ,adPPYba,  8b,dPPYba, MM88MMM ,adPPYba,
88""""" a8"     "8a 88P'   `"8a  88    I8[    ""
88      8b       d8 88       88  88     `"Y8ba,
88      "8a,   ,a8" 88       88  88,   aa    ]8I
88       `"YbbdP"'  88       88  "Y888 `"YbbdP"'
*/

@font-face {
  font-family: 'DM Sans';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url(/assets/fonts/DMSans-Thin.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 200;
  font-display: swap;
  src: url(/assets/fonts/DMSans-ExtraLight.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 200;
  font-style: italic;
  font-display: swap;
  src: url(/assets/fonts/DMSans-ExtraLightItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/DMSans-Light.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url(/assets/fonts/DMSans-LightItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/DMSans-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url(/assets/fonts/DMSans-Italic.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/DMSans-Medium.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url(/assets/fonts/DMSans-MediumItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/DMSans-SemiBold.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url(/assets/fonts/DMSans-SemiBoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/DMSans-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url(/assets/fonts/DMSans-BoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/DMSans-ExtraBold.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 800;
  font-style: italic;
  font-display: swap;
  src: url(/assets/fonts/DMSans-ExtraBoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/DMSans-Black.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 900;
  font-style: italic;
  font-display: swap;
  src: url(/assets/fonts/DMSans-BlackItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Sansita Swashed';
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/SansitaSwashed-Bold.woff2) format('woff2');
}

/*
  ,ad8888ba,
 d8"'    `"8b
d8'
88             ,adPPYba,  8b,dPPYba,  ,adPPYba,
88            a8"     "8a 88P'   "Y8 a8P_____88
Y8,           8b       d8 88         8PP"""""""
 Y8a.    .a8P "8a,   ,a8" 88         "8b,   ,aa
  `"Y8888Y"'   `"YbbdP"'  88          `"Ybbd8"'
*/

:root {
  --sidebar-width: 340px;
  --content-width: 960px;
  --sidebar-background: rgba(28, 28, 28, 1);
  --separator-color: rgba(40, 40, 40, 1);
  --border-color: rgba(64, 64, 64, 1);
  --background-color: rgba(22, 22, 22, 1);
  --font-color: rgba(242, 242, 242, 1);
  --font-color-primary: var(--font-color);
  --font-color-secondary: rgba(180, 180, 180, 1);
  --font-color-tertiary: rgba(128, 128, 128, 1);
  --font-color-quaternary: rgba(90, 90, 90, 1);
  --error-color: rgba(255, 128, 128, 1);
  --success-color: rgba(128, 255, 128, 1);
}

html {
  background: black;
}

body {
  background-color: var(--background-color);
  color: var(--font-color);
  display: flex;
  font-family: 'DM Sans', Arial, Helvetica, sans-serif;
}

a,
a:visited {
  color: var(--font-color-primary);
  fill: inherit;
  stroke: inherit;
}

::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

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

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/*
  ,ad8888ba,
 d8"'    `"8b                                                                                            ,d
d8'                                                                                                      88
88             ,adPPYba,  88,dPYba,,adPYba,  8b,dPPYba,   ,adPPYba,  8b,dPPYba,   ,adPPYba, 8b,dPPYba, MM88MMM ,adPPYba,
88            a8"     "8a 88P'   "88"    "8a 88P'    "8a a8"     "8a 88P'   `"8a a8P_____88 88P'   `"8a  88    I8[    ""
Y8,           8b       d8 88      88      88 88       d8 8b       d8 88       88 8PP""""""" 88       88  88     `"Y8ba,
 Y8a.    .a8P "8a,   ,a8" 88      88      88 88b,   ,a8" "8a,   ,a8" 88       88 "8b,   ,aa 88       88  88,   aa    ]8I
  `"Y8888Y"'   `"YbbdP"'  88      88      88 88`YbbdP"'   `"YbbdP"'  88       88  `"Ybbd8"' 88       88  "Y888 `"YbbdP"'
                                             88
                                             88
*/

.button {
  border-radius: 8px;
  color: var(--font-color-secondary);
  fill: currentColor;
  stroke: currentColor;
  border: 1px solid var(--separator-color);
  padding: 6px 24px;
  display: flex;
  transition: all 200ms ease-out;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 10px var(--background-color);
  background-color: var(--sidebar-background);
  cursor: pointer;
}

.button:not(:disabled):hover {
  background-color: var(--separator-color);
  border-color: var(--font-color-quaternary);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.page {
  display: flex;
  width: 100%;
  transition: all 150ms ease-out;
  padding-left: var(--sidebar-width);
}

.page-wrapper {
  width: 100%;
}

.menu {
  color: var(--font-color-primary);
  fill: currentColor;
  stroke: currentColor;
  display: none;
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  z-index: 50;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
}

.menu > svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 960px) {
  .page {
    padding-left: 0px;
  }

  #sidebar-toggle:checked ~ .page-wrapper .page {
    padding-left: 0px;
  }
}

section {
  margin-bottom: 64px;
}

.main {
  flex-grow: 1;
  padding-top: 96px;
}

.main > .content {
  container-name: main;
  container-type: inline-size;
  max-width: var(--content-width);
  padding: 0 32px;
  margin: auto;
}

.main > .content > .header {
  display: flex;
  align-items: center;
}

.main > .content > .header h1 {
  transition: all 150ms ease-out;
  font-size: 50px;
}

@media (max-width: 960px) {
  .main {
    font-size: 0.9em;
    padding-top: 0px;
  }

  .main > .content > .header {
    position: sticky;
    top: 0;
    background: rgba(22, 22, 22, 0.5);
    margin-left: -24px;
    margin-right: -24px;
    backdrop-filter: blur(5px);
    z-index: 25;
  }

  .main > .content {
    padding: 0 24px;
  }

  .main > .content > .header h1 {
    margin-top: 0px;
    font-size: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 32px;
  }
}

@media (max-width: 800px) {
  .main {
    font-size: 0.8em;
  }

  .main > .content > .header h1 {
    font-size: 28px;
  }
}

@media (max-width: 600px) {
  .main {
    font-size: 0.7em;
  }

  .main > .content > .header h1 {
    font-size: 22px;
  }
}

@container main (max-width: 700px) {
  section {
    margin-bottom: 32px;
  }
}

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