/* variables */
:root {
    /* colors */
    /* --hologram-alt-color: rgba(236, 94, 150, 0.834); */
    /* --hologram-alt-color: rgb(255, 237, 240); */
    --hologram-alt-color: #8C72AB;
    --hologram-color: rgb(190, 242, 251);

    /* --alt-background-color: rgb(255, 237, 240); */
    --alt-background-color: #8C72AB;
}

/* animations */
/* makes a rainbow effect by rotating hue */
@keyframes filter-rotate {
    from {
        filter: hue-rotate(0deg) brightness(110%);
    }

    to {
        filter: hue-rotate(360deg) brightness(110%);
    }
}

/* fonts */
/* sixtyfour */
@font-face {
    font-family: "Sixtyfour";
    src: url(../fonts/Sixtyfour-Regular-VariableFont_BLED_SCAN.ttf);

}

/* font classes */
.sixtyfour {
    font-family: "Sixtyfour", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "BLED" 0,
        "SCAN" 30;

    transition: font-variation-settings 0.1s linear;

    color: #000000;
    text-shadow: 3px 1px 2px #00000038;

}

/* class styles */
/* nav styling */
.navbar-list {
    padding-top: 10px;
    vertical-align: middle;
}

.navbar-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.navbar-list li {
    margin-left: 10px;
    margin-right: 10px;

    font-size: 30px;
    display: inline-block;
}

/* styling to make the holo-pane class work and look good */
nav .holo-pane::before {
    opacity: 95%;

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: var(--alt-background-color);
    background-image: url(/images/scanlines-01.png);
    background-blend-mode: overlay;

    border-top: 10px double #fffefe;
    border-left: 10px double #fffefe;
    border-bottom: 10px double #fffefe;
    border-right: 10px double #fffefe;
    border-radius: 25px;

    box-shadow: 3px 3px 5px var(--hologram-alt-color);

    z-index: -1;
}

.holo-pane {
    position: relative;

    padding: 10px;

    will-change: transform !important;

    transform-style: preserve-3d;

    z-index: 1;

    border-radius: 25px;

    /* transition: transform 0.7s cubic-bezier(0.29, 1.67, 0.25, 1.67); */
}

.holo-pane::before {
    opacity: 100%;

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: var(--hologram-alt-color);
    background-image: url(/images/checkerboard-pattern.jpg);
    background-blend-mode: screen;

    border-top: 5px solid white;
    border-left: 5px solid white;
    border-bottom: 5px solid white;
    border-right: 5px solid white;
    border-radius: 25px;

    box-shadow: 3px 3px 5px var(--hologram-alt-color);

    z-index: -1;
}

.holo-pane a {
    display: inline-block;
}

.holo-pane a .sixtyfour,
.holo-pane.sixtyfour a {
    color: #000000c5 !important;
}

/* holo pane alternate background */
.holo-pane.alt-background::before {
    opacity: 100%;

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: var(--alt-background-color);
    background-image: url(/images/Diagonals_Poppy_grayscale.png);
    background-blend-mode: hard-light;

    border-top: 5px solid #fffefe;
    border-left: 5px solid #fffefe;
    border-bottom: 5px solid #fffefe;
    border-right: 5px solid #fffefe;
    border-radius: 25px;

    box-shadow: 3px 3px 5px var(--hologram-alt-color);

    z-index: -1;
}

.holo-pane.alt-background .sixtyfour {
    color: #00000038;

    text-shadow: 3px 1px 2px pink;
}


.holo-pane.alt-background .sixtyfour {
    color: #00000038;

    text-shadow: 3px 1px 2px white;
}

.holo-pane.alt-background img {
    width: 90%;
    height: auto;

    margin: 10px;

    box-shadow: 5px 5px 10px #000000;

    border: 5px outset var(--alt-background-color);
    border-radius: 0px;
}

/* holo pane backgroundless style */
.holo-pane.backgroundless {
    padding: 0;
}

.holo-pane.backgroundless::before {
    opacity: 100%;

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: transparent;
    background-image: none;
    background-blend-mode: none;

    border-top: none;
    border-left: none;
    border-bottom: none;
    border-right: none;
    border-radius: 25px;

    box-shadow: none;

    z-index: -1;
}

.holo-pane>* {
    transform-style: preserve-3d !important;
    transform: translateZ(50px);
}

.holo-pane img {
    width: 90%;
    height: auto;

    margin: 20px;

    border-radius: 25px;
}

.separator {
    padding: 10px;
    background-color: var(--hologram-color);
    background-image: url(/images/scanlines-01.png);
    /* background-blend-mode: soft-light; */

    border-top: 10px double white;
    border-left: 10px double white;
    border-bottom: 10px double white;
    border-right: 10px double white;
    border-radius: 25px;

    box-shadow: 3px 3px 5px var(--hologram-color);
}

.separator.scrollable {
    /* set height value with inline style */
    overflow-y: auto;
    overflow-x: hidden;
}

.separator .holo-pane::before {
    opacity: 100%;
}

/* tag styles */
body {
    position: relative;

    padding-bottom: 40px;

    background-image: url(/images/CD_OS9.png);
    background-color: #8C72AB;
    background-attachment: fixed;
}

.holo-pane img {
    box-shadow: none;
}

img {
    max-width: 100%;
    height: auto;


    border-radius: 25px;

    box-shadow: 5px 5px 10px;
}

a {
    text-decoration: none;
}

body :not(.holo-pane) a:not(.navbar-list a),
body :not(.separator) a:not(.navbar-list a),
body :not(nav)>a:not(.navbar-list a),
body>a:not(nav a):not(.navbar-list a),
a h4 {
    color: #000000c5;
    text-shadow: 3px 1px 2px #ffffff;
}

a:hover h4 {
    color: #ff8181 !important;

    text-shadow: 4px 2px 3px #ffb4b4 !important;

    animation: filter-rotate 2.5s linear infinite forwards !important;

    font-variation-settings:
        "BLED" 100,
        "SCAN" 0;
}

.sixtyfour a,
a h1.sixtyfour,
a h2.sixtyfour,
a h3.sixtyfour {
    color: #00000038;
    text-shadow: 3px 1px 2px #ffffff;

    text-decoration: none;

    transition: color 0.1s ease-in-out, text-shadow 0.1s ease-in-out, font-variation-settings 0.1s ease-in-out;
}

.sixtyfour a:hover,
a:hover h1.sixtyfour,
a:hover h2.sixtyfour,
a:hover h3.sixtyfour {
    color: #ff8181 !important;

    text-shadow: 4px 2px 3px #ffb4b4 !important;

    animation: filter-rotate 2.5s linear infinite forwards !important;

    font-variation-settings:
        "BLED" 100,
        "SCAN" 0;
}

a img {
    border: 6px solid transparent;

    transition: border 0.2s ease-in-out;
}

a:hover img {
    border: 14px double #f6c3ff;
}

.separator a:hover img {
    border: 6px double #8C72AB;
}