/*
Copyright © 2025 BIT_on_Tech™ • Simplified Tech of Tomorrow • All rights reserved • bitveil.dk
Beskrivelse: Generisk darkmode stylesheet for Bit Veil-sider, mobilvenligt, kommenteret og til nem genbrug.
Forfatter: BIT_on_Tech™
God praksis: Responsivt, overskueligt, let at udvide, alle tema- og basefarver i :root.
*/
:root {
    --bg: #181c1f;
    --fg: #ececec;
    --accent: #8bc34a;
    --accent-dark: #76a838;
    --shadow: 0 6px 24px #000a;
    --card-bg: #23282d;
    --error: #d93654;
    --success: #66cf68;
}
html, body {
    margin: 0; padding: 0; box-sizing: border-box;
    background: var(--bg); color: var(--fg);
    font-family: 'Segoe UI', Arial, sans-serif;
    min-height: 100vh;
}
header {
    text-align: center;
    padding: 2.5em 1em 1.2em 1em;
    background: linear-gradient(180deg, #23282d 60%, transparent 100%);
    box-shadow: var(--shadow);
}
.veil-img {
    width: 130px; height: 130px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    background: #111;
    object-fit: cover;
    margin-bottom: 1.2em;
    box-shadow: 0 4px 22px #0006;
}
h1 {
    font-size: 2.1em;
    font-weight: 700;
    margin: 0 0 0.2em 0;
    letter-spacing: 0.04em;
}
h2 {
    font-size: 1.13em;
    font-weight: 500;
    color: var(--accent);
    margin: 0 0 0.9em 0;
    letter-spacing: 0.08em;
}
.bio-card {
    background: var(--card-bg);
    border-radius: 2em;
    padding: 2em 1.5em 1.2em 1.5em;
    margin: -1.5em 1em 2em 1em;
    box-shadow: var(--shadow);
    max-width: 600px;
    margin-left: auto; margin-right: auto;
    font-size: 1.08em;
}
ul.skills {
    list-style: none;
    padding: 0; margin: 0 0 0.7em 0;
    display: flex; flex-wrap: wrap;
    gap: 0.8em 1.3em;
}
ul.skills li {
    background: #23282d;
    color: var(--accent);
    border-radius: 1em;
    padding: 0.38em 1em;
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid #3d444a;
    transition: background 0.2s;
}
.grayline {
    border: 0; height: 2px; background: #444; margin: 1.3em 0 1.5em 0;
}
.card-footer {
    font-size: 0.64em;           /* Fast, aldrig for stor */
    color: #b7b7b7;
    margin-top: 0.5em;
    text-align: center;
    letter-spacing: 0.03em;
    width: 100%;
    max-width: 100vw;
    padding: 0.5em 0.5em 0.5em 0.5em;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
@media (max-width: 480px) {
    .card-footer { font-size: 0.55em; }    /* Gør teksten mindre på små skærme */
}

@media (max-width: 600px) {
    .bio-card { padding: 1.2em 0.6em; }
    h1 { font-size: 1.45em; }
    .veil-img { width: 92px; height: 92px; }
}

/* Kontaktformular sektion */
.contactform {
    background: #242a30;
    color: #ececec;
    border-radius: 1.5em;
    padding: 1.3em 1.2em 1em 1.2em;
    max-width: 430px;
    margin: 2em auto 1em auto;
    box-shadow: 0 4px 18px #0009;
    display: flex;
    flex-direction: column;
    gap: 1.1em;
    position: relative;
    overflow: hidden;
}
.contactform .btn-text {
    flex: 1;
    text-align: center;
}
.contactform .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}
.contactform label {
    font-weight: 600;
    color: var(--accent);
}
.contactform input, .contactform textarea {
    background: #181c1f;
    color: #ececec;
    border: 1px solid #8bc34a60;
    border-radius: 0.6em;
    padding: 0.5em;
    font-size: 1em;
    resize: vertical;
}
.contactform button {
    background: var(--accent);
    color: #181c1f;
    border: none;
    border-radius: 0.6em;
    font-size: 1em;
    font-weight: bold;
    padding: 0.8em;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px #0006;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.contactform button.sending {
    background: var(--accent-dark);
    opacity: 0.7;
}
@keyframes flyaway {
    0% { transform: translateY(0) scale(1);}
    60% { transform: translateY(-16px) scale(1.08);}
    100% { transform: translateY(-70px) scale(0.15); opacity: 0;}
}

.contactform .form-response {
    margin-top: 1.4em;
    text-align: center;
    font-size: 1.09em;
    font-weight: 600;
    border-radius: 1em;
    padding: 1em 0.8em;
    background: #212b21;
    color: var(--success);
    box-shadow: 0 2px 12px #0007;
    min-height: 3em;
    transition: all 0.35s;
}
.contactform .form-response.error {
    color: var(--error);
    background: #332128;
    border: 1px solid #d9365477;
    box-shadow: 0 2px 12px #430a;
}

/* --- Radios jævnt fordelt på linje med note under --- */
.contactform .radioset {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.2em;
    margin: 0.5em 0 0.5em 0;
}
.contactform .radio-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.contactform .radio-col label {
    display: flex;
    align-items: center;
    gap: 0.45em;
    font-size: 1.11em;
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 0.18em;
}
.contactform .radio-col input[type="radio"] {
    accent-color: var(--accent);
    width: 1.16em; height: 1.16em;
    margin: 0 0.19em 0 0;
}
.contactform .max-note {
    font-size: 0.86em;
    color: #bbb;
    text-align: center;
    font-weight: 400;
    margin-top: 0.08em;
    letter-spacing: 0.01em;
}
.contactform .char-counter {
    margin-top: 0.3em;
    font-size: 0.93em;
    color: var(--accent-dark);
    text-align: right;
    min-height: 1.3em;
    letter-spacing: 0.01em;
}

.contactform .radioset {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center;
}
.contactform .radio-col {
    flex: 1 1 140px;
    min-width: 130px;
    max-width: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*
 Følgende er til min popup. Men hvis du er her midt i min kilde fordi du syntes at
 denne funktion er fed, så husk at ALT kode og scripting på dette domæne er copyrighted.
 Kopiering er, selvom det er let og koden ligger offentlig tilgængelig, stadig tyveri !
 Spørg mig eventielt ... Eller medkopier og paste i det mindste min Copyright linje herunder med!
 Copyright © 2025 BIT_on_Tech™ • Simplified Tech of Tomorrow • All rights reserved • bitveil.dk
*/
.status-popup {
    position: fixed;
    z-index: 4000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 260px;
    max-width: 92vw;
    background: #232d22ee;
    border-radius: 1.4em;
    box-shadow: 0 8px 40px #000c;
    color: var(--success);
    font-size: 1.12em;
    font-weight: 600;
    text-align: center;
    padding: 2.1em 1.4em 1.7em 1.4em;
    display: none;
    animation: popup-in 0.37s cubic-bezier(.55,1.4,.36,1.03);
}
.status-popup.error {
    color: var(--error);
    background: #332128f6;
    border: 1.5px solid #d9365477;
}
.status-popup .popup-icon {
    display: block;
    margin: 0 auto 0.8em auto;
}
@keyframes popup-in {
    0% {transform: translate(-50%, -60%) scale(0.6); opacity: 0;}
    80% {transform: translate(-50%, -50%) scale(1.08);}
    100% {transform: translate(-50%, -50%) scale(1);}
}
.status-popup .popup-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5em;
    position: absolute;
    top: 0.45em; right: 1em;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.status-popup .popup-close:hover { opacity: 1; }
.status-popup .sending-envelope {
    margin: 0 auto 1em auto;
    display: block;
    animation: flyaway 1.6s cubic-bezier(.42,.6,.49,1) 1;
}
.status-popup .popup-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0;
    position: absolute;
    top: 0.45em; right: 1em;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s;
    padding: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
}
.status-popup .popup-close:hover { opacity: 1; }
.status-popup .close-ring svg { display: block; }