/* --------------------------------------------------
   reset
-------------------------------------------------- */

* { 
  box-sizing:border-box;
  outline:0;
}

html { 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, ul { list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

::selection { background:black; color:white; }
::-moz-selection { background:black; color:white; }







/* --------------------------------------------------
   font import
-------------------------------------------------- */

/* atkinson-hyperlegible-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/atkinson-hyperlegible-v11-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* atkinson-hyperlegible-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/atkinson-hyperlegible-v11-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}





  /* --------------------------------------------------
     variables
  -------------------------------------------------- */

  :root {

      /* original */
      --OstseeBlue: #4a5487;
      --OstseeGrey: #d6c0b5;

      --fontHeading: 'Helvetica', sans-serif;
      --fontBody: 'Atkinson Hyperlegible', Helvetica, Arial, sans-serif;
  }








/* --------------------------------------------------
   typography
-------------------------------------------------- */

html {
  font-size:15px;
  user-select: none;
}

  @media only screen and (min-width :  600px) { html { font-size:16px; } }
  @media only screen and (min-width :  800px) { html { font-size:17px; } }
  @media only screen and (min-width : 1000px) { html { font-size:18px; } }
  @media only screen and (min-width : 1200px) { html { font-size:19px; } }

body {
  font-family:'Atkinson Hyperlegible','Roboto','Arial',sans-serif;
  font-size:1rem;
  line-height:1.5;
  color:#333;
}

h1,h2,h3, button {
  font-family:'Helvetica','Arial',sans-serif;
  line-height: 1.1;
  font-weight:900;
  hyphens:auto;
}

h1 {
  font-size:4rem;
  font-weight:900;
  margin-bottom:3rem;
}

h2 {
    font-size:2.5rem;
    font-weight:900;
    margin-bottom: 3rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

p {
  margin:1.6rem 0;
}

p:first-child {
  margin-top:0;
}

p:last-child {
  margin-bottom:0;
}

a {
  color:#1fb0f9;
}

strong {
    font-weight:700;
}

.black {
    font-weight:900;
}

em {
  font-style:italic;
}

.small {
  font-size:80%;
}

button {
  display: inline-block;
  border:none;
  border-radius:0;
  padding:1rem;
  font-size:1rem;
  text-align:center;
  text-decoration:none;
}


html[lang=en] .de { display:none; }

html[lang=de] .en { display:none; }




/* --------------------------------------------------
   header
-------------------------------------------------- */

header {
  position:fixed;
  width:100%;
  background:var(--OstseeBlue);
  color:white;
/*  padding:1rem;*/
  z-index:99;
  display:flex;
  justify-content: space-between;
  align-items: center;
}

  header h1 {
    font-size:1rem;
    margin:0;
    padding:2rem 1rem 1rem;
  }

  header button {
    padding:0;
    margin:0;
    padding:2rem 1rem 1rem;
    background:none;
  }

  header button:hover {
    background:inherit;
  }

    header button img {
      width:3rem;
      height:3rem;
      display:block;
      border:3px solid white;
      border-radius:50%;
    }






/* --------------------------------------------------
   general
-------------------------------------------------- */

body {
  overflow: hidden;
}





/* --------------------------------------------------
  logo
-------------------------------------------------- */

.logo {
  width:39.1rem;
  position:absolute;
  opacity:.1;
  right:2rem;
  bottom:2rem;
  pointer-events: none;
  transform:scale(.9);
}

  .logo-top {
    width:39.1rem;
    height:11.9rem;
    background:var(--OstseeBlue);
    margin-bottom:1.9rem;
    animation:logoTop 7s ease infinite;
  }

  .logo-bot {
    width:39.1rem;
    height:9.1rem;
    background:var(--OstseeGrey);
    animation:logoBot 7s ease infinite;
  }

  @keyframes logoTop {
        0% { transform:translateX(0); }
       50% { transform:translateX(0); }
      100% { transform:translateX(100%); }
  }

  @keyframes logoBot {
        0% { transform:translateX(0); }
       60% { transform:translateX(0); }
      100% { transform:translateX(100%); }
  }








/* --------------------------------------------------
  faces
-------------------------------------------------- */

.faces {

}

  .faces li {
    position:fixed;
    top:0;bottom:0;
    left:0;right:0;
    z-index:99;
    display:none;
    align-items: center;
    justify-content: center;
    background:white;
  }

  .faces li.active {
    display:flex;
  }

    .faces img {
      display:block;
    }






/* --------------------------------------------------
   dialog tree
-------------------------------------------------- */

.tree {
  position:absolute;
  top:0;bottom:0;
  left:0;right:0;
}

  .slide {
    width:100%;
    height:100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index:1;
    display:none;
    margin:auto;
    flex-direction:column;
    font-size:2rem;
  }

  .slide.active {
    display:flex;
  }

    .slide-text {
      padding:0 2rem;
      animation:fadeIn .4s ease;
      animation-fill-mode: backwards;
      animation-delay:.5s;
    }

    .slide--delayed .slide-text {
      animation-delay:1.5s;
    }


    .slide-options {
      margin-top:5rem;
      display:flex;
      flex-direction:column;
      gap:1rem;
    }

      .slide-options button {
        display:block;
        background:var(--OstseeBlue);
        font-weight:bold;
        color:white;
        animation:slideIn .4s ease;
        animation-fill-mode: backwards;
      }

      .slide-options button:nth-child(1) { animation-delay:.6s; }
      .slide-options button:nth-child(2) { animation-delay:.7s; }
      .slide-options button:nth-child(3) { animation-delay:.8s; }
      .slide-options button:nth-child(4) { animation-delay:.9s; }
      .slide-options button:nth-child(5) { animation-delay:1s; }

      .slide--delayed .slide-options button:nth-child(1) { animation-delay:1.6s; }
      .slide--delayed .slide-options button:nth-child(2) { animation-delay:1.7s; }
      .slide--delayed .slide-options button:nth-child(3) { animation-delay:1.8s; }
      .slide--delayed .slide-options button:nth-child(4) { animation-delay:1.9s; }
      .slide--delayed .slide-options button:nth-child(5) { animation-delay:2s; }

      .slide-options button.hidden {
        display:none;
      }

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

  @keyframes slideIn {
      from { transform:translateY(30%);opacity: 0; }
      to { transform:none;opacity: 1; }
  }






/* --------------------------------------------------
   preface
-------------------------------------------------- */

#preface {
  position:relative;
  background:#ffec00;
  z-index:99;
}




/* --------------------------------------------------
   karaoke
-------------------------------------------------- */

  .karaoke {
    margin-top:1rem;
    font-style:italic;
  }

  .karaoke p {
    animation-name:karaokeLine;
    animation-timing-function: ease;
    animation-fill-mode: both;
  }

    .karaoke span {
      animation-name:karaokeWord;
      animation-timing-function: ease;
      animation-fill-mode: forwards;
      animation-duration:.001s;
    }

  @keyframes karaokeLine {
        0% { opacity: 0; display:none; }
        1% { opacity: 0; display:block; }
        5% { opacity: 1; }
       95% { opacity: 1; }
       99% { opacity: 0; display:block; }
      100% { opacity: 0; display:none;}
  }

  @keyframes karaokeWord {
        0% { color: #666; }
      100% { color: #f00; }
  }

  .karaoke p:nth-child(1) { animation-delay:0;     animation-duration:20.8s; }
  .karaoke p:nth-child(2) { animation-delay:20.8s; animation-duration:4.3s; }
  .karaoke p:nth-child(3) { animation-delay:27.1s; animation-duration:4.4s; }
  .karaoke p:nth-child(4) { animation-delay:31.5s; animation-duration:1.6s; }
  .karaoke p:nth-child(5) { animation-delay:33.1s; animation-duration:1.1s; }
  .karaoke p:nth-child(6) { animation-delay:34.2s; animation-duration:1.0s; }
  .karaoke p:nth-child(7) { animation-delay:35.2s; animation-duration:1.5s; }
  .karaoke p:nth-child(8) { animation-delay:36.7s; animation-duration:3.5s; }
  .karaoke p:nth-child(9) { animation-delay:40.2s; animation-duration:2.3s; }

  /* 1 note */

  .karaoke p:nth-child(1) span:nth-child(1) { animation-delay:1s; }

  /* 2 i want to break free */

  .karaoke p:nth-child(2) span:nth-child(1) { animation-delay:  0s; }
  .karaoke p:nth-child(2) span:nth-child(2) { animation-delay: .2s; }
  .karaoke p:nth-child(2) span:nth-child(3) { animation-delay: .7s; }
  .karaoke p:nth-child(2) span:nth-child(4) { animation-delay:1.0s; }
  .karaoke p:nth-child(2) span:nth-child(5) { animation-delay:1.3s; }

  /* 3 i want to break free */

  .karaoke p:nth-child(3) span:nth-child(1) { animation-delay:  0s; }
  .karaoke p:nth-child(3) span:nth-child(2) { animation-delay: .4s; }
  .karaoke p:nth-child(3) span:nth-child(3) { animation-delay: .8s; }
  .karaoke p:nth-child(3) span:nth-child(4) { animation-delay:1.1s; }
  .karaoke p:nth-child(3) span:nth-child(5) { animation-delay:1.6s; }

  /* 4 i want to break free */

  .karaoke p:nth-child(4) span:nth-child(1) { animation-delay:  0s; }
  .karaoke p:nth-child(4) span:nth-child(2) { animation-delay: .3s; }
  .karaoke p:nth-child(4) span:nth-child(3) { animation-delay: .7s; }
  .karaoke p:nth-child(4) span:nth-child(4) { animation-delay:1.1s; }
  .karaoke p:nth-child(4) span:nth-child(5) { animation-delay:1.4s; }

  /* 5 from your lies */

  .karaoke p:nth-child(5) span:nth-child(1) { animation-delay:  0s; }
  .karaoke p:nth-child(5) span:nth-child(2) { animation-delay: .5s; }
  .karaoke p:nth-child(5) span:nth-child(3) { animation-delay: .9s; }

  /* 6 you're so */

  .karaoke p:nth-child(6) span:nth-child(1) { animation-delay:  0s; }
  .karaoke p:nth-child(6) span:nth-child(2) { animation-delay: .3s; }
  .karaoke p:nth-child(6) span:nth-child(3) { animation-delay: .5s; }

  /* 7 self satisfied */

  .karaoke p:nth-child(7) span:nth-child(1) { animation-delay:  0s; }
  .karaoke p:nth-child(7) span:nth-child(2) { animation-delay: .5s; }
  .karaoke p:nth-child(7) span:nth-child(3) { animation-delay:1.0s; }

  /* 8 i don't need you */

  .karaoke p:nth-child(8) span:nth-child(1) { animation-delay:  0s; }
  .karaoke p:nth-child(8) span:nth-child(2) { animation-delay: .3s; }
  .karaoke p:nth-child(8) span:nth-child(3) { animation-delay: .7s; }
  .karaoke p:nth-child(8) span:nth-child(4) { animation-delay:1.6s; }

  /* 9 i've got to break free */

  .karaoke p:nth-child(9) span:nth-child(1) { animation-delay:  0s; }
  .karaoke p:nth-child(9) span:nth-child(2) { animation-delay: .4s; }
  .karaoke p:nth-child(9) span:nth-child(3) { animation-delay: .7s; }
  .karaoke p:nth-child(9) span:nth-child(4) { animation-delay:1.1s; }
  .karaoke p:nth-child(9) span:nth-child(5) { animation-delay:1.4s; }