* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #181a20;
    color: #8aff80;
    font-family: 'Times New Roman', serif;
    line-height: 1.4;
    overflow: hidden;
    height: 100vh;
}

.terminal {
    position: relative;
    padding: 20px;
    height: 100vh;
    background: #23252e;
    border: 1px solid #8aff80;
    box-shadow: 0 0 20px rgba(138, 255, 128, 0.1);
    overflow-y: auto;
}

.scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(138, 255, 128, 0.3);
    animation: scan 8s linear infinite;
    pointer-events: none;
}

.output {
    position: relative;
    z-index: 2;
}

.glitch-text {
    font-size: 2.5em;
    color: #8aff80;
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch-text::before {
    left: 2px;
    text-shadow: -2px 0 #ff0080;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch-text::after {
    left: -2px;
    text-shadow: -2px 0 #00ffff;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

.prompt {
    margin: 15px 0;
    color: #8aff80;
}

.user {
    color: #ff0080;
}

.path {
    color: #00ffff;
}

.content {
    margin: 20px 0;
}

.typewriter {
    overflow: hidden;
    border-right: 2px solid #8aff80;
    white-space: nowrap;
    margin: 0 auto;
    animation: typing 3.5s steps(40, end);
    margin-bottom: 8px;
}

.delay-1 { animation: typing 3.5s steps(40, end) 1s both; }
.delay-2 { animation: typing 3.5s steps(40, end) 2s both; }
.delay-3 { animation: typing 3.5s steps(40, end) 3s both; }
.delay-4 { animation: typing 3.5s steps(40, end) 4s both; }
.delay-5 { animation: typing 3.5s steps(40, end) 5s both; }
.delay-6 { animation: typing 3.5s steps(40, end) 6s both; }
.delay-7 { animation: typing 3.5s steps(40, end) 7s both; }
.delay-8 { animation: typing 3.5s steps(40, end) 8s both; }
.delay-9 { animation: typing 3.5s steps(40, end) 9s both; }
.delay-10 { animation: typing 3.5s steps(40, end) 10s both; }
.delay-11 { animation: typing 3.5s steps(40, end) 11s both; }
.delay-12 { animation: typing 3.5s steps(40, end) 12s both; }
.delay-13 { animation: typing 3.5s steps(40, end) 13s both; }
.delay-14 { animation: typing 3.5s steps(40, end) 14s both; }
.delay-15 { animation: typing 3.5s steps(40, end) 15s both; }
.delay-16 { animation: typing 3.5s steps(40, end) 16s both; }
.delay-17 { animation: typing 3.5s steps(40, end) 17s both; }
.delay-18 { animation: typing 3.5s steps(40, end) 18s both; }
.delay-19 { animation: typing 3.5s steps(40, end) 19s both; }
.delay-20 { animation: typing 3.5s steps(40, end) 20s both; }
.delay-21 { animation: typing 3.5s steps(40, end) 21s both; }
.delay-22 { animation: typing 3.5s steps(40, end) 22s both; }
.delay-23 { animation: typing 3.5s steps(40, end) 23s both; }
.delay-24 { animation: typing 3.5s steps(40, end) 24s both; }
.delay-25 { animation: typing 3.5s steps(40, end) 25s both; }
.delay-26 { animation: typing 3.5s steps(40, end) 26s both; }
.delay-27 { animation: typing 3.5s steps(40, end) 27s both; }
.delay-28 { animation: typing 3.5s steps(40, end) 28s both; }
.delay-29 { animation: typing 3.5s steps(40, end) 29s both; }
.delay-30 { animation: typing 3.5s steps(40, end) 30s both; }
.delay-31 { animation: typing 3.5s steps(40, end) 31s both; }
.delay-32 { animation: typing 3.5s steps(40, end) 32s both; }
.delay-33 { animation: typing 3.5s steps(40, end) 33s both; }
.delay-34 { animation: typing 3.5s steps(40, end) 34s both; }
.delay-35 { animation: typing 3.5s steps(40, end) 35s both; }
.delay-36 { animation: typing 3.5s steps(40, end) 36s both; }
.delay-37 { animation: typing 3.5s steps(40, end) 37s both; }
.delay-38 { animation: typing 3.5s steps(40, end) 38s both; }
.delay-39 { animation: typing 3.5s steps(40, end) 39s both; }
.delay-40 { animation: typing 3.5s steps(40, end) 40s both; }
.delay-41 { animation: typing 3.5s steps(40, end) 41s both; }
.delay-42 { animation: typing 3.5s steps(40, end) 42s both; }
.delay-43 { animation: typing 3.5s steps(40, end) 43s both; }
.delay-44 { animation: typing 3.5s steps(40, end) 44s both; }
.delay-45 { animation: typing 3.5s steps(40, end) 45s both; }
.delay-46 { animation: typing 3.5s steps(40, end) 46s both; }
.delay-47 { animation: typing 3.5s steps(40, end) 47s both; }
.delay-48 { animation: typing 3.5s steps(40, end) 48s both; }
.delay-49 { animation: typing 3.5s steps(40, end) 49s both; }
.delay-50 { animation: typing 3.5s steps(40, end) 50s both; }
.delay-51 { animation: typing 3.5s steps(40, end) 51s both; }
.delay-52 { animation: typing 3.5s steps(40, end) 52s both; }
.delay-53 { animation: typing 3.5s steps(40, end) 53s both; }
.delay-54 { animation: typing 3.5s steps(40, end) 54s both; }
.delay-55 { animation: typing 3.5s steps(40, end) 55s both; }
.delay-56 { animation: typing 3.5s steps(40, end) 56s both; }
.delay-57 { animation: typing 3.5s steps(40, end) 57s both; }
.delay-58 { animation: typing 3.5s steps(40, end) 58s both; }
.delay-59 { animation: typing 3.5s steps(40, end) 59s both; }
.delay-60 { animation: typing 3.5s steps(40, end) 60s both; }
.delay-61 { animation: typing 3.5s steps(40, end) 61s both; }
.delay-62 { animation: typing 3.5s steps(40, end) 62s both; }
.delay-63 { animation: typing 3.5s steps(40, end) 63s both; }
.delay-64 { animation: typing 3.5s steps(40, end) 64s both; }
.delay-65 { animation: typing 3.5s steps(40, end) 65s both; }
.delay-66 { animation: typing 3.5s steps(40, end) 66s both; }
.delay-67 { animation: typing 3.5s steps(40, end) 67s both; }
.delay-68 { animation: typing 3.5s steps(40, end) 68s both; }
.delay-69 { animation: typing 3.5s steps(40, end) 69s both; }
.delay-70 { animation: typing 3.5s steps(40, end) 70s both; }
.delay-71 { animation: typing 3.5s steps(40, end) 71s both; }
.delay-72 { animation: typing 3.5s steps(40, end) 72s both; }
.delay-73 { animation: typing 3.5s steps(40, end) 73s both; }
.delay-74 { animation: typing 3.5s steps(40, end) 74s both; }
.delay-75 { animation: typing 3.5s steps(40, end) 75s both; }
.delay-76 { animation: typing 3.5s steps(40, end) 76s both; }
.delay-77 { animation: typing 3.5s steps(40, end) 77s both; }
.delay-78 { animation: typing 3.5s steps(40, end) 78s both; }
.delay-79 { animation: typing 3.5s steps(40, end) 79s both; }
.delay-80 { animation: typing 3.5s steps(40, end) 80s both; }
.delay-81 { animation: typing 3.5s steps(40, end) 81s both; }
.delay-82 { animation: typing 3.5s steps(40, end) 82s both; }
.delay-83 { animation: typing 3.5s steps(40, end) 83s both; }
.delay-84 { animation: typing 3.5s steps(40, end) 84s both; }

.active {
    color: #ff0080;
}

.links {
    margin: 20px 0;
}

.link-item {
    margin: 10px 0;
    padding: 5px;
    word-break: break-all;
    border-left: 1px solid #8aff80;
    padding-left: 10px;
    transition: all 0.3s ease;
}

.link-item:hover {
    background: rgba(138, 255, 128, 0.1);
    transform: translateX(5px);
}

.cursor {
    color: #ff0080;
    margin-right: 5px;
}

.blinking {
    animation: blink 1s infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink {
    0%, 50% { opacity: 1 }
    51%, 100% { opacity: 0 }
}

@keyframes scan {
    0% { top: 0% }
    100% { top: 100% }
}

@keyframes glitch-anim {
    0% { clip: rect(42px, 9999px, 44px, 0) }
    5% { clip: rect(12px, 9999px, 59px, 0) }
    10% { clip: rect(48px, 9999px, 29px, 0) }
    15% { clip: rect(42px, 9999px, 73px, 0) }
    20% { clip: rect(63px, 9999px, 27px, 0) }
    25% { clip: rect(34px, 9999px, 55px, 0) }
    30% { clip: rect(86px, 9999px, 73px, 0) }
    35% { clip: rect(20px, 9999px, 20px, 0) }
    40% { clip: rect(26px, 9999px, 60px, 0) }
    45% { clip: rect(25px, 9999px, 66px, 0) }
    50% { clip: rect(57px, 9999px, 98px, 0) }
    55% { clip: rect(5px, 9999px, 46px, 0) }
    60% { clip: rect(82px, 9999px, 31px, 0) }
    65% { clip: rect(54px, 9999px, 27px, 0) }
    70% { clip: rect(28px, 9999px, 99px, 0) }
    75% { clip: rect(45px, 9999px, 69px, 0) }
    80% { clip: rect(23px, 9999px, 85px, 0) }
    85% { clip: rect(54px, 9999px, 84px, 0) }
    90% { clip: rect(45px, 9999px, 47px, 0) }
    95% { clip: rect(37px, 9999px, 20px, 0) }
    100% { clip: rect(4px, 9999px, 91px, 0) }
}

@keyframes glitch-anim2 {
    0% { clip: rect(65px, 9999px, 100px, 0) }
    5% { clip: rect(52px, 9999px, 74px, 0) }
    10% { clip: rect(79px, 9999px, 85px, 0) }
    15% { clip: rect(75px, 9999px, 5px, 0) }
    20% { clip: rect(67px, 9999px, 61px, 0) }
    25% { clip: rect(14px, 9999px, 79px, 0) }
    30% { clip: rect(1px, 9999px, 66px, 0) }
    35% { clip: rect(86px, 9999px, 30px, 0) }
    40% { clip: rect(23px, 9999px, 98px, 0) }
    45% { clip: rect(85px, 9999px, 72px, 0) }
    50% { clip: rect(71px, 9999px, 75px, 0) }
    55% { clip: rect(2px, 9999px, 48px, 0) }
    60% { clip: rect(30px, 9999px, 16px, 0) }
    65% { clip: rect(59px, 9999px, 50px, 0) }
    70% { clip: rect(41px, 9999px, 62px, 0) }
    75% { clip: rect(2px, 9999px, 82px, 0) }
    80% { clip: rect(47px, 9999px, 73px, 0) }
    85% { clip: rect(3px, 9999px, 27px, 0) }
    90% { clip: rect(26px, 9999px, 55px, 0) }
    95% { clip: rect(42px, 9999px, 97px, 0) }
    100% { clip: rect(38px, 9999px, 49px, 0) }
}

.terminal::-webkit-scrollbar {
    width: 8px;
}

.terminal::-webkit-scrollbar-track {
    background: #181a20;
}

.terminal::-webkit-scrollbar-thumb {
    background: #8aff80;
    border-radius: 4px;
}

.terminal::-webkit-scrollbar-thumb:hover {
    background: #6aff60;
}