/* =====================================================
COMPUTERENS HISTORIE
CYBER HISTORICAL STYLE
CENTRERET TEKST - PC - TABLET - MOBIL
===================================================== */


/* =====================================================
1. ANIMATIONER
===================================================== */

@keyframes historyGlow {

    0% {

        border-color: #ff4141;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, .8),
            inset 0 0 15px rgba(255, 65, 65, .1),
            0 0 20px rgba(255, 65, 65, .3);

    }

    50% {

        border-color: #00f0ff;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, .8),
            inset 0 0 20px rgba(0, 240, 255, .15),
            0 0 30px rgba(0, 240, 255, .5);

    }

    100% {

        border-color: #15ce2c;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, .8),
            inset 0 0 15px rgba(21, 206, 44, .1),
            0 0 20px rgba(21, 206, 44, .3);

    }

}


@keyframes skuretsLys {

    0% {

        box-shadow:
            0 0 25px rgba(48, 36, 219, .4),
            inset 0 0 15px rgba(0, 170, 255, .1);

        filter: brightness(1);

    }

    50% {

        box-shadow:
            0 0 45px rgba(0, 240, 255, .7),
            inset 0 0 25px rgba(48, 36, 219, .3);

        filter: brightness(1.15);

    }

    100% {

        box-shadow:
            0 0 25px rgba(48, 36, 219, .4),
            inset 0 0 15px rgba(0, 170, 255, .1);

        filter: brightness(1);

    }

}


/* =====================================================
2. HELE SIDEN
===================================================== */

html,
body {

    margin: 0 !important;

    padding: 0 !important;

    width: 100% !important;

    min-height: 100% !important;

    overflow-x: hidden;

    background:

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

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

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

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

    background-attachment: fixed !important;

    color: #ffffff;

}


/* =====================================================
HOVEDOMRÅDE - COMPUTERENS HISTORIE
===================================================== */

.computer-artikel-boks {

    display: block !important;

    width: 100% !important;

    min-height: auto !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: visible !important;

    box-sizing: border-box !important;

}


/* =====================================================
3. HOVED ARTIKELBOKS
===================================================== */

.artikel-boks {

    width: 100% !important;

    max-width: 1100px !important;

    margin: 40px auto !important;

    padding: 35px 20px 70px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: flex-start !important;

    /*
MERE LUFT MELLEM ALLE ELEMENTER
*/

    gap: 25px;

    box-sizing: border-box;

}


/* =====================================================
4. ALLE DIREKTE ELEMENTER CENTRERES
===================================================== */

.artikel-boks>* {

    margin-left: auto !important;

    margin-right: auto !important;

}


/* =====================================================
5. HOVEDTITEL
===================================================== */

.historie-titel {

    position: relative;

    display: block !important;

    width: 95% !important;

    max-width: 700px !important;

    /*
MERE LUFT OMKRING HOVEDTITEL
*/

    margin: 50px auto 60px !important;

    padding: 35px 25px 55px !important;

    box-sizing: border-box;

    text-align: center !important;

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

    font-size:
        clamp(1.8rem, 5vw, 2.8rem);

    font-weight: 900 !important;

    line-height: 1.3;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #00f0ff !important;

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

    border: 4px solid #3024db !important;

    border-radius: 20px;

    text-shadow:

        0 0 8px #00f0ff,

        0 0 20px rgba(0, 170, 255, .6),

        0 0 30px #3024db;

    animation:
        skuretsLys 5s infinite ease-in-out;

}


/* =====================================================
6. LASERLINJE UNDER HOVEDTITEL
===================================================== */

.historie-titel::after {

    content: "";

    position: absolute;

    bottom: 16px;

    left: 15%;

    width: 70%;

    height: 4px;

    background:

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

    box-shadow:

        0 0 15px #ff4141,

        0 0 30px #00f0ff !important;

    border-radius: 10px;

}


/* =====================================================
7. BRØDTEKST
===================================================== */

