@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --text-color: #33ff00;
    --bg-color: #0d0d0d;
    --shadow-color: rgba(51, 255, 0, 0.5);
    --glare-color: rgba(255, 255, 255, 0.05);
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    font-family: 'Courier Prime', 'Courier New', monospace;
    overflow: hidden;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.screen {
    width: 100%;
    height: 100%;
    position: relative;
    background: radial-gradient(circle, #1a1a1a 0%, #000000 90%);
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* CRT Effects */
.monitor-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.scanlines {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%
    );
    background-size: 100% 4px;
    position: absolute;
    z-index: 10;
}

.glare {
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0.02) 100%
    );
    position: absolute;
    z-index: 11;
}

/* Content Styling */
.content {
    text-align: center;
    z-index: 5;
    text-shadow: 0 0 5px var(--shadow-color);
    animation: textFlicker 3s infinite alternate;
}

.header {
    border-bottom: 2px solid var(--text-color);
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 2rem;
    letter-spacing: 2px;
    font-size: 1.2rem;
}

h1 {
    font-size: 4rem;
    margin: 0;
    letter-spacing: 0.5rem;
    text-transform: uppercase;
}

h2 {
    font-size: 2rem;
    margin: 1rem 0;
    opacity: 0.8;
}

.blink {
    animation: blink 1s step-end infinite;
}

#secret-trigger {
    cursor: pointer;
    transition: color 0.3s;
}

#secret-trigger:hover {
    color: red;
}

.footer {
    margin-top: 4rem;
    font-size: 0.9rem;
}

.loader {
    width: 200px;
    height: 10px;
    border: 1px solid var(--text-color);
    margin: 10px auto;
    position: relative;
    padding: 2px;
}

.bar {
    height: 100%;
    background-color: var(--text-color);
    width: 0%;
    animation: load 5s linear infinite;
}

.small {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-top: 5px;
}

/* Animations */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes textFlicker {
    0% { opacity: 0.9; }
    5% { opacity: 0.8; }
    10% { opacity: 0.9; }
    15% { opacity: 0.3; }
    20% { opacity: 0.9; }
    50% { opacity: 0.9; }
    55% { opacity: 0.5; }
    60% { opacity: 0.9; }
    100% { opacity: 0.9; }
}

@keyframes load {
    0% { width: 5%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* Modes */
.breach-mode {
    --text-color: #ff0000;
    --shadow-color: rgba(255, 0, 0, 0.8);
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both infinite;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.party-mode {
    animation: rainbow 5s linear infinite;
}

@keyframes rainbow {
    100%,0%{ background-color: rgb(255,0,0); }
    8%{ background-color: rgb(255,127,0); }
    16%{ background-color: rgb(255,255,0); }
    25%{ background-color: rgb(127,255,0); }
    33%{ background-color: rgb(0,255,0); }
    41%{ background-color: rgb(0,255,127); }
    50%{ background-color: rgb(0,255,255); }
    58%{ background-color: rgb(0,127,255); }
    66%{ background-color: rgb(0,0,255); }
    75%{ background-color: rgb(127,0,255); }
    83%{ background-color: rgb(255,0,255); }
    91%{ background-color: rgb(255,0,127); }
}