:root {
    --pink: rgb(216, 46, 222);
    --blue: rgb(42, 98, 142);
    --yellow: rgb(230, 187, 83);
    --white: rgb(255,255,255);
    --black:  rgb(0,0,0);
}

html {
    margin:    0 auto;
    max-width: 1024pt;
}

body {
    font-family: -apple-system-ui-serif, ui-serif, 'Georgia', serif;
    margin-top: 200pt;
    margin-bottom: 120pt;
    margin-left: 20pt;
    margin-right: 20pt;
    text-align: justify;
    line-height: 1.5;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


table, th, td {
  border: none;
  td:first-child {
    width: 120px;
  }
  tr {
    height: 50px;
  }
}

a {
    text-decoration: underline;
    text-decoration-color: var(--pink);
    color: var(--black);
}

a:hover {
    text-decoration: underline;
    text-decoration-color: var(--pink);
    color: var(--pink);
}

header h1 { margin-left: 10pt;}
header a:hover { color: var(--pink); border-bottom-color: var(--pink); }
header a {text-decoration: none;}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 11pt;
    color: var(--yellow);
    background: var(--blue);
}
footer ul { 
    list-style: none; 
    text-align: right;
}
footer a:hover { 
    color: var(--yellow); 
    border-bottom-color: var(--yellow);
    text-decoration-color: var(--yellow); }
footer a {
    text-decoration: none;
    color: var(--white);
}

.Logo {
    transform: translate(-5pt,-115pt);
    width: 100%;
    height: 30pt;
}

.Links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Potrait { text-align: justify; padding-left: 10pt; padding-right: 10pt; text-align: center; }
.Potrait img { max-width: 150pt; border-radius: 50%;}

.Potrait h2:after { 
content: "";
display: block;
margin: 0 auto;
width: 80%;
padding-top: 10px;
border-bottom: 2px solid black; }

.RowOfButtons { margin-top: 30pt; }

.RowOfButtons li{ visibility: hidden; }

.RowOfButtons a { 
    text-decoration: none;
    padding: 10pt;
    font-size: 12pt;
    padding: 10pt;
    border-radius: 14pt;
    border: 2pt solid var(--blue);
}

.RowOfButtons a:hover { 
    background: var(--yellow);
    color: var(--white);
    border: 2pt solid var(--yellow);
}

.AboutList ul {
    margin-top: -10pt;
    padding-bottom: 10pt;
}

/* Desktop specific */
@media (min-width: 820px) {
    body {
        margin-top: 120pt;
        margin-bottom: 90pt;
    }
    .Potrait img { max-width: 200pt; }
    .RowOfButtons li{ visibility: visible; display: inline-block; padding-left:10pt; }
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: var(--pink);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        background: var(--white);
    }
    header h1 { margin-top: 25pt;}
    header h3{ font-size: 13pt; }
    header ul { list-style: none; margin-right: 10pt;}
    header ul{ display: flex; }
    header li { margin-left: 10px; }
    footer ul{ display: flex; }
    footer li { margin-left: 10px; }
    footer li { margin-right: 10px; }
    .Welcome { display: flex; }
    .Potrait { float: left; width: 200pt; padding-left: 30pt; padding-right: 10pt; padding-right: 40pt; }
    header ul{ display: flex; }
    header input { visibility: hidden; }

    .menu {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-right: 10px;
        margin-top: 20px;
    }

    .nav-item {
        margin: 0 8px;
    }

    .ProfileImage img {
        float: right;
        max-height: 400pt;
        margin-left: 20pt;
    }
    
    .RuthGitarre img {
        float: right;
        max-height: 300pt;
        margin-left: 20pt;
    }
    
    .Kontrabass img {
        float: left;
        max-height: 300pt;
        margin-right: 20pt;
    }

    .AdressRight {
        float: right;
        max-width: 310pt;
    }

    .AdressLeft {
        float: left;
        max-width: 310pt;
    }
}

/* Mobile specific */
@media (max-width: 820px) {

body {
margin-top: 90pt;
margin-bottom: 90pt;
}

    header {
        left: 0;
        top: 0;
        width: 100%;
        position: fixed;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: var(--pink);
        background: var(--white);
        overflow-x: hidden; 
    }

header {
  display: flex;
  width: 100%;
}

header > * {
/*   flex-grow: 1; */
}

/* "Hide" checkbox -- moves it off screen*/
#menu-btn {
  position: absolute;
  top: -100%;
  left: -100%;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 250px;
  margin-right: 2rem;
}

  
  header {
    display: grid;
    grid-template-areas:
       "title   title   hamburger"
       "nav     nav     nav";
  }
  
  h1 {
    grid-area: title;
  }

  .menu-btn {
    display: none;
  }

  .menu-icon {
    grid-area: hamburger;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding: 40px 20px 30px 0;
    position: relative;
    user-select: none;
    visibility: visible;
  }

  .navicon {
    background: #333;
    display: block;
    height: 4px;
    width: 25px;
    position: relative;
  }

  .navicon:before {
    top: 8px;
  }

  .navicon:after {
    top: -8px;
  }

  .navicon:before, .navicon:after {
    background: #333;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    transition: all .2s ease-out;
  }

  .menu {
    grid-area: nav;
    max-width: unset;
    max-height: 0;
    transition: max-height .2s ease-out;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .menu a {
    padding: 20px 20px;
    width: 100%;
    text-align: center;
  }

  .menu-btn:checked ~ .menu {
    max-height: 540px;
  }

  .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }

  .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }

  .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }

  .menu-btn:checked ~ .menu-icon .navicon:before,
  .menu-btn:checked ~ .menu-icon .navicon:after {
    top: 0;
  }
    header h3 {
        margin-bottom:  0;
    }
.Potrait h2:after { 
width: 50%; }

.LinksRight {
    margin-right: 10pt;
}
.LinksLeft {
    text-align: left;
    margin-left: -20pt;
}

.ProfileImage img {
    max-height: 200pt;
    margin-left: 10pt;
    float: right;
}

.RuthGitarre img {
    max-height: 200pt;
    margin-left: 10pt;
    margin-bottom: 10pt;
    float: right;
}

.Kontrabass img {
    float: left;
    max-height: 200pt;
    margin-right: 10pt;
    margin-bottom: 10pt;
}

.Piano img {
    max-width: 350px;    
    display: block;
    margin-left: auto;
    margin-right: auto;
}

}