@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700&family=Orbitron&display=swap');
 :root {
    --box-open-transition: 0.3s;
    --back: #000000;
    --accent: #FF00FF;
    --accent-light: #ff92ff;
    --border-alt: #0bb1ce6c;
    --text: #FFFFFF;
    --text-disabled: #FFFFFF77;
    --border-width: 1px;
    --clipsize: 8px;
    --arrow-size: 5px;
    --cross-corner-size: 5px;
    --octo-corner-size: 5px;
}

body {
    background-color: #2c2c2c;
    color: #dfdfdf;
    font-family: 'Jura', sans-serif;
}

.holo {
    font-family: "Jura", 'Roboto', sans-serif;
    border: 0px;
    color: white;
    /* background-color: var(--accent); */
    background-color: var(--border-alt);
    padding: 10px 15px;
    z-index: 1;
    position: relative;
}

.holo::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 25px -10px var(--accent);
    z-index: -1;
}

.holo::before {
    content: "";
    position: absolute;
    top: var(--border-width);
    left: var(--border-width);
    right: var(--border-width);
    bottom: var(--border-width);
    z-index: -2;
    /* background-color: var(--back); */
    background-image: linear-gradient(to bottom, #000F, #000B);
}

.holo.interactable:hover::after {
    box-shadow: inset 0 0 35px -10px var(--accent);
}

.holo.interactable:active::after {
    box-shadow: inset 0 0 45px -10px var(--accent);
}

.holo:disabled {
    background-color: var(--text-disabled);
    color: var(--text-disabled);
}

.holo:disabled::after {
    box-shadow: inset 0 0 5px -10px var(--accent);
}

.shape-arrow,
.shape-arrow::after,
.shape-arrow::before {
    clip-path: polygon(calc(100% - var(--arrow-size)) 0%, 100% 50%, calc(100% - var(--arrow-size)) 100%, 0% 100%, var(--arrow-size) 50%, 0% 0%);
}

.shape-arrow-rev,
.shape-arrow-rev::after,
.shape-arrow-rev::before {
    clip-path: polygon(100% 0%, calc(100% - var(--arrow-size)) 50%, 100% 100%, var(--arrow-size) 100%, 0% 50%, var(--arrow-size) 0%);
}

.shape-cross,
.shape-cross::before,
.shape-arrow::after {
    clip-path: polygon(0% var(--cross-corner-size), var(--cross-corner-size) var(--cross-corner-size), var(--cross-corner-size) 0%, calc(100% - var(--cross-corner-size)) 0%, calc(100% - var(--cross-corner-size)) var(--cross-corner-size), 100% var(--cross-corner-size), 100% calc(100% - var(--cross-corner-size)), calc(100% - var(--cross-corner-size)) calc(100% - var(--cross-corner-size)), calc(100% - var(--cross-corner-size)) 100%, var(--cross-corner-size) 100%, var(--cross-corner-size) calc(100% - var(--cross-corner-size)), 0% calc(100% - var(--cross-corner-size)));
}

.shape-octo,
.shape-octo::before,
.shape-octo::after {
    clip-path: polygon(var(--octo-corner-size) 0%, calc(100% - var(--octo-corner-size)) 0%, 100% var(--octo-corner-size), 100% calc(100% - var(--octo-corner-size)), calc(100% - var(--octo-corner-size)) 100%, var(--octo-corner-size) 100%, 0% calc(100% - var(--octo-corner-size)), 0% var(--octo-corner-size));
}

.shape-hocto-r,
.shape-hocto-r::before,
.shape-hocto-r::after {
    clip-path: polygon(var(--octo-corner-size) 0%, 100% 0, 100% calc(100% - var(--octo-corner-size)), calc(100% - var(--octo-corner-size)) 100%, 0 100%, 0% var(--octo-corner-size));
}

.shape-hocto-l,
.shape-hocto-l::before,
.shape-hocto-l::after {
    clip-path: polygon(calc(100% - var(--octo-corner-size)) 0%, 100% var(--octo-corner-size), 100% 100%, var(--octo-corner-size) 100%, 0% calc(100% - var(--octo-corner-size)), 0 0);
}

.shape-poly1,
.shape-poly1::before,
.shape-poly1::after {
    --gap-size: 5px;
    --gap-pos: 5px;
    clip-path: polygon(0% 0%, 0% 100%, 0 100%, calc(100% - var(--gap-size) - var(--gap-pos)) 100%, 100% calc(100% - var(--gap-size) - var(--gap-pos)), 100% calc(100% - var(--gap-pos)), calc(100% - var(--gap-pos)) 100%, 100% 100%, 100% 100%, 100% 0%);
}

.shape-poly2,
.shape-poly2::before,
.shape-poly2::after {
    --gap-size: 5px;
    --gap-pos: 5px;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 100% calc(var(--gap-size) + var(--gap-pos)), calc(100% - var(--gap-size) - var(--gap-pos)) 0, calc(100% - var(--gap-pos)) 0, 100% var(--gap-pos), 100% 0, 100% 0, 0 0);
}

.shape-poly3,
.shape-poly3::before,
.shape-poly3::after {
    --gap-size: 5px;
    --gap-pos: 5px;
    clip-path: polygon(100% 100%, 100% 0, 100% 0, calc(var(--gap-size) + var(--gap-pos)) 0, 0 calc(var(--gap-size) + var(--gap-pos)), 0 var(--gap-pos), var(--gap-pos) 0, 0 0, 0 0, 0 100%);
}

