body {
    margin: 0;
    padding: 0;
}

.md-dark {
  --md-sys-color-primary: rgb(255 183 122);
  --md-sys-color-surface-tint: rgb(255 183 122);
  --md-sys-color-on-primary: rgb(76 39 0);
  --md-sys-color-primary-container: rgb(107 59 5);
  --md-sys-color-on-primary-container: rgb(255 220 193);
  --md-sys-color-secondary: rgb(227 192 165);
  --md-sys-color-on-secondary: rgb(65 44 25);
  --md-sys-color-secondary-container: rgb(90 66 46);
  --md-sys-color-on-secondary-container: rgb(255 220 193);
  --md-sys-color-tertiary: rgb(195 203 151);
  --md-sys-color-on-tertiary: rgb(45 51 14);
  --md-sys-color-tertiary-container: rgb(67 74 34);
  --md-sys-color-on-tertiary-container: rgb(224 231 177);
  --md-sys-color-error: rgb(255 180 171);
  --md-sys-color-on-error: rgb(105 0 5);
  --md-sys-color-error-container: rgb(147 0 10);
  --md-sys-color-on-error-container: rgb(255 218 214);
  --md-sys-color-background: rgb(25 18 12);
  --md-sys-color-on-background: rgb(239 224 214);
  --md-sys-color-surface: rgb(25 18 12);
  --md-sys-color-on-surface: rgb(239 224 214);
  --md-sys-color-surface-variant: rgb(81 68 59);
  --md-sys-color-on-surface-variant: rgb(214 195 182);
  --md-sys-color-outline: rgb(158 142 130);
  --md-sys-color-outline-variant: rgb(81 68 59);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(239 224 214);
  --md-sys-color-inverse-on-surface: rgb(55 47 40);
  --md-sys-color-inverse-primary: rgb(136 82 28);
  --md-sys-color-primary-fixed: rgb(255 220 193);
  --md-sys-color-on-primary-fixed: rgb(46 21 0);
  --md-sys-color-primary-fixed-dim: rgb(255 183 122);
  --md-sys-color-on-primary-fixed-variant: rgb(107 59 5);
  --md-sys-color-secondary-fixed: rgb(255 220 193);
  --md-sys-color-on-secondary-fixed: rgb(42 23 7);
  --md-sys-color-secondary-fixed-dim: rgb(227 192 165);
  --md-sys-color-on-secondary-fixed-variant: rgb(90 66 46);
  --md-sys-color-tertiary-fixed: rgb(224 231 177);
  --md-sys-color-on-tertiary-fixed: rgb(25 30 0);
  --md-sys-color-tertiary-fixed-dim: rgb(195 203 151);
  --md-sys-color-on-tertiary-fixed-variant: rgb(67 74 34);
  --md-sys-color-surface-dim: rgb(25 18 12);
  --md-sys-color-surface-bright: rgb(65 55 49);
  --md-sys-color-surface-container-lowest: rgb(20 13 8);
  --md-sys-color-surface-container-low: rgb(34 26 20);
  --md-sys-color-surface-container: rgb(38 30 24);
  --md-sys-color-surface-container-high: rgb(49 40 34);
  --md-sys-color-surface-container-highest: rgb(60 51 44);
}

@font-face {
    font-family: 'Roboto';
    src: url(/lfs_assets/Roboto/Roboto-VariableFont_wdth\,wght.ttf);
}

* {
    font-family: 'Roboto';
}

.header_container a {
    text-decoration: none;
    color: var(--md-sys-color-primary);
    padding: 8px;
    border-radius: 8px;
    font-size: 1em;
}

.header_container a:hover {
    background-color: #FFFFFF20;
}

:root {
    --header-container-height: 48px;
}

.header_container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: calc(var(--header-container-height) - 8px * 2);
    background-color: var(--md-sys-color-surface-container);
    display: flex;
    flex-direction: row;
    padding: 8px;
    gap: 8px;
    align-items: center;
}

.main_container {
    margin-top: var(--header-container-height);
    padding: 8px;
    width: calc(100vw - 16px);
    min-height: calc(100vh - var(--header-container-height) - 16px);
    background-color: var(--md-sys-color-surface);
}

.index_btn_content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.white-text {
    color: var(--md-sys-color-on-surface);
}

.small-text {
    font-size: 1em;
}

.medium-text {
    font-size: 2em;
}

.large-text {
    font-size: 3em;
}

button {
    border-radius: 8px;
    padding: 8px;
    border: var(--md-sys-color-outline) 2px solid;
    background-color: var(--md-sys-color-on-primary);
    color: var(--md-sys-color-primary);
    font-size: 1.3em;
}

button:hover {
    background-color: var(--md-sys-color-on-primary-fixed);
}