.artikel-boks p {

    display: block !important;

    width: 100% !important;

    max-width: 700px !important;

    /*
MERE LUFT MELLEM TEKSTBOKSENE
*/

    margin: 0 auto 40px auto !important;

    padding: 35px !important;

    box-sizing: border-box;

    text-align: center !important;

    color: #e2f5ff !important;

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

    font-size: 1.15rem;

    font-weight: 600 !important;

    line-height: 1.95;

    letter-spacing: .3px;

    background:

        linear-gradient(145deg,
            rgba(4, 13, 26, .95),
            rgba(7, 23, 46, .98)) !important;

    border: 3px solid #00f0ff;

    border-radius: 16px;

    box-shadow:

        0 15px 40px rgba(0, 0, 0, .8),

        inset 0 0 15px rgba(0, 240, 255, .1),

        0 0 20px rgba(0, 240, 255, .3);

    animation:
        historyGlow 9s infinite ease-in-out;

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

}


/* =====================================================
8. EKSTRA CENTRERING
===================================================== */

.artikel-boks p,
.artikel-boks p span,
.artikel-boks p strong,
.artikel-boks p em {

    text-align: center !important;

}


/* =====================================================
9. 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, .9),

        inset 0 0 20px rgba(0, 240, 255, .2),

        0 0 35px rgba(0, 240, 255, .5) !important;

}


/* =====================================================
10. FØRSTE BOGSTAV
===================================================== */

.artikel-boks p::first-letter {

    color: #00f0ff !important;

    font-weight: 900;

    font-size: 1.5rem;

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

}


/* =====================================================
11. H2 OVERSKRIFTER
===================================================== */

.historie-overskrift {

    display: block !important;

    width: 100% !important;

    max-width: 800px !important;

    /*
MERE LUFT OVER OG UNDER H2
*/

    margin: 45px auto 25px !important;

    padding: 20px 30px;

    box-sizing: border-box;

    text-align: center !important;

    color: #15ce2c !important;

    text-decoration: underline;

    border: 4px solid #3024db !important;

    border-radius: 40px !important;

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

    font-size:
        clamp(1.5rem, 4vw, 2.3rem);

    font-weight: 900 !important;

    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: 4px;

    text-shadow:

        0 0 10px #15ce2c,

        0 0 25px rgba(21, 206, 44, .6),

        0 0 40px rgba(0, 240, 255, .3);

}


/* =====================================================
12. BILLEDE
===================================================== */

.historisk-billede {

    display: flex !important;

    flex-direction: column;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    max-width: 850px !important;

    /*
MERE LUFT OMKRING BILLEDER
*/

    margin: 35px auto 50px !important;

    box-sizing: border-box;

}


.historisk-billede img {

    display: block;

    width: 100%;

    max-width: 850px;

    height: auto;

    margin: 0 auto;

    border: 3px solid #00f0ff;

    border-radius: 12px;

    box-shadow:

        0 20px 50px rgba(0, 0, 0, .9),

        0 0 30px rgba(0, 240, 255, .4) !important;

}


/* =====================================================
13. BILLEDTEKST
===================================================== */

.billede-tekst {

    display: block;

    width: 100%;

    max-width: 850px;

    margin: 18px auto 0 !important;

    text-align: center !important;

    color: #45cfc6;

    font-family: monospace;

    font-size: 1.05rem;

    font-weight: 600;

    line-height: 1.7;

    text-shadow:
        0 0 5px rgba(69, 207, 198, .3);

}

/* =====================================================
CYBER NAVIGATIONSKNAPPER
===================================================== */

.knap-container-layout {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 30px;

    width: 100%;

    margin: 60px auto 40px;

}


/* Begge knapper */

