* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

/* Variables to use inside many pages (primarily colors) */

:root {
    --gray10: rgb(10, 10, 10);
    --gray20: rgb(20, 20, 20);
    --gray50: rgb(50, 50, 50);

    --success: rgb(47, 199, 110);
    --danger: rgb(197, 71, 77);

    --darker-blue: rgb(20, 40, 40);
    --darker-yellow: rgb(230, 204, 59);

    --slider-size: .75;
    --navi-blue: rgb(5, 5, 15);
}

/* Disabled elements in general appear darker with a special cursor */

:disabled {
    cursor: not-allowed;
    filter: brightness(70%);
}

/* No default outline on some clicked inputs */

:focus {
    outline: none;
}

/* Dots of list elements */

::marker {
    color: var(--darker-yellow);
}

/* Every body is a flex box because of its beneficial features */

body {
    margin: 3rem;

    display: flex;
    flex-direction: column;
    gap: 2rem;

    background-color: var(--gray20);
}

/* Enterable inputs */

input:not([type]),
input[type="text"],
input[type="number"] {
    cursor: text !important;
}

/* Clickable inputs */

button,
input,
select {
    border: none;
    padding: 1rem;

    cursor: pointer;
}

/* Further elements */

video {
    background-color: var(--gray20);
    object-fit: fill;
}

/* (Decoration spacer line) */

hr {
    width: 100%;

    border-width: .1rem 0;
    border-color: var(--darker-yellow);
}

/* Dots of lists inside the element, not outside of it on the left */

li {
    list-style-position: inside;
}

a {
    color: var(--darker-yellow);
}

/* Text/Font related settings */

h1 {
    font-size: 6rem;
}

h2 {
    font-size: 4.5rem;
}

h3 {
    font-size: 3rem;
}

h4 {
    font-size: 2.5rem;
}

h5 {
    font-size: 2rem;
}

h6 {
    font-size: 1.5rem;
}

p,
b,
a,
i,
li,
select,
button,
input,
textarea,
span {
    font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
b,
i,
li,
span {
    color: whitesmoke;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
b,
a,
i,
li,
select,
button,
input,
textarea,
span {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* Settings for the navigator on the top */

#navigator {
    z-index: 10;

    position: fixed;
    top: 0;
    right: 0;

    display: flex;
    flex-direction: column;
    align-items: end;

    filter: drop-shadow(0rem 0rem 1rem rgba(0, 0, 0, .5));
}

/* Elements inside the main container */

#navigator>* {
    user-select: none;
    cursor: pointer;
    transition: .2s;

    background-color: var(--navi-blue);
}

/* Hover effect of said elements */

#navigator>*:hover {
    background-color: white;
}

/* Main button of the navigator */

#navigator>a {
    padding: 1.5rem;
    text-align: right;
}

/* Expand it on open */

#navigator>a[open="true"] {
    width: 100%;
}

/* Every navigator button (page and main button) */

#navigator a {
    display: block;

    color: white;
    font-weight: bold;
    text-decoration: none;
}

/* Every page container */

#navigator div {
    width: 16rem;
}

/* Buttons of the page containers */

#navigator div a {
    padding: 1.5rem 1.5rem 1.5rem 3.5rem;
}

/* Hide all page containers if the navigator is closed */

#navigator:not(:has(div[open="true"])) div {
    display: none;
}

/* Every second button container has a slightly changed background color */

#navigator div:nth-child(even) {
    filter: saturate(.5);
}

/* Page toggle logic */

#navigator div[open="false"] {
    opacity: 0;
    pointer-events: none;
}

#navigator div[open="true"] {
    opacity: 1;
}

/* Button hover effect */

#navigator div:hover img {
    filter: invert();
}

/* Invert color as well (obviously) */

#navigator div:hover a,
#navigator>a:hover {
    color: var(--navi-blue);
}

/* Icons of the navigator */

#navigator img {
    margin: 1.2rem 0 0 .75rem;

    position: absolute;
    left: 0;

    width: 2rem;
    height: 2rem;

    pointer-events: none;
}

/* Fancy toggle buttons */

.switch {
    position: relative;
    display: inline-block;

    width: calc(6rem * var(--slider-size));
    height: calc(3.4rem * var(--slider-size));
}

.switch input {
    opacity: 0;

    width: 0;
    height: 0;
}

.slider {
    cursor: pointer;
    background-color: #ccc;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    transition: .2s;
}

.slider:before {
    width: calc(2.6rem * var(--slider-size));
    height: calc(2.6rem * var(--slider-size));

    background-color: white;

    content: "";
    transition: .2s;

    position: absolute;
    left: calc(.4rem * var(--slider-size));
    bottom: calc(.4rem * var(--slider-size));
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 calc(.1rem * var(--slider-size)) #2196F3;
}

input:checked+.slider:before {
    transform: translateX(calc(2.6rem * var(--slider-size)));
}

.slider.round {
    border-radius: calc(3.4rem * var(--slider-size));
}

.slider.round:before {
    border-radius: 50%;
}

/* Increase navigator size on lower resolutions like phones */

@media (max-width: 1080px) and (min-height: 800px) {
    #navigator a {
        font-size: 2rem !important;
    }

    #navigator div {
        width: 24rem;
    }

    #navigator div a {
        padding-left: 4.5rem;
    }

    #navigator img {
        width: 2.5rem;
        height: 2.5rem;

        margin: 1.75rem 0 0 1.05rem;
    }
}

/* Navigator on small height becomes "wider" */

@media (max-height: 800px) and (min-width: 1080px) {
    #navigator {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        direction: rtl;
    }

    #navigator>a {
        width: fit-content;
    }

    #navigator a {
        white-space: nowrap;
    }

    #navigator div:nth-child(odd) img {
        right: 13.2rem;
    }
}

/* Special query for the navigator */

@media (max-width: 380px) {
    #navigator img {
        width: 5vw;
        height: 5vw;
        margin: 3.5vw 0 0 2.1vw;
    }

    #navigator div {
        width: 55vw;
    }

    #navigator div a {
        padding: 3vw 3vw 3vw 9vw;
    }

    #navigator>a {
        padding: 3vw;
    }

    #navigator a {
        font-size: 4vw !important;
    }
}