:root {

    --dark: #0F172A;
    --gold: #c8aa22;
    --glass: rgba(255,255,255,.08);

}

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

body{

    font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

    color:white;

    min-height:100vh;

    background:
    radial-gradient(circle at top left,#1d2840 0%,transparent 40%),
    radial-gradient(circle at bottom right,#1a2336 0%,transparent 40%),
    var(--dark);

}

.wrapper{

    max-width:700px;

    margin:auto;

    padding:60px 25px;

}

/* Hintergrund */

.blob{

    position:fixed;

    border-radius:50%;

    filter:blur(120px);

    opacity:.2;

    z-index:-1;

}

.blob1{

    width:300px;
    height:300px;

    background:var(--gold);

    top:-100px;
    left:-100px;

}

.blob2{

    width:350px;
    height:350px;

    background:#0cc0df;

    bottom:-150px;
    right:-150px;

}

/* Profil */

.profile{

    text-align:center;

    margin-bottom:50px;

}

.profile img{

    width:130px;
    height:130px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid var(--gold);

    margin-bottom:20px;

}

.profile h1{

    font-size:2rem;

    margin-bottom:10px;

}

.profile p{

    color:#cbd5e1;

}

/* Links */

.links{

    display:flex;
    flex-direction:column;

    gap:18px;

}

.link-card{

    display:flex;

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

    text-decoration:none;

    color:white;

    padding:22px;

    border-radius:22px;

    background:var(--glass);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    transition:.3s;

}

.link-card:hover{

    transform:translateY(-4px);
    border-color:var(--gold);

}

.link-left h3{

    margin-bottom:5px;

}

.link-left span{

    color:#cbd5e1;

    font-size:.9rem;

}

/* SVG Icons */

.link-icon{

    width:26px;
    height:26px;

    stroke:var(--gold);

    fill:none;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;

    transition:.3s;

}

.link-card:hover .link-icon{

    //stroke:white;

    transform:scale(1.1);

}

/* Themen */

.topics{

    margin-top:60px;

}

.topics h2{

    text-align:center;

    margin-bottom:25px;

}

.topic-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:15px;

}

.topic{
    text-decoration:none;

    color:white;
    padding:20px;

    text-align:center;

    border-radius:18px;

    background:var(--glass);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

}

.topic:hover {

    border-color: var(--gold);
    transform: translateY(-3px);

}


/* Über mich */

.about{

    margin-top:60px;

    padding:30px;

    line-height:1.8;

    border-radius:25px;

    background:var(--glass);

    backdrop-filter:blur(20px);

}

/* Footer */

.footer{

    margin-top:50px;

    text-align:center;

}

.footer a{

    color:#cbd5e1;

    text-decoration:none;

    margin:0 10px;

}

.footer a:hover{

    color:var(--gold);

}

/* Fade */

.fade{

    opacity:0;

    transform:translateY(30px);

    transition:.8s;

}

.fade.show{

    opacity:1;

    transform:none;

}

@media(max-width:600px){

    .topic-grid{

        grid-template-columns:1fr;

    }

}