@media (max-width: 768px) {
  #terminal {
    font-size: 14px;
    padding: 40px 10px 10px 10px;
    line-height: 1.3;
  }

  .line {
    font-size: 14px;
  }

  .ascii-logo {
    font-size: 11px;
    letter-spacing: -1px;
  }

  .portfolio-line {
    font-size: 14px;
    font-weight: bold;
  }

  .contact-line {
    font-size: 13px;
    color: #ff69b4; /* rosa cheguei pro mobile */
  }

  .cursor-block {
    width: 7px;
    height: 14px;
  }

  .image-line img {
    max-width: 100%;
    height: auto;
  }
}


@font-face {
            font-family: 'GlassTTYVT220';
            src: local("Glass TTY VT220"), local("Glass TTY VT220 Medium"), url('/fonts/Glass_TTY_VT220.ttf') format("truetype");
        }

        html,
        body {
            margin: 0;
            padding: 0;
            background-color: #0a0600;
            color: #00FF00;
            font-family: 'GlassTTYVT220', monospace;
            font-size: 24px;
            overflow: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('/img/bg-retro.jpg');
            background-size: cover;
            opacity: 0.2;
            pointer-events: none;
            z-index: 1;
            animation: noiseFlicker 3s infinite alternate ease-in-out;
        }

        #terminal {
            padding: 20px;
            height: 90vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            white-space: pre;
            overflow: auto;
            position: relative;
            z-index: 2;
        }

        pre,
        div,
        input {
            font-size: 20px;
            font-family: 'GlassTTYVT220', monospace;
        }

        input[type=text],
        input[type=submit]:active,
        div.find a {
            background-color: #00FF00;
            color: #0a0600;
        }

        html,
        input[type=submit],
        div.find a:active {
            color: #00FF00;
            background-color: #0a0600;
        }

        a {
            color: #39FF14;
        }

        a:hover {
            color: #66FF66;
        }

        .line {
            animation: flicker 2s infinite ease-in-out, fadeIn 0.3s ease-in-out;
            text-shadow: 0 0 2px #00FF00, 0 0 4px #00FF00, 0 0 6px #00FF00;
        }

        .glitch {
            animation: glitch 0.2s steps(2, end) infinite;
            opacity: 0.6;
        }

        .image-line {
            display: block;
            margin: 10px 0;
        }

        .image-line img {
            max-height: 120px;
            filter: brightness(1.2) drop-shadow(0 0 4px #00FF00);
        }

        .portfolio-line {
            color: #e5b800;
            text-shadow: 0 0 2px #e5b800, 0 0 6px #e5b800;
        }

        .contact-line {
            color: #FF4DFF;
            text-shadow: 0 0 2px #FF4DFF, 0 0 6px #FF4DFF;
        }

        .ascii-logo {
            color: #00FF00;
            text-shadow: 0 0 4px #00E100, 0 0 10px #00E100;
        }

        .cursor-block {
            display: inline-block;
            width: 10px;
            animation: blink 0.8s steps(2, start) infinite;
        }

        @keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }


        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(5px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes flicker {

            0%,
            100% {
                opacity: 0.96;
                text-shadow: 0 0 2px #00FF00, 0 0 5px #00FF00;
            }

            25% {
                opacity: 0.85;
                text-shadow: 0 0 1px #00FF00;
            }

            50% {
                opacity: 0.97;
                text-shadow: 0 0 3px #00FF00, 0 0 7px #00FF00;
            }

            75% {
                opacity: 0.90;
                text-shadow: 0 0 1px #00FF00;
            }
        }

        @keyframes glitch {
            0% {
                transform: translateX(0);
            }

            50% {
                transform: translateX(2px);
            }

            100% {
                transform: translateX(-2px);
            }
        }

        @keyframes noiseFlicker {
            0% {
                opacity: 0.03;
            }

            100% {
                opacity: 0.08;
            }
        }