@font-face {
    font-family: "Celestia Medium Redux";
    /* src: url("../assets/fonts/CelestiaMediumRedux_alt1.55.ttf") format("truetype"); */
    src: url("../assets/fonts/celestia\ redux.ttf") format("truetype");
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
    --page-width: 30rem;
    
    --font-family: "Celestia Medium Redux", Arial, Helvetica, sans-serif;
    --font-size: 1.3rem;
    --small-font-size: 0.8rem;

    --text-shadow: 0px 1px rgba(0, 0, 0, 0.3);
    
    --pink: #FF79A4;
    --pink-disabled: hsl(341, 100%, 90%);;
    --pink-enabled: hsl(341, 100%, 85%);
    --blue: #0072B1;
    --blue-disabled: #0072B1;
    --blue-enabled: #0072B1;
    --white-enabled: rgba(252, 252, 252, 0.7);
    --white-disabled: rgba(252, 252, 252, 0.4);
    --page-background-color: #e1f2fa;


    --green-light: #7fef2aff;
    --green: #55cc1cff;
    --green-dark: #40A715;
    --light-blue-light: #60D5EE;
    --light-blue: #3EB3CC;
    --light-blue-dark: #2CA1BA;
    --red-light: #FF8A79;
    --red: #FF5443;
    --red-dark: #FF4432;
    --pink-light: #FF91B4;
    --pink: #FF6B9B;
    --pink-dark: #FF1461;
    --orange-light: #F8D82F;
    --orange: #EB8B1E;
    --orange-dark: #BB8321;
    --grey-light: #939393;
    --grey: #848484;
    --grey-dark: #626262;
    --light-grey-light: hsl(0, 0%, 80%);
    --light-grey: hsl(0, 0%, 70%);
    --light-grey-dark: hsl(0, 0%, 60%);
}

/* html, body {
    min-height: 100%;
} */
body {
    min-height: 100dvh;
    display: flex;
    background-color: var(--page-background-color);

    font-family: var(--font-family);
    font-size: var(--font-size);
    color: var(--blue);
}

#loading-bar {
    z-index: 2;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    pointer-events: none;
}


#loading-bar[value] {
  --color: blue;
  --background: transparent; /* the background color */

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border: none;
  width: 100%;
  height: 3px;
  border-radius: 0;
  background: var(--background);
}
#loading-bar[value]::-webkit-progress-bar {
  border-radius: 0;
  background: var(--background);
}
#loading-bar[value]::-webkit-progress-value {
  border-radius: 0;
  background: var(--color);
}

#loading-bar[value]::-moz-progress-bar {
  border-radius: 0;
  background: var(--color);
}

header {
    --padding-inline: 0.5rem;

    /* max-width: var(--page-width); */
    background-color: var(--pink);
    /* padding: 0.5rem 1rem; */

    color: white;

    text-shadow: var(--text-shadow);
}

header a {
    color: white;
    text-decoration: none;
}

header a:hover, header a:focus-visible {
    color: var(--blue);
}

.header {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    width: max-content;

    height: 100%;
    max-height: 100dvh;
}

.title-bar {
    padding-inline: var(--padding-inline);
    padding-block: 0.5rem;
}

.sidebar-toggle {
    display: none;
}

.sidebar {
    display: block;
    overflow-y: auto;
}

.sidebar nav {
    flex-grow: 1;
}

.sidebar li {
    list-style: none;
    /* margin-block: 0.1rem; */
    width: 100%;
}

.sidebar-separator {
    border: 1px solid white;
}

.sidebar a {
    text-decoration: none;
    color: white;
    width: 100%;
    display: inline-block;
    padding-inline: var(--padding-inline);
    padding-block: 0.3em;
    text-shadow: var(--text-shadow);
}

.sidebar a:hover, .sidebar a:focus-visible {
    text-decoration: none;
    /* color: var(--orange); */
    background-color: rgba(0, 0, 0, 0.2);
}

/* page */

#page-body {
    width: 100%;
    /* height: 100%; */
    display: flex;
    /* grid-template-columns: auto 1fr; */
}

section {
    margin-block: 1rem;
}

main {
    flex-grow: 1;
    max-width: var(--page-width);
    /* margin: 0.5rem auto; */
    padding: 0 1rem;
    position: relative;
    /* height: 100%; */
}

