/*
-------------------------------------------------------
 steffen.at  |  Version 0.30
 Gemeinsames Stylesheet
-------------------------------------------------------
*/

:root{
    --font:'Montserrat',sans-serif;
    --text:#ffffff;
    --overlay:rgba(0,0,0,.32);
    --glass:rgba(255,255,255,.08);
    --glass-hover:rgba(255,255,255,.16);
    --border:rgba(255,255,255,.75);
    --speed:.25s;
    --shadow:0 10px 28px rgba(0,0,0,.25);
}

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

html,body{
    height:100%;
}

body{
    font-family:var(--font);
    color:var(--text);
    overflow-x:hidden;
    animation:fadeIn .5s ease;
}

/* Startseite */
body.home{
    background:url("../images/sunset.jpg") center center / cover no-repeat fixed;
}

/* Unterseiten */
body.subpage{
    position:relative;
    background:none;
}

body.subpage::before{
    content:"";
    position:fixed;
    inset:0;
    background:url("../images/sunset.jpg") center center / cover no-repeat fixed;
    filter:grayscale(100%);
    z-index:-2;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    background:var(--overlay);
    z-index:-1;
}

/* Navigation */
header{
    position:absolute;
    top:28px;
    left:40px;
    right:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.home{
    color:#fff;
    text-decoration:none;
    letter-spacing:2px;
    font-size:1.05rem;
}

nav{
    display:flex;
    gap:2rem;
}

nav a{
    color:#fff;
    text-decoration:none;
    letter-spacing:2px;
    padding-bottom:.35rem;
    transition:opacity var(--speed);
}

nav a:hover{opacity:.7;}

nav a.active{
    border-bottom:2px solid #fff;
}

/* Inhalt */

main{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

h1{
    font-size:3.8rem;
    font-weight:300;
    letter-spacing:.45rem;
    margin-bottom:2.4rem;
}

/* Buttons */

.button{
    width:min(360px,85vw);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.55rem;

    margin:.55rem 0;
    padding:1rem 1.2rem;

    color:#fff;
    text-decoration:none;

    border:1px solid var(--border);
    background:var(--glass);
    backdrop-filter:blur(4px);

    transition:
        transform var(--speed),
        background var(--speed),
        box-shadow var(--speed);
}

.arrow{
    display:inline-block;
    transition:transform var(--speed);
}

.button:hover{
    transform:translateY(-2px);
    background:var(--glass-hover);
    box-shadow:var(--shadow);
}

.button:hover .arrow{
    transform:translateX(4px);
}

@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

@media (max-width:700px){

    header{
        left:20px;
        right:20px;
        flex-direction:column;
        gap:1rem;
    }

    nav{
        flex-wrap:wrap;
        justify-content:center;
        gap:1rem;
    }

    h1{
        font-size:2.4rem;
        letter-spacing:.2rem;
    }

    .button{
        width:90%;
    }
}