@font-face {
	  font-family: OpenSansSemiBold;
	  src: url('../fonts/OpenSans-SemiBold.woff2') format('woff2');
	  }

* {
  box-sizing: border-box;
  font-family: OpenSansSemiBold;
  }

.red {color:red;}
.b {}
.u {text-decoration: underline;}

html, body {
  margin:0;
  height:100%;
  background-color:#000;
  }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  }

header a {
  text-align: center;
  font-size:3.5em;
  color:#1c0707;
  margin: 30px auto 0;
  border: 6px solid #1c0707;
  padding: 2px;
  width: 177px;
  text-decoration: none;
  display:block;
  cursor:pointer;
  }

  header span.commentinfo {
    cursor: default;
    text-align: center;
    font-size:1em;
    margin: -27px auto 40px;
    width: 177px;
    text-decoration: none;
    display:block;
    position: relative;
    left: 71px;
    }

    header span.commentinfo.yes {
      color:#08472a;
      }

    header span.commentinfo.no {
      color:#570e0e;
      }
  
main {
  padding:10px 50px;
  display:flex;
  flex: 1;
  justify-content: center;
  align-items: baseline;
  }

  #toggleinfo,
  #toggledescription {
    display: none;
    }

    #toggleinfo:checked ~ .info-container,
    #toggledescription:checked ~ .description-container {
      display: block;
      }

      label.close {
        color: rgb(133 0 0);
        position: absolute;
        right: 20px;
        top: 10px;
        font-size: 44px;
        cursor: pointer;
        }
  
footer {
  margin:0 auto 10px auto;
  color:#4b3535;
  font-size: 15px;
  }

  footer a {
    cursor:help;
    }

  footer a#info {
    cursor:pointer;
    }

    footer a:not(:last-child)::after {
      content:" | ";
      margin-left: 6px;
      }
    
    footer a:hover {
      color:#5f2d2d;
      }

  i.footer {
    margin:0 5px;
    }

  @media only screen and (max-width: 800px) {
    main {
      padding:10px;
      }

    div.description-container {
      height:100%!important;
      }
    }

  div.video-container {
    position: relative;
    width:100%;
    max-width:1111px;
    max-height:90vh;
    aspect-ratio: 16 / 9; /* 16:9 Ratio */
    overflow: hidden;
    box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.8); /* Initial shadow */
    animation: ambilight 70s ease infinite alternate; /* Animation für Ambilight-Effekt */
    border-radius: 17px;
    }

  @keyframes ambilight {
    0% {box-shadow: 0 0 50px 30px rgba(255, 0, 0, 0.2); /* Rot */}
    7% {box-shadow: 0 0 50px 30px rgba(255, 128, 0, 0.2); /* Orange */}
    14% {box-shadow: 0 0 50px 30px rgba(255, 255, 0, 0.1); /* Gelb */}
    21% {box-shadow: 0 0 50px 30px rgba(0, 255, 0, 0.1); /* Grün */}
    28% {box-shadow: 0 0 50px 30px rgba(0, 255, 255, 0.2); /* Cyan */}
    35% {box-shadow: 0 0 50px 30px rgba(0, 0, 255, 0.3); /* Blau */}
    42% {box-shadow: 0 0 50px 30px rgba(128, 0, 255, 0.3); /* Violett */}
    49% {box-shadow: 0 0 50px 30px rgba(255, 0, 255, 0.2); /* Magenta */}
    56% {box-shadow: 0 0 50px 30px rgba(255, 105, 180, 0.2); /* Pink */}
    63% {box-shadow: 0 0 50px 30px rgba(255, 165, 0, 0.2); /* Gold */}
    70% {box-shadow: 0 0 50px 30px rgba(0, 128, 0, 0.3); /* Dunkelgrün */}
    77% {box-shadow: 0 0 50px 30px rgba(128, 0, 0, 0.3); /* Dunkelrot */}
    84% {box-shadow: 0 0 50px 30px rgba(255, 255, 255, 0.2); /* Weiß */}
    91% {box-shadow: 0 0 50px 30px rgba(255, 125, 0, 0.2); /* Rot (Wiederholung zur Symmetrie) */}
    100% {box-shadow: 0 0 50px 30px rgba(255, 128, 0, 0.2); /* Orange (Wiederholung zur Symmetrie) */}
    }

iframe.ytiframe,
div.info-container,
div.description-container {
  position: absolute;
  aspect-ratio: 16 / 9; /* 16:9 Ratio */
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 17px;
  }

  div.description {
    color:#5a3030;
    font-size:14px;
    line-height: 29px;
    text-shadow: 0 0 3px black;
    text-align: center;
    border: 3px solid #1e0000;
    border-radius:7px;
    margin: 20px auto;
    width: 246px;
    padding: 4px 0;
    background: rgb(35,8,46);
    background: linear-gradient(171deg, rgba(35,8,46,0.3) 0%, rgba(96,58,58,0.3) 59%, rgba(41,6,29,0.3) 100%);
    cursor: pointer;
    }

    div.description:hover {
      border:2px solid #260000;
      box-shadow: 1px 1px 2px #32180b;
      }

    div.description.visible {
      opacity: 1;
      }

    div.description label {
      cursor: pointer;
      }

  div.info-container,
  div.description-container {
    overflow-y: auto;
    display: none;
    padding: 14px 20px 30px;
    background-color: rgba(0,0,0,.9);
    color: #fff;
    scrollbar-width: auto;
    scrollbar-color: rgb(49,11,0) transparent;
    }

    div.description-container {
      height:50%;
      }

      span.subinfo {
        cursor:default;
        color:#848fe1;
        }

        span.subinfo i {
          width:23px;
          text-align: center;
          }

    /* Chrome, Edge, and Safari */
    div.description-container::-webkit-scrollbar {
      width: 16px;
      }

    div.description-container::-webkit-scrollbar-track {
      background: transparent;
      }

    div.description-container::-webkit-scrollbar-thumb {
      background-color: rgb(49,11,0);
      border-radius: 10px;
      border: transparent;
      }

    div.info-container h1 {
      font-size: 1.5em;
      margin-right: 53px;
      }

    div.description-container h2 {
      font-size: 1.3em;
      margin-right: 53px;
      }