:root {
    --rosewater: hsl(198, 76%, 69%);
    --flamingo: hsl(213, 100%, 50%);
    --pink: hsl(316, 72%, 86%);
    --mauve: hsl(267, 84%, 81%);
    --red: hsl(343, 81%, 75%);
    --maroon: hsl(350, 65%, 77%);
    --peach: hsl(23, 92%, 75%);
    --yellow: hsl(41, 86%, 83%);
    --green: hsl(115, 54%, 76%);
    --teal: hsl(170, 57%, 73%);
    --sky: hsl(189, 71%, 73%);
    --sapphire: hsl(198, 76%, 69%);
    --blue: hsl(217, 92%, 76%);
    --lavender: hsl(232, 97%, 85%);
    --text: hsl(226, 64%, 88%);
    --subtext1: hsl(227, 10%, 80%);
    --subtext0: hsl(228, 10%, 70%);
    --overlay2: hsl(228, 10%, 65%);
    --overlay1: hsl(230, 10%, 60%);
    --overlay0: hsl(231, 10%, 55%);
    --surface3: hsl(233, 10%, 50%);
    --surface2: hsl(233, 10%, 45%);
    --surface1-5: hsl(237, 10%, 40%);
    --surface1: hsl(237, 10%, 35%);
    --surface0-5: hsl(240, 10%, 30%);
    --surface0: hsl(236, 10%, 25%);
    --base: hsl(240, 10%, 20%);
    --mantle: hsl(240, 10%, 16%);
    --crust: hsl(240, 10%, 12%);
    
    --el-grad: linear-gradient(var(--surface2) 45%, var(--surface1) 55%);
    --el-grad-h: linear-gradient(var(--overlay0) 45%, var(--surface2) 55%);
    --el-grad-a: linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db);

    --cursor-default: url("/assets/cursors/default.cur");
    --cursor-link: url("/assets/cursors/link.cur");
}

* {
    font-family: "Segoe UI", serif;
    box-sizing: border-box;
    line-height: 1.5;

    cursor: var(--cursor-default), auto;
}

.noAnimations * {
    transition: none !important;

    animation: none !important;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    min-height: 100vh;

    color: var(--text);
    background-color: var(--crust);
    text-shadow: 2px 2px 6px var(--base);

    width: 800px;
    max-width: 800px;
    margin: auto;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}

img


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Segoe UI Light", serif;
    margin: 0;
}

p,
a,
body {
    font-size: 12px;
}

p {
    margin: 0 0 15px;
}

h1 {
    font-size: 64px;
    margin-bottom: 5px;
}

h2 {
    font-size: 48px;
    margin-bottom: 5px;
}

h3 {
    font-size: 36px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
}
h6 {
    font-size: 12px;
}

header {
    margin-bottom: 25px;
}

header::after {
    content: "";
    display: block;
    height: 1px;
    background-color: var(--surface1);
    left: 0;
    right: 0;
    bottom: 0;
}

hr {
    background: linear-gradient(to right, var(--surface2), var(--overlay2));
    height: 1px;
    border: 0;
}

ul {
    padding-left: 15px;
}

ul ul,
details details {
    padding-left: 15px;
}

summary {
    color: var(--blue);
}
summary:hover {
    text-decoration: underline dotted;
    cursor: pointer;
}

@media screen and (max-width: 800px) {
    body {
        padding: 0;
    }

    .content,
    .header {
        width: 100%;
        min-width: 0;
        border-radius: 0;
    }
}

.background {
    width: 120%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: url("/assets/images/background2.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    animation: background 20s ease-in-out infinite alternate;
}

@keyframes background {
    0% {
        filter: blur(7px) contrast(0.7) saturate(1.2) hue-rotate(10deg);
        transform: translateX(-8%) scale(1.1);
    }
    30% {
        filter: blur(14px) contrast(0.9) saturate(1) hue-rotate(0deg);
    }
    60% {
        filter: blur(9px) contrast(0.7) saturate(1.2) hue-rotate(10deg);
    }
    100% {
        filter: blur(6px) contrast(1) saturate(1.1) hue-rotate(-10deg);
        transform: translateX(0%) scale(1);
    }
}

a {
    text-decoration: none;
    transition: 0.1s;
    color: var(--blue);
}

a:hover {
    text-decoration: underline;
    cursor: var(--cursor-link), auto;
}

button,
.button {
    all: unset;
    padding: 2px 8px 2px 8px;
    min-width: 50px;
    text-align: center;
    background: var(--el-grad);
    border-radius: 4px;
    border: 1px solid var(--overlay0);
    pointer-events: auto;
    text-shadow: 1px 1px var(--crust);
}

button:hover,
.button:hover {
    background: var(--el-grad-h);
    text-decoration: none;
}

button::selection,
.button::selection {
    background: transparent;
}

button:active,
.button:active {
}

.card {
    width: 100%;
    padding: 0 15px 15px 15px;
    border: 1px outset var(--surface3);
    border-radius: 7px;
    background: linear-gradient(
            color-mix(in srgb, var(--surface1-5), transparent 50%),
            color-mix(in srgb, var(--surface0), transparent 50%)
    );
    position: relative;
    backdrop-filter: blur(6px);
    box-shadow: 4px 4px 6px var(--surface0);
    z-index: 0;
}
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-image: url("/assets/images/glass.png");
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.1;
    pointer-events: none;
    z-index: -1;
}

table {
    border-collapse: separate;
    border: 1px solid var(--surface3);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface0-5), transparent 40%);
    font-size: 12px;
    width: 100%;
}

td, th {
    border-top: 1px solid var(--surface3);
    font-size: 12px;
    padding: 2px;
}

th {
    border-radius: 6px 6px 0 0;
    border-top: none;
}

td:first-child, th:first-child {
    border-left: none;
    
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.split {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.split > div {
    flex: 1 1 0;
    width: 100%;
}


.fadeIn {
    animation: fadeIn 0.5s steps(6);
}

.fadeOut {
    animation: fadeOut 0.5s steps(6);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@font-face {
    font-family: "Segoe UI";
    font-style: normal;
    src: url("/assets/fonts/SegoeUI.woff");
}

@font-face {
    font-family: "Segoe UI Light";
    font-style: normal;
    src: url("/assets/fonts/SegoeUI-Light.woff");
}

@font-face {
    font-family: "Seven Segment";
    font-style: normal;
    src: url("/assets/fonts/sevensegment.woff");
}

@media screen and (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}