/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* BODY */

body{

font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;

background:linear-gradient(135deg,#020617,#0f172a);

color:white;

min-height:100vh;

display:flex;
flex-direction:column;

}

/* HEADER */

header{

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 60px;

}

/* LOGO */

header h1{

font-size:28px;

background:linear-gradient(90deg,#60a5fa,#22d3ee);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

/* NAVIGATION */

nav a{

margin-left:25px;

text-decoration:none;

color:#cbd5f5;

font-weight:500;

transition:0.3s;

}

nav a:hover{

color:white;

transform:translateY(-2px);

}

#typing-text{

font-size:48px;
color:#60a5fa;

border-right:3px solid #60a5fa;

display:inline-block;
padding-right:5px;

animation:blink 0.8s infinite;

}

@keyframes blink{

0%,100%{border-color:transparent}

50%{border-color:#60a5fa}

}

/* FOOTER */

footer{

margin-top:auto;

padding:25px;

text-align:center;

font-size:14px;

color:#94a3b8;

border-top:1px solid rgba(255,255,255,0.05);

}

/* ===== RESPONSIVE FIXES ===== */

/* Undgå horizontal scroll */
body {
    overflow-x: hidden;
}

/* Header bliver fleksibel */
@media (max-width: 768px) {

    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 15px;
    }

    nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    nav a {
        margin-left: 0 !important;
        display: block;
        width: 100%;
        padding: 10px;
        border-radius: 8px;
        background: rgba(255,255,255,0.05);
    }

}

/* Images skalerer korrekt */
img {
    max-width: 100%;
    height: auto;
}