@media screen and (max-width: 700px) {
    body {
        flex-direction: column;
    }

    .title-bar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .sidebar-toggle {
        display: inline;
    }

    .sidebar-toggle input {
        display: none;
    }

    .sidebar-toggle > label {
        display: block;

        background-image: url(/assets/images/ui/hamburger-menu.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;

        width: 3rem;
        height: 3rem;

        cursor: pointer;
    }

    .sidebar-toggle > label:hover {
        filter: brightness(75%);
    }

    body:has(.sidebar-toggle > input:checked) {
        position: fixed;
        width: 100%;
        /* overflow-y: hidden; */
    }

    body:has(.sidebar-toggle > input:checked) main {
        /* display: none; */
    }

    .header:has(.sidebar-toggle > input:checked) {
        /* height: 100dvh; */
        overscroll-behavior: contain;
    }

    .header {
        position: relative;
        width: 100%;
    }

    .sidebar {
        /* display: none; */
        display: none;
        grid-template-columns: clamp(15rem, 65vw, 25rem) 1fr;
        opacity: 0;

        position: absolute;
        top: 100%;

        width: 100%;

        z-index: 999999;

        height: calc(100dvh - 100%);
    }

    .header:has(.sidebar-toggle > input:checked) .sidebar {
        display: grid;
        opacity: 1;
    }

    .sidebar nav {
        background-color: var(--pink);
    }

    .sidebar .sidebar-background {
        background-color: black;
        opacity: 0;
        width: 100%;
        height: 100%;

        /* transition: opacity 0.3s; */
    }

    .header:has(.sidebar-toggle > input:checked) .sidebar-background {
        opacity: 0.5;
    }
}

/* Elements */

.page-content .link {
    color: var(--pink);
    text-decoration: none;
}

.page-content .link:hover,
.page-content .link:focus {
    color: var(--pink-dark);
    text-decoration: underline;
}

.button-green,
.button-red,
.button-blue,
.button-orange {
    --border-width: 1px;
    --border-radius: 5px;

    font-size: 1.3rem;

    color: white;
    text-shadow: var(--text-shadow);

    border-style: none;

    font-family: var(--font-family);
    background-image: linear-gradient(var(--top-color), var(--bottom-color));
    /* padding: var(--border-width); */
    padding: 0.1em 0.7em;
    margin: 0.1em;
    margin-bottom: 2px;
    background-repeat: no-repeat;

    position: relative;

    /* border: solid #40A715 var(--border-width); */
    border-radius: var(--border-radius);

    box-shadow: 0px 1px 0px 1px var(--shadow-color);

    cursor: pointer;
}

.button-green:hover,
.button-red:hover,
.button-blue:hover,
.button-orange:hover,

.button-green:focus-visible,
.button-red:focus-visible,
.button-blue:focus-visible,
.button-orange:focus-visible {
    background-image: linear-gradient(var(--bottom-color), var(--top-color));
}

.button-green {
    --top-color: var(--green-light);
    --bottom-color: var(--green);
    --shadow-color: var(--green-dark);
}

.button-blue {
    --top-color: var(--light-blue-light);
    --bottom-color: var(--light-blue);
    --shadow-color: var(--light-blue-dark);
}

.button-red {
    --top-color: var(--red-light);
    --bottom-color: var(--red);
    --shadow-color: var(--red-dark);
}

.button-orange {
    --top-color: var(--orange-light);
    --bottom-color: var(--orange);
    --shadow-color: var(--orange-dark);
}

.button-green:disabled,
.button-red:disabled,
.button-blue:disabled,
.button-orange:disabled {
    --top-color: var(--grey-light);
    --bottom-color: var(--grey);
    --shadow-color: var(--grey-dark);
}

#language {
    padding: 0.1em 0.4em;
    font-family: var(--font-family);
    font-size: var(--small-font-size);
    color: var(--blue);
    text-shadow: var(--text-shadow);
    background-color: white;;
    opacity: 0.9;
    border: 1px var(--blue) solid;
}

#language:disabled {
    opacity: 0.7;
}

#language:active {
    outline: none;
}

/* search bar */

.search-box {
    /* display: block; */
    resize: none;
    /* width: 100%; */
    height: auto;
    font-size: 1.2rem;
    font-family: var(--font-family);
    color: var(--blue);

    border: var(--pink-enabled) 2px solid;
    background-color: rgba(252, 252, 252, 0.7);

    text-wrap: nowrap;
    scrollbar-width: none;

    padding: 0.2em;

    margin: 0;
}

.search-box:focus {
    outline: none;
    border-color: var(--pink);
}

.search-box:disabled {
    background-color: rgba(252, 252, 252, 0.4);
    border-color: var(--pink-disabled);
}

.search-box::placeholder {
    color: hsl(0, 0%, 70%);
}

.search-box:focus::placeholder {
    color: hsl(0, 0%, 60%);
}

.search-box:disabled::placeholder {
    color: hsl(0, 0%, 80%);
}

.search-box::-webkit-search-decoration,
.search-box::-webkit-search-cancel-button {
  appearance: none;
}

/* dialog */

.dialog {
    margin: auto auto ;
    border: none !important;
    border-radius: calc(5px * var(--ratio));
    box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 1.6rem;
    overflow: visible;

    border-radius: 10px;
    box-shadow: inset 0px -1px 4px hsl(211, 30%, 55%);
}

.dialog-header {
    text-align: center;
    translate: 0 -100%;
    padding: 0.2em 1em;
    color: white;
    text-shadow: var(--text-shadow);
    font-size: 1.7rem;

    perspective-origin: 50% 50%;
    perspective: 300px;
    transform-style: preserve-3d;

    position: absolute;
    margin-inline: auto;
    right: 0;
    left: 0;
    width: fit-content;
}

.dialog-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    transform: rotateX(-30deg) translateZ(-5px) translateY(5px);
    
    background-image: linear-gradient(var(--pink-light), var(--pink));
    box-shadow: 0px 1px 0px 1px var(--pink-dark);
    border-radius: 0.2em;
}

.dialog-confirmation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
}

/* form stuff */

.form-option {
    display: block;
}

.form-option input {
    display: none;
}

.form-option {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.1em;
    cursor: pointer;
}

.form-option .option-text {
    translate: 0 -0.1em;
}

.form-option:has(input:disabled) {
    cursor: default;
}

.form-option .switch {
    display: inline-block;
    background-color: var(--light-grey-light);
    width: 12px;
    height: 5px;
    border-radius: 50rem;
    position: relative;
    margin-right: 5px;
}

.form-option input[type="checkbox"]:checked+.switch {
    background-color: var(--light-blue-light);
}

.switch::after {
    content: '';
    width: 10px;
    height: 10px;
    aspect-ratio: 1 / 1;
    border-radius: 50rem;
    background-color: var(--light-grey);
    position: absolute;
    left: -5px;
    top: -2.5px;

    transition: left 200ms;
}

.form-option input[type="checkbox"]:checked+.switch::after {
    background-color: var(--light-blue);
    left: calc(100% - 5px);
}