* {
 font-family: sans-serif;
 font-style: normal;
 line-height: 1.5;
 margin: 0;
 padding: 0;
 text-decoration: none;
}

html {
    background-attachment: fixed;
    background-color: #99ccff;
    background-repeat: no-repeat;
    background-size: cover;
    color: black;
    height: 100%;
    width: 100%;
}

@media screen and (max-width: 800px) {
 html {
  background-image: url(pics/uab-panorama-w800.jpg);
 }
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
 html {
  background-image: url(pics/uab-panorama-w1200.jpg);
 }
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
 html {
  background-image: url(pics/uab-panorama-w1600.jpg);
 }
}

@media screen and (min-width: 1600px) {
 html {
  background-image: url(pics/uab-panorama-w2000.jpg)
 }
}

body {
    box-sizing: border-box;
    margin: 0 auto;
    padding-top: 3em;
    position: relative;
    width: 33em;
}

body * { max-width: 100%; }

img { white-space: pre-wrap; }
h1 { font-size: 1.5em; }

body > h1 {
    display: block;
    height: 7em;
}

body > nav,
body > section {
    width: 100%;
}

body > nav > a {
    box-sizing: border-box;
}

body > section,
body > section > ul,
body > section > table {
    margin: 1.5em 0;
}

body > nav li,
body > section {
 border-radius: 0.375em;
}

body > nav li {
 background-color: black;
 border: 2px solid white;
 color: white;
 display: inline-block;
 margin-right: 0.75em;
 padding: 0.75em 1.5em;
 text-align: center;
}

body > nav li > a {
 background-color: inherit;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 color: inherit;
}

body > nav li#link-download {
 background-color: #ff3366;
 border-color: black;
 color: black;
 font-weight: bold;
}

body > section {
 background-color: white;
 border: 2px solid black;
 color: black;
 display: block;
 margin-bottom: 1.5em;
 padding: 0 1.5em;
 width: 30em;
}

i, cite { font-style: italic; }
dfn { font-style: normal; font-weight: bold; }
body > section > h1 { display: none; }
body > section > p,
body > section > ul > li,
body > section > dl { display: block; margin: 1.5em 0; }
body > section > ul { list-style-type: none; }
body > section a { border-bottom:1px solid #dd2244; color:#dd2244; font-weight:bold; }
dt { display: inline; font-weight: bold; }
dd { display: inline; }
dd + dt::before { content: '\A\A'; white-space: pre; }

#screenshots {
    transition-duration: 0.5s;
    transition-property: opacity;
}

#screenshots:target {
    opacity: 1;
}

#screenshots li,
#screenshots a,
#screenshots img,
#soundtrack li {
 display: block;
}

#screenshots li a,
#soundtrack-cover {
 border: 2px solid #dd2244;
}

#screenshots:target ~ #maja,
#screenshots:target ~ #annchristin,
#screenshots:target ~ #mauss,
#screenshots:target ~ #nele,
#screenshots:target ~ #henrike {
    transform: none;
}

#kollege1,
#trollbo,
#dorf1 {
 opacity: 0;
 margin-left: 34.5em;
 transform: translate(60em);
}

#kollege2,
#steffi,
#baeckerin {
 opacity: 0;
 margin-left: -360px;
 transform: translate(-60em);
}

#screenshots:hover ~ #kollege1,
#screenshots:target ~ #kollege1,
#download:hover ~ #trollbo,
#download:target ~ #trollbo,
#soundtrack:hover ~ #dorf1,
#soundtrack:target ~ #dorf1 {
 opacity: 1;
 transform: translate(0);
}

#screenshots:hover ~ #trollbo,
#soundtrack:hover ~ #trollbo,
#download:hover ~ #kollege1,
#soundtrack:hover ~ #kollege1,
#screenshots:hover ~ #dorf1,
#download:hover ~ #dorf1 {
 opacity: 0;
 transform: translate(60em);
}

