/* dropping all the global shit for the site here */

/* scanlines effect */
body::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/* big refresh scanline */
html::before {
    content: " ";
    display: block;
    position: absolute;
    width: 100%;
    height: 2%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(148, 16, 16, 0.151) 0%, rgba(170, 33, 33, 0.144) 50%, rgba(228, 5, 5, 0.116) 100%);
    opacity: 0.6;
    z-index: 999;
    pointer-events: none;
    animation: scanline-roll 7s linear infinite;
}

/* custom cursor :D */
html,
body,
#system-info {
    cursor: url("../images/cursors/cursor_default.png") 8 8, default;
    /* default */
}

a,
button,
img,
img:hover,
.icon,
.icon:hover,
#desktop-mute-toggle,
.is-filtered:hover,
.close-btn,
.close-btn:hover,
.image-container,
.image-container:hover,
#typingText {
    cursor: url("../images/cursors/cursor_clickable.png") 8 8, pointer;
    /* interactables */
}

p,
h1,
h2,
h3,
h4,
h5 {
    cursor: url("../images/cursors/cursor_text.png") 8 8, default;
    /* text */
}

.title-bar,
.title-bar:hover {
    cursor: url("../images/cursors/cursor_move.png") 8 8, move;
    /* move */
}

/* animations */

@keyframes scanline-roll {
    from {
        transform: translateY(-20vh);
    }

    to {
        transform: translateY(120vh);
    }
}

@keyframes flicker {

    0%,
    100% {
        opacity: 1;
    }

    50.0% {
        opacity: 1;
    }

    50.1% {
        opacity: 0.7;
    }

    50.2% {
        opacity: 1;
    }
}

@keyframes subtle-flicker {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.95;
    }
}