:root {
  --bgcolor: #000000;
  --copyColor: #ffffff;
  --altCopyColor: #ddfdff;
  --HLcolor: #ddfdff;
}

body {
  background-color: var(--bgcolor);
  color: var(--copyColor);
  font-size: calc(var(--baseFontSize) * 1.2);

  padding: 0px;
  margin: 0px;
  font-family: Copy;
  text-align: center;
}
#spacer {
  display: block;
  width: 100%;
  height: 10vh;
}

video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover; /* Ensures proper aspect ratio */
}

.textTeil {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: -20px;
}

.divider {
  display: block;
  width: 100%;
  height: 40px;
  background-image: url(snitch.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-top: 50px;
  margin-bottom: 50px;
}

#dududu {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  z-index: 100;
  background-image: url(rotate.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#dududu2 {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  z-index: 100;
  background-image: url(rotate3.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#dududu3 {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  z-index: 100;
  background-image: url(rotate2.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#wappen {
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  background-image: url(hogwarts.png);
  background-size: 70%;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -10;
}

#cropper {
  width: 100vw;
  height: calc(100vw / 1080 * 1920);
  display: block;
  background-color: var(--bgcolor);
  overflow: hidden;
  overflow-y: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 1;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  z-index: 10;
}

#ytVideo {
  position: absolute;
  left: 0px;
  width: 100vw;
  height: calc(100vw / 9 * 16 * 1.2);
  top: 0px;
  transform: translateY(calc(100vw / 9 * 16 / -10));
  display: block;
  border-style: none;
}

#chopper {
  width: 100%;
  height: calc(100vw / 9 * 16 / 9);
  position: absolute;
  top: calc(100vw / 9 * 16);
  display: block;
  background-color: var(--bgcolor);
  opacity: 1;
}

.leInfo {
  width: 80vw;
  position: absolute;
  top: 10px;
  left: 10vw;
  transition: opacity 2s;
  -webkit-transition: opacity 2s;
  opacity: 0;
  text-align: center;
  display: none;
}

.visi {
  opacity: 1;
}

.invisi {
  opacity: 0;
}

.noblock {
  display: none;
}

button {
  position: relative;
  font-family: "Copy";
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  min-width: 60vw;
  border-radius: 999px;
  color: white;
  background-color: black;
  border-style: solid;
  border-width: 1px;
  border-color: #ffffff;
  background-image: url(buttonback.gif);
  background-size: cover;
  text-decoration: none;
  box-shadow: inset 5px 5px 10px #00000099;
}