@charset "utf8";
@font-face {
    font-family: 'bolster';
    font-style: normal;
    font-weight: normal;
    src: local('bolster'), url('bolster.woff2') format('woff2');
}

:root{
    --braun: rgba(218,181,92,0.95);
    --dunkelbraun: rgb(96,56,19);
}
*{
    margin:0;
    padding:0;
    text-decoration: none;
    font-size:14px;
    font-family: Verdana;
    box-sizing: border-box;
    max-width: 100%;
    list-style-type:none;
    border:0px solid red;
}
body{
    min-height:100vH;
    background-image: url(../image/guitar2.webp);
    background-attachment: fixed;
    background-position: top center;
    background-size: cover;
    overflow:hidden;
}
header{
    width:100vW;
    height:calc(100vH - 60px);
    line-height:calc(100vH - 60px);
    position: sticky;
    top:calc(-100vH + 200px);
    left:0px;
    background-color:var(--braun);
    text-align: center;
    z-index:1000;
}
header img{
    vertical-align: middle;
    margin:auto;
}
#logo{
    transition: all 0.8s;
    position: absolute;
    left: calc(50% - 90px);
    bottom:20vH;
}
#logo.pinned{
    bottom:15px;
}

body > menu{
    height:60px;
    width:100%;
    text-align: center;
    position: sticky;
    top:140px;
    z-index:1000;
    background-color: rgba(255,255,255,0.95);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    gap: 0px;
    border-bottom:1px solid var(--braun);
}
body > menu li a{
    display: inline-block;
    line-height:60px;
    padding:0px 12px;
    cursor:pointer;
    transition:all 0.7s;
}
body > menu li a:hover{
    background-color: var(--braun);
}
body > menu li a.aktiv,footer a.aktiv{
    color: var(--dunkelbraun);
}
body > footer{
    position: fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height: 40px;
    z-index:100;
    line-height: 40px;
    text-align: right;
    background-color: rgba(255,255,255,0.8);
}
body > footer > a{
    display:inline-block;
    margin-right: 30px;
    font-size:0.8rem;
}
body > footer > span{
    display:inline-block;
    margin-left: 30px;
    font-size:0.8rem;
    float:left;
}
a{
    cursor:pointer;
}
p{
    margin-bottom:15px;
}

body > main{
    width: 100%;
    height:800vH;
}
body > main > section{
    width: 100vW;
    height:calc(100vH - 200px);
}
body > main > section > article{
    height:calc(100vH - 300px);
    width: 90vW;
    margin:50px auto;
    background-color: rgba(255,255,255,0.95);
    box-shadow: 4px 4px 8px #000;
    border-radius:20px;
    border-top-left-radius:5px;
    padding:20px;
    overflow: auto;
}

body > main section * h1{
    font-family: bolster;
    font-size:1.4rem;
    margin-bottom:12px;
    font-weight: normal;
}