/*
==========================================================================
© 2026 Toner fra hjertet – Kodens rejse
Ophavsret til egen CSS-kode, design og struktur.
Må ikke kopieres, genbruges eller distribueres uden tilladelse.
==========================================================================
*/

/* =====================================================
   ENIAC ARTIKEL SIDE
   TONER FRA HJERTET
   ===================================================== */


/* =====================================================
   ANIMATIONER
   ===================================================== */

@keyframes neonGlowBorder {

    0% {
        border-color: #ff4141;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.8),
            inset 0 0 15px rgba(255, 65, 65, 0.2),
            0 0 20px rgba(255, 65, 65, 0.4);
    }

    50% {
        border-color: #15ce2c;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.8),
            inset 0 0 15px rgba(21, 206, 44, 0.2),
            0 0 25px rgba(21, 206, 44, 0.5);
    }

    100% {
        border-color: #ff4141;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.8),
            inset 0 0 15px rgba(255, 65, 65, 0.2),
            0 0 20px rgba(255, 65, 65, 0.4);
    }
}


@keyframes cyberBoxPulse {

    0% {
        box-shadow:
            0 0 25px rgba(48, 36, 219, 0.4),
            inset 0 0 15px rgba(0, 170, 255, 0.1);
    }

    100% {
        box-shadow:
            0 0 45px rgba(0, 240, 255, 0.7),
            inset 0 0 25px rgba(48, 36, 219, 0.3);
    }
}


/* =====================================================
   GLOBAL BAGGRUND
   ===================================================== */