#screenshots:hover ~ #kollege2,
#screenshots:target ~ #kollege2,
#download:hover ~ #steffi,
#download:target ~ #steffi,
#soundtrack:hover ~ #baeckerin,
#soundtrack:target ~ #baeckerin {
 opacity: 1;
 transform: translate(0);
}

#screenshots:hover ~ #steffi,
#soundtrack:hover ~ #steffi,
#download:hover ~ #kollege2,
#soundtrack:hover ~ #kollege2,
#screenshots:hover ~ #baeckerin,
#download:hover ~ #baeckerin {
 opacity: 0;
 transform: translate(-60em);
}

#mauss, #maja, #annchristin, #henrike, #nele, #kollege1, #kollege2, #trollbo, #steffi, #baeckerin, #dorf1 {
 transition-duration: 0.5s;
 transition-property: bottom, clip, opacity, transform;
}

#kollege1, #kollege2, #trollbo, #steffi, #baeckerin, #dorf1 {
 bottom: 0;
 position: fixed;
}

#mauss, #maja, #annchristin, #henrike, #nele {
 bottom: -550px;
 position: absolute;
}

#mauss { left: 1.5em; z-index: 1; }
#mauss:hover { transform: translate(-0.75em) /*rotate(-3deg)*/; }
#maja { left: -9em; /*transform: rotate(-3deg)*/; }
#mauss:hover ~ #maja { transform: translate(1.5em); }
#henrike {
 bottom: -880px;
 clip: rect(0, 500px, 72px, 0);
 left: 6em;
 pointer-events: none;
 z-index: 2;
}
#mauss:hover ~ #henrike {
 bottom: -596px;
 clip: rect(0, 500px, 356px, 0);
}
@media all and (-webkit-min-device-pixel-ratio: 0) {
 /* webkit cannot into clip property */
 #henrike, #mauss:hover ~ #henrike { bottom: -550px; clip: inherit; }
 #henrike { opacity: 0; }
 #mauss:hover ~ #henrike { opacity: 1; }
}
#nele { right: -9em; /*transform: rotate(3deg);*/ }
#mauss:hover ~ #nele { transform: /*rotate(1.5deg)*/ translate(0.75em); }
#annchristin { left: 6.75em; /*    bottom: 0.75em*/; }
#mauss:hover ~ #annchristin { transform: translate(7.5em, -7.5em); }

#wertvoll {
 height: 7.5em;
 position: absolute;
 right: -4.5em;
 top: 12em;
 transform: rotate(15deg);
 width: 7.5em;
 z-index: 2;
}

#download ul { margin-bottom: 1.5em; }

[src$="by-nc-nd.png"], [src$="by-sa.png"], [src$="gplv3.png"] {
 height: 4.5em;
 margin: 0 1.5em 1.5em 0;
}

[src$="by-nc-nd.png"] {  float: left }
[src$="gplv3.png"] { float: right; }

#usk12, #soundtrack-cover {
 height: 10.5em;
 margin-bottom: 1.5em;
 margin-top: 1.5em;
 float: right;
 width: 10.5em;
}

audio[controls] { height: 1.5em; }

#soundtrack table { margin-bottom: 3em; width: 18em; }
#soundtrack table tr th { display: none; }
#soundtrack table tr td { padding-bottom: 1.5em; }
#soundtrack table tr td + td { text-align: right; }
#soundtrack #tracks { width: 100%; table-layout: fixed; margin-bottom: 1.5em; }
#soundtrack #tracks tr td + td { width: 10.5em; }
#soundtrack #tracks tr th { display: none; }
#soundtrack #tracks tr {
 display: block;
 max-height: 0;
 transition-property: max-height;
 transition-duration: 1.5s;
 overflow: hidden;
}
#soundtrack #tracks tr td {
 display: inline-block;
 vertical-align: top;
 width: 19em;
}
#soundtrack #tracks tr:last-child, #soundtrack #tracks:target tr {
 max-height: 3em;
 overflow: inherit;
}
#soundtrack #tracks tr:last-child td { padding-bottom: 0; }