body {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        background-color: #55555555;
        display: flex; 
        flex-direction: column; 
        min-height: 100vh; 
        align-items: center;
    }

    header { 
        display:block; 
        position: fixed; 
        top: 0; 
        width: 100%; 
        height: 50px; 
        background-color: #555555; 
        z-index: 1;
    }
    header img{ 
        max-width: 250px; 
        max-height: 50px;
        border: none;
    }


    input{display:none}
    label.hamburger { 
        display: none; 
        width:50px; 
        height: 35px; 
        float: right; 
        margin-right: 15px; 
        padding-top: 7px;
    }

    .line {
        position: relative;
        left:4px; 
        height: 2px; 
        width: 40px; 
        background: #fff; 
        border-radius: 2px;
        display: block; 
        transition: 0.3s; 
        transform-origin: center; }

    .line:nth-child(1) { top: 7px; }
    .line:nth-child(2) { top: 14px; }
    .line:nth-child(3) { top: 21px; }
    
    #hamburger:checked + .hamburger .line:nth-child(1){ transform: translateY(9px) rotate(-45deg);}
    #hamburger:checked + .hamburger .line:nth-child(2){ opacity:0;}
    #hamburger:checked + .hamburger .line:nth-child(3){ transform: translateY(-9px) rotate(45deg);}
    #hamburger:checked ~ nav{ display: flex;flex-direction: column;}

    nav{
        display: inline-flex; 
        background-color: #555555; 
        justify-content: center;
        position: absolute; 
        top: 0; 
        left: 250px; 
        right: 0; 
        overflow: visible; 
    }
    nav a{
        flex:1; 
        text-align: center;
        color: whitesmoke; 
        font-size: 20px; 
        padding-bottom: 10px;
        padding-top: 14px;
        transition: 0.2s; 
        text-decoration: none;
    }
    nav a.active { 
        color: lightblue; 
        border-bottom: 4px solid lightblue;
    }
    nav a:hover:not(.active) { border-bottom: 4px solid #dddddddd; }


    main{ 
        flex: 1; 
        display: flex; 
        flex-flow: column; 
        align-items: center; 
        margin-top: 50px; 
        width: 100%;
    }
    main a{
        color: black; 
        text-decoration: none;
    }
    #cover{
        position: absolute;
        top: 0; left: 0; 
        width: 100%;
        height: 70vh;
        max-height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
        border-radius: 10px;
    }
    #buffer{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin:0;
        width: 100%;
        min-height: 40vh;
    }

    #quote {
        color: white;
        border-radius: 2px;
        font-size: 18px;
        margin: 1% 5%;
    }
    #bubble{
        border: solid 3px gray;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 2px;
        padding: 5px;
        position: relative;
    }
    #bubble::before{
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 0;
        width: 0;
        transform: translate(-3px, 31.5px);
        border-top: 30px solid gray;
        border-left: 20px solid transparent;
    }

    #quote span{
        position: relative;
        top: 6px;
        left: 25px;
        padding: 5px;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 2px;
    }


    #preview{
        flex: 1;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-content: flex-end;
    }
    #preview a{
        flex: 1;
        display: flex;
        justify-content: center;
        align-content: center;
        text-decoration: none;
        color: black;
    }

    #precon{
        flex: 1;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: flex-start;
        margin: 1vw;
        background-color: #dddddddd;
        border-radius: 5px;
        border: solid 2px #55555555;
        --d:15vw;
        height: var(--d);
        width: var(--d);
        
    }
    #preimg{
        flex: 1;
        width: 90%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 5%;
    }
    #preview h3{
        text-align: center;
        margin: 5%;
    }
    #preview p{
        flex: 1;
    }
    #divider{
        display: block;
        height: 2px;
        width: 90%;
        background-color: black;
    }


    #picture{
        width: 40%;
        min-width:300px;
        margin-left: 5%;
        margin-right: 5%;
        border-radius: 50%;
        border: solid 2px #55555555;
    }

    #name{
        display:flex;
        flex-flow: column;
        align-content: center;
        font-size: 24px;
        min-width: 270px;
        padding-left: 10px; padding-right: 10px;
        margin: 10px;
        background-color: #dddddd;
        border-radius: 5px;
        border: solid 2px #55555555; 
    }
    #name b{
        font-size: 32px;
        flex: 0;
        border-bottom: 2px solid black;
        padding: 10px;
        text-align: center;
    }
    #subname{
        flex: 0;
        display: flex;
        flex-flow: column;
        padding: 5px;
    }
    #name span{
        flex: 0;
    }

    #icons{
        display: flex;
        justify-content: center;
    }
    #icons div{
        flex: 1;
    }
    #icons img{
        max-width: 48px;
        margin: auto;
    }


    #text{ 
        flex: 1; 
        max-width: 1000px; 
        width: 85%; 
        background-color: #dddddddd;
        padding-left: 25px; padding-right: 25px;
        margin: 20px;
        border-radius: 5px;
        border: solid 2px #55555555;
        line-height: 150%;
    }
    #text p{
        padding-left: 10px; padding-right: 10px;
        text-align: justify;
    }

    #text ul{
        padding-right: 20px;
        padding-left: 20px;
        margin-left: 10px;
    }
    #text h1{
        text-align: center;
    }
    #text h2{
        font-size: large;
    }
    #text h3{
        margin-bottom: 10px;
        font-size: medium;
    }
    #text a{
        text-decoration: underline dotted black 3px ;
    }

    
    #kontakt p{
        max-width: 300px;
        text-align: justify;
    }
    #kontaktdaten{
        display: flex;
        flex-flow: column;
        align-items: center;
    }
    #kontaktdaten a{
        flex: 1;
        color: black;
        text-decoration: underline dotted;
        font-weight: bold;
    }
    
    footer { 
        display:flex; 
        justify-content: center; 
        color: gray; 
        background-color: lightgray; 
        width: 100%; 
        border-top: solid 2px #55555555;
    }
    footer a{ 
        color: gray; 
        text-decoration: none; 
        font-size: 14px; 
        text-align: center; 
        padding: 12px;
    }
    footer a:hover{ color: black; }
    footer a img{
        width: 12px;
    }
    @media screen and (max-width: 700px){
        nav {top: 50px; left: 0; display:none; }
        nav a{ padding:10px; margin: 10px;}
        label.hamburger{display: block;}
        #text{ padding-left: 10px; padding-right: 10px; }
        #cover{min-height: 20vh; }
        #quote{font-size: 16px;}
        #precon{ --d:35vw; margin: 4vw;}
        #kontakt p{ max-width: 70vw;}
    }