:root {
    --width: 100vw;
    --angle: -15deg;

    --precalctan: calc(tan(var(--angle) * -1) / 2);
    --skew-pad-horizontal: calc(var(--precalctan) * var(--width));
    --skew-pad-vertical: calc(var(--precalctan) * 100vh);

    --rust1: #a53f27;
    --rust2: #a76a4a;
    --rust3: #a95925;
    --rust4: #213533;

    --text-color: #f5deb3;
    --header-color: #301910;
}

a:visited {
    color: var(--text-color);
}

a {
    color: var(--text-color);
}

nav > ul > li {
    display: flex;
    position: fixed;
    height: calc(50vh + var(--skew-pad-horizontal));
    transform: skewY(var(--angle));
    transform-origin: 50% 0;
    box-shadow: 0 0 50px 0 black;
    width: 100vw;
    justify-content: center;
    text-align: center;
    z-index: 2;
    left: 0;
}

nav > ul > li:nth-child(1) {
    animation: slideOutTop backwards;
    animation-timeline: --tracked-elem;
    animation-range: entry 0% entry 180vh;
    animation-timing-function: ease-in-out;
    z-index: 3;
    box-sizing: border-box;
    top: calc(-50vh - (2 * var(--skew-pad-horizontal)) + 5vh);
    background: url("./base-noise.svg"), var(--rust4);
    border-bottom-style: dashed;
    border-bottom-width: 1em;
    border-bottom-color: #a53f27;
    align-items: end;
    background-blend-mode: multiply;
}

nav > ul > li:nth-child(2) {
    animation: slideOutBottom backwards;
    animation-timeline: --tracked-elem;
    animation-range: entry 0% entry 180vh;
    animation-timing-function: ease-in-out;

    top: calc(95vh + var(--skew-pad-horizontal));
    background: url("./base-noise.svg"), var(--rust3);
    border-top-style: dashed;
    border-top-width: 1em;
    border-top-color: #a53f27;
    background-blend-mode: multiply;
}

header:before {
    box-shadow: 0 0 50px 0 black;
    animation: slideOutLeft backwards;
    animation-timeline: --tracked-elem;
    animation-range: entry 0% entry 180vh;
    animation-timing-function: ease-in-out;
    content: "";
    position: fixed;
    right: calc(50% + 45vw + var(--skew-pad-vertical));
    background: url("./base-noise.svg"), var(--rust1);
    border-right-style: dashed;
    border-right-width: 1em;
    border-right-color: #213533;
    transform-origin: 0 50%;
    transform: skewX(calc(-1 * var(--angle)));
    z-index: 1;
    width: calc(50vw + var(--skew-pad-vertical));
    height: 100vh;
    visibility: visible;
    background-blend-mode: multiply;
}

header:after {
    box-shadow: 0 0 50px 0 black;
    animation: slideOutRight backwards;
    animation-timeline: --tracked-elem;
    animation-range: entry 0% entry 180vh;
    animation-timing-function: ease-in-out;
    content: "";
    position: absolute;
    left: calc(50% + 45vw + var(--skew-pad-vertical));
    background: url("./base-noise.svg"), var(--rust2);
    border-left-style: dashed;
    border-left-width: 1em;
    border-left-color: #213533;
    transform-origin: 0 50%;
    transform: skewX(calc(-1 * var(--angle)));
    z-index: 1;
    width: calc(50vw + var(--skew-pad-vertical));
    height: 100vh;
    visibility: visible;
    background-blend-mode: multiply;
}
header {
    color: var(--header-color);
    position: fixed;
    display: flex;
    justify-content: center;
    text-align: center;
    left: 50vw;
    top: 50vh;
    align-items: center;
    z-index: 1;
    transform: translate(-50%, -50%);
    padding:10px;
}

body {
    color: var(--text-color);
    max-width: 42rem;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: calc(max(5vh, 20px));
    padding-left: calc(max(5vw, 20px));
    padding-right: calc(max(5vw, 20px));
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4;
}

html {
    background: url("./dark-bg.svg");
    background-attachment: fixed;
    timeline-scope: --tracked-elem;
    animation: backgroundSwitch backwards;
    animation-timing-function: steps(1, end);
    animation-range: entry 0% entry 180vh;

    animation-timeline: --tracked-elem;
}

ul {
    margin: 0;
    padding: 0;
}

@keyframes backgroundSwitch {
    0% {
        background: url("./light-bg.svg");
        background-attachment: fixed;
    }
    30% {
        background: url("./dark-bg.svg");
        background-attachment: fixed;
    }
}
@keyframes fadeOut {
    0% {
        visibility: visible;
    }
    30% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}

@keyframes fadeIn {
    0% {
        visibility: hidden;
    }
    30% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}

@keyframes slideOutTop {
    0% {
        top: calc(40vh - (50vh + var(--skew-pad-horizontal)));
    }
    30% {
        top: calc(50vh - (50vh + var(--skew-pad-horizontal)));
    }
    100% {
        top: calc(-50vh - (2 * var(--skew-pad-horizontal)) + 5vh);
    }
}

@keyframes slideOutLeft {
    0% {
        right: max(calc(50% + var(--skew-pad-vertical)), 100%);
    }
    30% {
        right: 50%;
    }
    100% {
        right: calc(50% + 45vw + var(--skew-pad-vertical));
    }
}

@keyframes slideOutRight {
    0% {
        left: max(calc(50% + var(--skew-pad-vertical)), 100%);
    }
    30% {
        left: 50%;
    }
    100% {
        left: calc(50% + 45vw + var(--skew-pad-vertical));
    }
}

@keyframes slideOutBottom {
    0% {
        top: 60vh;
    }
    30% {
        top: 50vh;
    }
    100% {
        top: calc(95vh + var(--skew-pad-horizontal));
    }
}