html,
body {

    margin: 0 !important;
    padding: 0 !important;

    width: 100%;
    min-height: 100%;

    background:

        radial-gradient(circle at 15% 15%,
            rgba(0, 170, 255, 0.25),
            transparent 35%),

        radial-gradient(circle at 85% 25%,
            rgba(207, 69, 69, 0.18),
            transparent 40%),

        radial-gradient(circle at 50% 85%,
            rgba(21, 206, 44, 0.12),
            transparent 40%),

        linear-gradient(145deg,
            #01040a,
            #030814,
            #061226,
            #02050d) !important;

    background-attachment: fixed !important;

    color: #e2f5ff;
}

/* =====================================================
   HELE ARTIKELBOKSEN
   ===================================================== */

.artikel-boks {

    width: 90%;
    max-width: 1100px;

    margin: 40px auto;

    padding: 20px;

    box-sizing: border-box;

    text-align: center;

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* =====================================================
   SELVE ARTIKLEN
   ===================================================== */

.artikel-boks article {

    width: 100%;

    margin: 0 auto;

    padding: 0;

    box-sizing: border-box;
}


/* =====================================================
   H1 + H2 + H3
   SAMME DESIGN
   ===================================================== */

.artikel-boks h1,
.artikel-boks h2,
.artikel-boks h3 {

    position: relative;

    display: block;

    width: 100%;
    max-width: 850px;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 25px 30px 40px;

    box-sizing: border-box;

    text-align: center;

    text-transform: uppercase;

    font-size: 2rem;

    font-weight: 800;

    letter-spacing: 4px;

    line-height: 1.25;

    color: #45cfc6 !important;

    background:
        linear-gradient(145deg,
            #040d1a,
            #07172e) !important;

    border: 3px solid #00f0ff;

    border-radius: 40px !important;

    text-shadow:
        0 0 8px #00aaff,
        0 0 20px rgba(0, 170, 255, 0.6),
        0 0 30px #3024db;

    box-shadow:
        0 0 25px rgba(48, 36, 219, 0.4),
        inset 0 0 15px rgba(0, 170, 255, 0.1);

    animation:
        cyberBoxPulse 4s infinite alternate ease-in-out;
}


/* =====================================================
   AFSTAND MELLEM OVERSKRIFTER
   ===================================================== */

.artikel-boks h1,
.artikel-boks h2,
.artikel-boks h3 {

    margin-top: 80px !important;

    margin-bottom: 45px !important;
}


/* =====================================================
   LASERSTREG UNDER H1 + H2 + H3
   ===================================================== */

.artikel-boks h1::after,
.artikel-boks h2::after,
.artikel-boks h3::after {

    content: "";

    position: absolute;

    bottom: 18px;

    left: 15%;

    width: 70%;

    height: 4px;

    background:
        linear-gradient(90deg,
            transparent,
            #ff4141,
            #00f0ff,
            #15ce2c,
            transparent);

    box-shadow:
        0 0 15px #ff4141,
        0 0 30px #00f0ff;

    border-radius: 10px;
}


/* =====================================================
   ALLE TEKSTAFSNIT
   ===================================================== */

.artikel-boks p {

    display: block !important;

    width: 100%;
    max-width: 850px;

    margin: 0 auto 40px auto !important;

    padding: 35px;

    box-sizing: border-box;

    background:
        linear-gradient(145deg,
            #020612,
            #051024) !important;

    border: 3px solid #ff4141;

    border-radius: 12px;

    color: #e2f5ff !important;

    font-size: 1.15rem;

    line-height: 1.95;

    text-align: center !important;

    animation:
        neonGlowBorder 7s infinite ease-in-out;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


/* =====================================================
   HOVER PÅ TEKSTBOKSE
   ===================================================== */

.artikel-boks p:hover {

    transform: translateY(-5px);

    color: #ffffff !important;

    border-color: #00f0ff !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.9),
        inset 0 0 20px rgba(0, 240, 255, 0.2),
        0 0 35px rgba(0, 240, 255, 0.5) !important;
}


/* =====================================================
   FØRSTE BOGSTAV
   ===================================================== */

.artikel-boks p::first-letter {

    color: #00f0ff;

    font-weight: 900;

    font-size: 1.4rem;

    text-shadow:
        0 0 8px #00f0ff;
}


/* =====================================================
   FOTO-TEKST
   ===================================================== */

.artikel-boks .foto-kilde {

    display: block;

    width: fit-content;

    max-width: 90%;

    margin: 15px auto 45px;

    padding: 10px 20px;

    color: #a9dff0;

    font-size: 1rem;

    font-style: italic;

    font-weight: bold;

    text-align: center;

    text-decoration: none;

    background: linear-gradient(145deg,
            #06142a,
            #02060f);

    border: 2px solid #00f0ff;

    border-radius: 12px;

    text-shadow:
        0 0 6px #00aaff;

    box-shadow:
        0 0 12px rgba(0, 240, 255, .4);

}

/* =====================================================
   ENIAC LISTE
   ===================================================== */

.eniac-liste {

    width: 100%;
    max-width: 850px;

    margin: 50px auto 65px auto !important;

    padding: 35px 40px 35px 50px;

    box-sizing: border-box;

    background:
        linear-gradient(145deg,
            #020612,
            #040f21) !important;

    border: 3px solid #15ce2c;

    border-radius: 12px;

    color: #e2f5ff;

    list-style-position: inside;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.9),
        inset 0 0 15px rgba(21, 206, 44, 0.1),
        0 0 30px rgba(21, 206, 44, 0.4) !important;
}


.eniac-liste li::marker {

    content: "⚡ ";

    font-size: 1.2rem;
}


.eniac-liste li {

    font-size: 1.15rem;

    line-height: 2;

    margin-bottom: 15px;

    color: #e2f5ff;

    text-align: left;

    border-bottom:
        1px dashed rgba(21, 206, 44, 0.15);

    padding-bottom: 12px;
}


.eniac-liste li:last-child {

    border-bottom: none;

    margin-bottom: 0;

    padding-bottom: 0;
}


/* =====================================================
   BILLEDE
   ===================================================== */

.eniac-billede {

    display: block;

    width: 100%;
    max-width: 650px;

    height: auto;

    margin: 60px auto !important;

    border: 3px solid #00f0ff;

    border-radius: 12px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.9),
        0 0 30px rgba(0, 240, 255, 0.4) !important;
}


/* =====================================================
   KNAPPER
   ===================================================== */

.knapper {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-sizing: border-box;

    padding: 40px 25px 60px;
}


.knapper .knap,
.knapper .knap2 {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 24px;

    margin: 0;

    box-sizing: border-box;

    text-decoration: none;
}

.kommer-snart {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    text-align: center;
    border: 3px solid #2f00ff;
    padding: 35px 45px;
    border-radius: 12px;
    width: fit-content;
    max-width: 600px;
    margin: 40px auto;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.9),
        0 0 30px rgba(0, 240, 255, 0.4) !important;
    color: #00f7ff;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: underline;

    text-shadow: 0 0 8px #00f7ff;
    animation: roligFade 5s ease-in-out infinite;
}

@keyframes roligFade {

    0% {
        opacity: 0.4;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0.4;
        transform: scale(0.95);
    }

}

.knapper .knap,
.knapper .knap2 {

    min-width: 180px;

    background: linear-gradient(145deg,
            #04111f,
            #071a33);

    border: 3px solid #00f0ff;

    border-radius: 14px;

    color: #e2f5ff;

    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 1px;

    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .8),
        0 0 18px rgba(0, 240, 255, .35);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        color .3s ease;
}

.knapper .knap:hover,
.knapper .knap2:hover {

    transform: translateY(-4px);

    border-color: #15ce2c;

    color: #15ce2c;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .9),
        0 0 30px rgba(21, 206, 44, .6);
}

.knapper .knap:active,
.knapper .knap2:active {

    transform: scale(.98);
}

/* =====================================================
   FOOTER
   ENIAC / CYBERPUNK NEON DESIGN
   ===================================================== */

.site-footer {

    position: relative;

    width: 100%;

    margin-top: 70px;

    padding: 35px 20px 30px;

    box-sizing: border-box;

    text-align: center;

    background:
        linear-gradient(145deg,
            #01050c,
            #031020,
            #020812);

    border-top: 3px solid #00f0ff;

    box-shadow:
        0 -5px 20px rgba(0, 240, 255, 0.25),
        0 -10px 40px rgba(48, 36, 219, 0.15),

        inset 0 10px 25px rgba(0, 170, 255, 0.05);

    overflow: hidden;
}


/* =====================================================
   NEON-LYS OVER FOOTER
   ===================================================== */

.site-footer::before {

    content: "";

    position: absolute;

    top: 0;
    left: 10%;

    width: 80%;
    height: 2px;

    background:
        linear-gradient(90deg,
            transparent,
            #ff4141,
            #00f0ff,
            #15ce2c,
            #00f0ff,
            #ff4141,
            transparent);

    box-shadow:
        0 0 8px #00f0ff,
        0 0 18px rgba(0, 240, 255, 0.7);

}


/* =====================================================
   SYSTEM ONLINE
   ===================================================== */

.footer-terminal {

    display: flex;

    justify-content: center;
    align-items: center;

    margin-bottom: 15px;
}


.footer-status {

    display: inline-block;

    padding: 7px 18px;

    color: #15ce2c;

    font-size: 0.75rem;

    font-weight: bold;

    letter-spacing: 3px;

    text-transform: uppercase;

    background:
        rgba(21, 206, 44, 0.05);

    border:
        1px solid #15ce2c;

    border-radius: 6px;

    text-shadow:
        0 0 8px #15ce2c;

    box-shadow:
        0 0 10px rgba(21, 206, 44, 0.25);

}


/* =====================================================
   DEKORATIV FOOTER-LINJE
   ===================================================== */

.footer-line {

    width: 55%;

    max-width: 500px;

    height: 2px;

    margin: 0 auto 20px;

    background:
        linear-gradient(90deg,
            transparent,
            #00f0ff,
            #3024db,
            #00f0ff,
            transparent);

    box-shadow:
        0 0 8px #00f0ff;

}


/* =====================================================
   COPYRIGHT
   ===================================================== */

.site-footer p {

    margin: 0 auto;

    max-width: 700px;

    color: #e2f5ff;

    font-size: 0.9rem;

    line-height: 1.8;

    letter-spacing: 1px;

    text-align: center;

    text-shadow:
        0 0 6px rgba(0, 240, 255, 0.5);

}


/* =====================================================
   SIGNATUR
   ===================================================== */

.footer-signature {

    margin-top: 18px;

    color: #00f0ff;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.75rem;

    letter-spacing: 3px;

    text-shadow:
        0 0 8px #00f0ff;

    opacity: 0.8;
}


/* =====================================================
   HOVER / LILLE NEON-EFFEKT
   ===================================================== */

.site-footer:hover {

    border-top-color: #15ce2c;

    box-shadow:
        0 -5px 25px rgba(0, 240, 255, 0.35),
        0 -10px 45px rgba(21, 206, 44, 0.15),
        inset 0 10px 30px rgba(0, 240, 255, 0.06);

}


.site-footer:hover .footer-status {

    color: #00f0ff;

    border-color: #00f0ff;

    text-shadow:
        0 0 8px #00f0ff;

    box-shadow:
        0 0 15px rgba(0, 240, 255, 0.35);
}


/* =====================================================
   MOBIL
   ===================================================== */

@media (max-width: 768px) {

    .site-footer {

        margin-top: 50px;

        padding:
            30px 15px 25px;
    }

    .footer-line {

        width: 75%;
    }

    .footer-status {

        font-size: 0.65rem;

        letter-spacing: 2px;

        padding:
            6px 14px;
    }

    .site-footer p {

        font-size: 0.8rem;

        line-height: 1.7;
    }

    .footer-signature {

        font-size: 0.65rem;

        letter-spacing: 2px;
    }
}

/* =====================================================
   MOBIL
   ===================================================== */

@media (max-width: 768px) {

    .artikel-boks {

        width: 100%;

        padding: 10px;
    }


    .artikel-boks h1,
    .artikel-boks h2,
    .artikel-boks h3 {

        width: 100%;

        padding: 20px 15px 35px;

        font-size: 1.5rem;

        letter-spacing: 2px;

        margin-top: 60px !important;

        margin-bottom: 35px !important;
    }


    .artikel-boks h1::after,
    .artikel-boks h2::after,
    .artikel-boks h3::after {

        bottom: 14px;

        left: 10%;

        width: 80%;

        height: 3px;
    }


    .artikel-boks p {

        font-size: 1.05rem;

        padding: 25px;

        line-height: 1.8;
    }


    .artikel-boks .foto-kilde {

        font-size: 0.8rem;

        margin-bottom: 25px;
    }


    .eniac-liste {

        padding: 25px 20px;
    }


    .eniac-liste li {

        font-size: 1.05rem;
    }


    .knapper {

        padding: 30px 12px 50px;
    }


    .knapper .knap,
    .knapper .knap2 {

        padding: 10px 16px;

        font-size: 0.95rem;
    }
}