:root {
    --background: #0e0e0e;
    --text: #ffffff;
    --link: #008a12;
}

body {
    background-color: var(--background);
    color: var(--text);
}

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

img {
    image-rendering: pixelated;
}

.center {
    text-align: center;
}

.crt {
    position: relative;
    display: inline-block;
    animation: flicker 2s infinite;
    margin-top: 100px;
}

.flicker {
    display: block;
}

.scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.3) 2px,
        rgba(0, 0, 0, 0.3) 4px
    );

    mask-image: url("images/remi1.png");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center;

    animation: scanlines 0.15s linear infinite;
}

@keyframes scanlines {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 4px;
    }
}

@keyframes flicker {
    0%, 100% {
        opacity: 1;
    }

    10% {
        opacity: 0.9;
    }

    11% {
        opacity: 1;
    }

    50% {
        opacity: 0.95;
    }

    51% {
        opacity: 0.7;
    }

    52% {
        opacity: 1;
    }
}