/***********************************************************************
 * Efeito CRT em 3 camadas: fundo + texto + borda
 **********************************************************************/

/* Fundo simulando tela CRT */
body {
    margin: 0;
    background-color: #002200;       /* verde escuro */
    color: #39FF14;                  /* texto verde de CRT */
    font-family: monospace;
    font-size: 13.5pt;
    overflow-x: hidden;
}

/* Container central do conteúdo */
#content {
    max-width: 800px;                /* largura visível da tela CRT */
    margin: 40px auto;               /* distancia das bordas do CRT */
    padding: 20px;
    background: rgba(0, 34, 0, 0.7); /* opcional, dá um leve filtro */
    z-index: 1;
    position: relative;
    box-sizing: border-box;
}

/* Imagem da borda CRT por cima */
#crt-frame {
    pointer-events: none;            /* não atrapalha clique */
    position: fixed;                 /* fixa na tela */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;                     /* ocupa a tela toda */
    height: 100%;
    z-index: 10;                     /* fica na frente do conteúdo */
    user-select: none;
}

/***********************************************************************
 * Outros efeitos
 **********************************************************************/

header {
    text-shadow: 0 0 5px #39FF14, 0 0 10px #00FF00, 0 0 20px #00FF00;
}

hr.tech {
    border: none;
    height: 7px;
    box-shadow: 0 0 8px #00FF00;
    background: repeating-linear-gradient(
        to right, #00ff00, #00ff00 2px, #001100 2px, #001100 4px
    );
}

/***********************************************************************
 * LINKS
 **********************************************************************/

a {
    color: lime;
}

a:hover {
    color: #FFB000;
    text-shadow: 0 0 5px #FFB000, 0 0 10px #FF9900, 0 0 20px #FF8000;
    text-decoration: none;
}

a img {
    transition: all 0.3s ease;
}

a:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px #FFB000);
}

/***********************************************************************
 * Piscadelas de Terminal
 **********************************************************************/

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

.cursor {
    font-weight: bold;
    animation: blink 1s step-start infinite;
}

@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
    }
    20%, 24%, 55% {
        opacity: 0;
    }
}

.glitch {
    color: #0f0;
    animation: flicker 2s infinite;
}

/***********************************************************************
 * RESPONSIVIDADE
 **********************************************************************/

.mobile {
    display: none;
}

@media (max-width: 850px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }
}