.knap,
.knap2 {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 200px;

    padding: 15px 35px;

    border-radius: 40px;

    border: 3px solid #00f0ff;

    background:

        linear-gradient(145deg,
            #040d1a,
            #07172e);

    color: #00f0ff !important;

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

    font-size: 1.1rem;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;

    text-decoration: none !important;

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


    box-shadow:

        0 15px 40px rgba(0, 0, 0, .8),

        inset 0 0 15px rgba(0, 240, 255, .15),

        0 0 25px rgba(0, 240, 255, .4);


    transition:

        transform .3s ease,

        box-shadow .3s ease,

        border-color .3s ease;

}


/* Hover effekt */

.knap:hover,
.knap2:hover {

    transform: translateY(-6px);

    border-color: #15ce2c;

    color: white !important;


    box-shadow:

        0 20px 50px rgba(0, 0, 0, .9),

        inset 0 0 25px rgba(21, 206, 44, .2),

        0 0 40px rgba(21, 206, 44, .7);

}


/* Mobil */

@media (max-width:768px) {

    .knap-container-layout {

        flex-direction: column;

        gap: 20px;

    }


    .knap,
    .knap2 {

        width: 85%;

    }

}

/* =====================================================
MERE TEKST FØLGER
===================================================== */

.kommer-snart {

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

    margin: 70px auto 30px;

    padding: 18px 25px;

    text-align: center;
    text-decoration: underline;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;

    color: #45cfc6;

    background:
        linear-gradient(145deg,
            rgba(4, 13, 26, .95),
            rgba(7, 23, 46, .98));

    border: 3px solid #3024db;
    border-radius: 18px;

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

    box-shadow:
        0 0 25px rgba(48, 36, 219, .4);

    animation: skuretsLys 5s ease-in-out infinite;

}

/* =====================================================
14. LISTER
===================================================== */

.artikel-boks ul {

    width: 100% !important;

    max-width: 700px !important;

    /*
MERE LUFT OMKRING LISTER
*/

    margin: 35px auto 50px !important;

    padding: 30px 40px;

    box-sizing: border-box;

    text-align: left !important;

    color: #e2f5ff;

    background:

        linear-gradient(145deg,
            #040d1a,
            #07172e);

    border: 3px solid #15ce2c;

    border-radius: 16px;

    box-shadow:

        0 15px 40px rgba(0, 0, 0, .8),

        0 0 25px rgba(21, 206, 44, .3);

}


.artikel-boks li {

    text-align: left !important;

    font-size: 1.05rem;

    font-weight: 600;

    line-height: 1.8;

    margin-bottom: 12px;

}


/* =====================================================
15. LINKS
===================================================== */

.artikel-boks a {

    text-align: center;

}


/* =====================================================
16. KNAPPER
===================================================== */

.artikel-knapper {

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 25px;

    width: 100%;

    /*
MERE LUFT OMKRING KNAPPERNE
*/

    margin: 50px auto;

}


/* =====================================================
FOOTER
===================================================== */

.site-footer {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    min-height: 80px !important;

    margin: 60px 0 0 0 !important;

    padding: 25px 20px !important;

    box-sizing: border-box !important;

    position: relative !important;

    clear: both !important;

    visibility: visible !important;

    opacity: 1 !important;

    overflow: visible !important;

    text-align: center !important;

    background:
        linear-gradient(145deg,
            rgba(4, 13, 26, 0.98),
            rgba(2, 8, 20, 0.98)) !important;

    border-top: 3px solid #00aaff !important;

    box-shadow:
        0 -5px 20px rgba(0, 170, 255, 0.35) !important;

    color: #ffffff !important;

}


.site-footer p {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    text-align: center !important;

    color: #ffffff !important;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    font-family: Arial, sans-serif !important;

    font-size: 14px !important;

    font-weight: normal !important;

    line-height: 1.7 !important;

    visibility: visible !important;

    opacity: 1 !important;

    animation: none !important;

}


/* =====================================================
17. MOBIL
===================================================== */

@media (max-width: 768px) {

    html,
    body {

        background-attachment: scroll !important;

    }


    .artikel-boks {

        width: 100% !important;

        max-width: 100% !important;

        margin: 25px auto !important;

        padding: 15px 10px 50px !important;

        align-items: center !important;

        /*
MINDRE GAP PÅ MOBIL
*/

        gap: 15px;

    }


    .historie-titel {

        width: 95% !important;

        margin: 35px auto 45px !important;

        padding: 22px 15px 42px !important;

        font-size: 1.6rem;

        text-align: center !important;

    }


    .artikel-boks p {

        width: 95% !important;

        max-width: 700px !important;

        margin-left: auto !important;

        margin-right: auto !important;

        /*
MERE LUFT MELLEM TEKSTBOKSE
*/

        margin-bottom: 30px !important;

        padding: 25px 20px !important;

        font-size: 1.05rem;

        font-weight: 600 !important;

        line-height: 1.8;

        text-align: center !important;

    }


    /* H2 */

    .historie-overskrift {

        width: 95% !important;

        margin: 35px auto 20px !important;

        padding: 12px 15px;

        font-size: 1.5rem;

        text-align: center !important;

    }


    .historisk-billede {

        width: 95% !important;

        margin: 25px auto 40px !important;

    }


    .historisk-billede img {

        width: 100%;

    }


    .billede-tekst {

        text-align: center !important;

        font-size: .95rem;

    }


    .artikel-boks ul {

        width: 95% !important;

        margin: 30px auto 40px !important;

        padding: 25px 25px 25px 40px;

    }


    .artikel-knapper {

        flex-direction: column;

        gap: 20px;

        margin: 40px auto;

    }

}


/* =====================================================
18. MEGET LILLE MOBIL
===================================================== */

@media (max-width: 480px) {

    .artikel-boks {

        padding:
            10px 5px 40px !important;

        gap: 10px;

    }


    .historie-titel {

        width: 96% !important;

        margin: 30px auto 40px !important;

        font-size: 1.4rem;

        padding:
            20px 12px 38px !important;

        text-align: center !important;

    }


    .artikel-boks p {

        width: 96% !important;

        margin-bottom: 25px !important;

        padding:
            20px 15px !important;

        font-size: .98rem;

        font-weight: 600 !important;

        line-height: 1.7;

        text-align: center !important;

    }


    .historie-overskrift {

        width: 96% !important;

        margin: 30px auto 18px !important;

        padding: 8px 10px;

        font-size: 1.25rem;

        letter-spacing: 2px;

        text-align: center !important;

    }


    .historisk-billede {

        margin: 20px auto 35px !important;

    }


    .artikel-boks ul {

        width: 96% !important;

        margin: 25px auto 35px !important;

        padding:
            20px 15px 20px 35px;

    }


    .artikel-boks li {

        font-size: .95rem;

    }

}


/* =====================================================
19. EKSTRA SIKKERHEDSREGLER
===================================================== */

.artikel-boks {

    text-align: center !important;

}


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

    text-align: center !important;

}


.artikel-boks>p {

    margin-left: auto !important;

    margin-right: auto !important;

}


/* =====================================================
20. HÅRD RESET MOD ANDRE CSS-FILER
===================================================== */

.artikel-boks p {

    float: none !important;

    position: relative;

    left: auto !important;

    right: auto !important;

    transform-origin: center center;

}


/* =====================================================
21. EKSTRA REGEL TIL H2
===================================================== */

/*
VIGTIGT:
Denne regel ligger nederst og styrer derfor
den endelige afstand omkring H2.
*/

.artikel-boks>.historie-overskrift {

    margin-top: 45px !important;

    margin-bottom: 25px !important;

}

/* =====================================================
BILLEDE OG FOTO-KILDE
===================================================== */

.eniac-figur {

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

    margin: 35px auto 55px;

    padding: 0;

    text-align: center;

}


/* Selve billedet */

.eniac-figur img {

    display: block;

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

    height: auto;

    margin: 0 auto;

    border: 3px solid #00f0ff;

    border-radius: 12px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .9),
        0 0 30px rgba(0, 240, 255, .4);

}


/* Foto-/kildeteksten */

.eniac-figur figcaption {

    display: block;

    margin-top: 25px;

    padding: 10px 15px;
    text-decoration: underline;
    text-align: center;

    color: #45cfc6;

    font-family: monospace;

    font-size: 1.5rem;

    line-height: 1.7;

    text-shadow:
        0 0 5px rgba(69, 207, 198, .3);

}

/* =====================================================
22. FOOTER - EKSTRA SIKKERHED
===================================================== */

body>footer.site-footer {

    display: block !important;

    position: relative !important;

    width: 100% !important;

    min-height: 100px !important;

    margin: 60px 0 0 0 !important;

    padding: 30px !important;

    box-sizing: border-box !important;

    clear: both !important;

    visibility: visible !important;

    opacity: 1 !important;

    background: #020814 !important;

    border-top: 5px solid #00aaff !important;

    color: white !important;

    text-align: center !important;

    z-index: 9999 !important;

}


body>footer.site-footer p {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    color: white !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    text-align: center !important;

    font-size: 16px !important;

}


/* =====================================================
SLUT
===================================================== */