* {
    box-sizing: border-box;
    /* overflow: hidden !important; */
}

@keyframes textflicker {
    0% {
        text-shadow: 1px 0 0 #ea36afa0, -2px 0 0 #75fa6910;
        letter-spacing: 0;
    }
    20% {
        text-shadow: 2px 0.5px 2px #ea36afa0, -1px -0.5px 2px #75fa6910;
        letter-spacing: 0.001em;
    }
    21% {
        text-shadow: none;
        letter-spacing: 0;
    }
}

.primary-gradient-color {
    background: linear-gradient(90deg, #287E47 2.44%, #1DC65A 35.12%, #0A9B3E 66.83%, #1B6E39 100%);
}

.primary-danger-gradient-color {
    background: linear-gradient(90deg, #fa4747 2.44%, #ff5c5c 35.12%, #ff7f7f 66.83%, #fa4747 100%);
}

.text-flicker{
    animation-duration: 3s;
    animation-name: textflicker;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

html { 
    background-image: url('../images/bg.png');
    /* background-size: cover; */
    background-position: center calc(50% - 15px);
}

body {
    /* scanlines */
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.5) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.06), rgba(0, 0, 255, 0.06));
    background-size: cover;
    background-size: 100% 2px;

    /* retro stuff */
    color: #00ff00;
    text-align: center;

    /* flex stuff */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-copy{
    font-family: "Figtree", sans-serif;
    color: white !important;
    text-shadow: 0 0 10px #edffed90;
}

body::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker2 0.3s infinite;
}

@keyframes flicker2 {
    0% {
    opacity: 0;
    }
    10% {
    opacity: 0.34769;
    }
    20% {
    opacity: 0;
    }
    30% {
    opacity: 0.34769;
    }
}

img:not(#qrcode img) {
    filter: drop-shadow(1px 1px 6px #00ff00a0);
}

[type='text'],
input:where(:not([type])),
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
    border: none !important;
    font-size: 18px !important;
    font-weight: 400 !important;
}

input:focus {
    border: none !important;
    box-shadow: none !important;
}

.notie-container {
    box-shadow: none;
}

.flicker-slow {
    animation: flicker 3s linear infinite;
}

.flicker-fast {
    animation: flicker 1s linear infinite;
}

@keyframes flicker {
    0%,
    19.999%,
    22%,
    62.999%,
    64%,
    64.999%,
    70%,
    100% {
        opacity: .99;

    }

    20%,
    21.999%,
    63%,
    63.999%,
    65%,
    69.999% {
        opacity: 0.4;
    }
}

.flicker-slow {
    animation: flicker 8s linear infinite;
}

.scanline {
    width: 100%;
    height: 100px;
    z-index: 8;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(0, 0, 0, 0.1) 100%
    );
    opacity: 0.1;
    position: absolute;
    bottom: 100%;
    animation: scanline 10s linear infinite;
    pointer-events: none;	
}

.scanline1 {
    width: 100%;
    height: 100px;
    z-index: 18;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(0, 0, 0, 0.1) 100%
    );
    opacity: 0.1;
    position: absolute;
    bottom: 100%;
    animation: scanline 4s linear infinite;
    pointer-events: none;	
}

@keyframes scanline {
    0% {
        bottom: 100%;
    }
    80% {
        bottom: 100%;
    }
    100% {
        bottom: 0%;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

.primary-color {
    color: #1DC65A;
}