.shape-poly4,
.shape-poly4::before,
.shape-poly4::after {
    --gap-size: 5px;
    --gap-pos: 5px;
    clip-path: polygon(100% 0, 0 0, 0 0, 0 calc(100% - var(--gap-pos) - var(--gap-size)), calc(var(--gap-size) + var(--gap-pos)) 100%, var(--gap-pos) 100%, 0 calc(100% - var(--gap-pos)), 0 100%, 0 100%, 100% 100%);
}

.sitecontrol {
    position: absolute;
    opacity: 0;
    display: none;
}


/**
*   NAVIGATION
*/

@media screen and (min-width: 1080px) {
    /*Desktop*/
    main {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .content {
        width: 800px;
        height: 600px;
        margin-top: 150px;
    }
    nav {
        display: flex;
        flex-direction: column;
        position: relative;
        left: 0;
        top: 120px;
        width: 15%;
        margin-right: 35px;
        justify-items: top;
        align-content: flex-end;
    }
    nav .navitem {
        right: 0;
        position: relative;
        width: 80%;
    }
}

@media screen and (max-width: 1080px) {
    main {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .content {
        /* margin-top: 400px; */
        height: 90vh;
        width: 100vw;
    }
    /* Smaller */
    nav {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

nav {
    max-height: 640px;
}

nav label.navitem {
    font-size: larger;
    margin: 6px 12px;
    animation: frame-flicker 1s linear 0s 1 forwards;
}

nav label.navitem:hover {
    /* text-decoration: underline; */
}


/*END NAV*/

.content {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.labelclose {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    margin: 15px 20px;
}

#labelstopfx {
    margin-top: auto;
    /* margin-bottom: 240px; */
}

input[type="radio"]:not(:checked)~.content>div:not(#start_content) {
    opacity: 0;
    position: absolute;
    background-color: #0bb1ce6c;
    width: 00px;
    height: 00px;
    max-width: 80vw;
    max-height: 80vh;
    /* font-size: 0px;
    margin-top: 800px; */
    padding: 25px 25px;
    transition-timing-function: cubic-bezier(.34, .7, .41, 1.33);
    transition: width 0.5s, opacity 0.5s, height 0.5s, font-size 0.1s;
    transition-delay: 0s;
}

#closebox:checked~nav {
    display: none !important;
}

#start_content {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
}

#start_content h1>label {
    display: inline-block;
    text-shadow: 1px -1px 0px black, -1px 1px 0px black, -1px -1px 0px black, 1px 1px 0px black;
    transition: text-shadow 50ms;
}

#start_content h1>label:hover {
    display: inline-block;
    transition: text-shadow 50ms;
    color: #00000000;
    text-shadow: 5px -2px 2px #00ff00, -5px -2px 2px #ff0000, 0px 5px 2px #0000ff;
}

#closebox:not(:checked)~.content #start_content {
    display: none;
}

#closebox:checked~.content #start_content {
    opacity: 1;
    width: 800px;
    height: 600px;
    font-size: 1em;
    transition-timing-function: cubic-bezier(.25, -0.8, .58, .11);
    transition: width 0.5s, opacity 0.5s, height 0.5s, font-size 0.5s;
    transition-delay: var(--box-open-transition);
}

#box1:checked~.content #home_content {
    opacity: 1;
    width: 800px;
    height: 600px;
    font-size: 1em;
    transition-timing-function: cubic-bezier(.25, -0.8, .58, .11);
    transition: width 0.5s, opacity 0.5s, height 0.5s, font-size 0.5s;
    transition-delay: var(--box-open-transition);
}

#box1:checked~nav #labelbox1::after {
    outline: 2px solid deeppink;
    box-shadow: inset 0 0 45px -10px var(--accent);
}

#box2:checked~.content #about_content {
    opacity: 1;
    width: 800px;
    height: 600px;
    font-size: 1em;
    transition-timing-function: cubic-bezier(.25, -0.8, .58, .11);
    transition: width 0.5s, opacity 0.5s, height 0.5s, font-size 0.5s;
    transition-delay: var(--box-open-transition);
}

#box2:checked~nav #labelbox2::after {
    outline: 3px solid rgb(20, 255, 59);
    box-shadow: inset 0 0 45px -10px var(--accent);
}

.content div section {
    overflow: auto;
    height: 580px;
    margin-top: 20px;
    max-height: 580px;
    scrollbar-color: var(--scroll-thumb-color, grey) var(--scroll-track, transparent);
    scrollbar-width: thin;
    /* scroll-margin-block-start: 25px; */
}

.content div section article {
    position: relative;
    top: -20px;
}

.content div article::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.content div article::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: var(--scroll-track-radius, var(--scroll-radius));
}

.content div article::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color, grey);
    background-image: var(--scroll-thumb, none);
    border-radius: var(--scroll-thumb-radius, var(--scroll-radius));
}

.content .octo-bigger {
    --octo-corner-size: 25px;
}

main {
    position: relative;
    z-index: 99;
}

.two-cols {
    display: flex;
}

.two-cols>div {
    padding: 3px;
}

@keyframes frame-flicker {
    0% {
        opacity: 0;
    }
    19% {
        opacity: 1;
    }
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        opacity: 1;
    }
}