@font-face {
    font-family: 'HighTide';
    src: url('../fonts/HighTide.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'InclusiveSans';
    src: url('../fonts/InclusiveSans.ttf');
    font-weight: 100 1000;
    font-style:wght;
    font-display: swap;
}

h1 {
    font-size: 10vw;
    color: #f1ebe5;
    text-shadow: 10px 10px 20px #573d12ba, 0px -2px 1px #fff;
}

h1.mainsteve {
    font-family: HighTide;
    font-size: 10vw;
    margin-bottom:10px;
}

h1.mainnormal, h2, h3 {
    font-family: InclusiveSans, sans-serif;
    font-variation-settings: "wght" 500;
    font-weight: 500;
}

h1.mainnormal {
    font-size: 10vw;
    font-weight: 600;
}

h2 {
    font-size:2.2vw;
}

h3 {
    font-size:1.8vw;
}

.heading {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.subhead {
    font-family: "InclusiveSans", sans-serif;
    font-variation-settings: "wght" 500;
    font-size: 1em;
    text-align: center;
    font-weight: 500;
    color: #333;
    background: #faebd7c4;
    padding: 8px 18px 6px;
    border-radius: 10px;
    z-index: 99999;
}

p {
    font-family: InclusiveSans, sans-serif;
    font-variation-settings: "wght" 200;
    font-weight: 200;
    line-height: 1.2em;
    letter-spacing: 0.03em;
}

strong {
    font-variation-settings: "wght" 400;
    font-weight: 400;
}


body {
    font-family: sans-serif;
    font-weight: 300;
    background-image: url('/images/blumen_fuer_jennifer.webp');
    background-size: 400px;
    height: 100vh;
    -webkit-animation: moveBackground 300s linear infinite;
         animation: moveBackground 300s linear infinite;

    margin:0;
    padding:0;
}

@-webkit-keyframes moveBackground {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 0% -1000%;
  }
}

@keyframes moveBackground {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 0% -1000%;
  }
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.textbox {
    background:#f1ebe5;
    width: 80%;
    padding:40px;
    margin-bottom: 100px;
    border-radius: 20px;
    box-shadow: 20px 20px 50px #00000078;
}


/* Footer */

.foooterlinks {
    font-family: InclusiveSans, sans-serif;
    font-variation-settings: "wght" 400;
    text-align: center;
    margin-top:50px;
    padding-top: 20px;
    border-top: 1px solid #cecece;
}


/* Bee */

.bee_container {
  height: 31.25em;
  width: 31.25em;
  position: relative;
  margin: 50px auto 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  animation: fly 4s infinite;
}
@keyframes fly {
  50% {
    transform: translateY(-3.12em);
  }
}
.bee {
  height: 7.5em;
  width: 12.5em;
  background: linear-gradient(
    to right,
    #f4c13d 30%,
    #0d323e 30%,
    #0d323e 45%,
    #f4c13d 45%,
    #f4c13d 55%,
    #0d323e 55%,
    #0d323e 70%,
    #f4c13d 70%,
    #f4c13d 80%,
    #0d323e 80%
  );
  border-radius: 5em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  box-shadow: inset 0 -1.56em rgba(0, 0, 0, 0.15), 50px 50px 80px #0009
}
.bee:before {
  position: absolute;
  content: "";
  height: 0.87em;
  width: 0.87em;
  background-color: #0d323e;
  border-radius: 50%;
  top: 3.43em;
  left: 1.25em;
}
.bee:after {
  position: absolute;
  content: "";
  height: 0.31em;
  width: 1.87em;
  background-color: #0d323e;
  border-radius: 0.31em;
  top: 3.43em;
  left: 11.87em;
}
.wings {
  position: absolute;
  height: 5em;
  width: 5em;
  background-color: #da615f;
  border-radius: 5em 5em 0 5em;
  top: 7.5em;
  left: 11.25em;
}
.wings:before {
  position: absolute;
  content: "";
  height: 5em;
  width: 5em;
  background-color: #da615f;
  border-radius: 5em 5em 5em 0;
  left: 4.68em;
}
.wings:after {
  height: 3.75em;
  width: 3.75em;
  position: absolute;
  content: "";
  box-shadow: -0.62em -0.62em #f2c7c9;
  border-radius: 50%;
  top: 1.12em;
  left: 1.12em;
}
.shine {
  position: absolute;
  height: 1.25em;
  width: 7.5em;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 1.25em;
  top: 1.25em;
  left: 3.12em;
}
.shine:before {
  position: absolute;
  content: "";
  height: 3.12em;
  width: 0.93em;
  background-color: #0b2b35;
  border-radius: 0.93em;
  transform: rotate(-30deg);
  top: 4.68em;
  left: 1.87em;
  box-shadow: 2.5em 1.25em #0b2b35;
}
@media screen and (min-width: 700px) {
  .container {
    font-size: 1.2em;
  }
}


/* Player-Container */
  #bottom-player{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #111;
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.15);
    padding: 10px 12px 12px;
  }

  /* Titel + Lizenzbutton */
  #bottom-player .bp-top{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  #bottom-player .bp-title{
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  #bottom-player .bp-license{
    flex: 0 0 auto;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
  }
  #bottom-player .bp-license:focus{
    outline: 2px solid rgba(255,255,255,.6);
    outline-offset: 2px;
  }

  /* Native Audio Controls in voller Breite */
  #bottom-player audio{
    width: 100%;
    display: block;
    height: 40px; /* angenehm auf Mobile */
  }

  /* Attribution-Zeile */
  #bottom-player .bp-attrib{
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255,255,255,.8);
  }
  #bottom-player .bp-attrib a{
    color: rgba(255,255,255,.9);
    text-decoration: underline;
  }

  /* Auf sehr kleinen Screens etwas kompakter */

  @media (max-width: 520px){
  #bottom-player .bp-top{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #bottom-player .bp-license{
    width: 100%;
    text-align: center;
  }

  /* Audio immer voll sichtbar + angenehme Höhe */
  #bottom-player audio{
    height: 44px;
  }
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    h2 {font-size:2vw}
    h3 {font-size:1.8vw}
    .subhead {font-size:2em}
    .bee_container {margin-top:200px}
}

@media (orientation:landscape) {
   .subhead {font-size:1.2em}

}