html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  
  background-color: aliceblue;
  color: rgb(255, 0, 0);
}

.dark-mode {
  background: conic-gradient(rgb(255, 255, 255) 0%, rgb(255, 129, 129) 20%, rgb(253, 50, 50) 30%, rgb(255, 137, 137) 50%, rgb(255, 53, 53) 70%, rgb(252, 118, 118) 80%, rgb(255, 255, 255) 100%);
}

.Cover{
  height: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 10%);
}

.Cover2{
  height: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 10%);
  animation:abtauchen 1s;
  opacity: 0;
}

.Cover3{
  max-width: 100%;
  max-height: 80%;
  position:static;
}

.Cover4{
  max-height: 65%;
  position:static;
  border-radius: 20px;
  margin-bottom: -50px;
}

.Character{
  height: 35vw;
  margin-left: -20vw;
  position:static;
  transform: translate(0%, -50%);
}

.willigis-game{
  margin-top: -30vh;
  height: 200%;
}

.Main_Button{
  background-color: transparent;
  border-color: red;
  border-width: 0px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.Main_Button2{
  background-color: rgba(0, 0, 0, 0.207);
  border-color: red;
  border-width: 0px;
  width: 100%;
  height: 70%;
  display: flex;
  justify-content: flex-start;
  border-bottom-width: 1vh;
}

.Score{
  color: red;
}

.start{
  position: fixed;
  left: 50%;
  top: 80%;
  transform: translate(-50%,-50%);
  font-size: 5vw;
}
.start_off{
  z-index: -1;
  position: fixed;
  left: 50%;
  top: 80%;
  transform: translate(-50%,-50%);
  font-size: 5vw;
}
.end{
  position: fixed;
  left: 50%;
  top: 80%;
  transform: translate(-50%,-50%);
  font-size: 5vw;
}
.end_off{
  z-index: -1;
  position: fixed;
  left: 50%;
  top: 80%;
  transform: translate(-50%,-50%);
  font-size: 5vw;
}
.Überschrift{
  font-size: 40px;
  color:rgba(255, 0, 0, 0.768);
  background-color: rgba(94, 94, 94, 0.385);
  text-align: center;
}
.Logo{
  position: absolute;
  bottom: 0;
  right: 0;
  height: 150px;
  border-width: 5px; border-color: rgba(255, 0, 0, 0.500); border-style:outset ; border-top-right-radius: 20%; border-top-left-radius: 20%; border-bottom-left-radius: 20%;
}

.Logo2{
  position: absolute;
  right: 0;
  top: 45px;
  height: 150px;
  border-width: 5px; border-color: rgba(255, 0, 0, 0.500); border-style:outset ; border-top-left-radius: 20%; border-bottom-left-radius: 20%; border-bottom-right-radius: 20%;
}

.error{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  color:rgba(255, 0, 0, 0.768);
}
h1{
  margin-left: 20px;
}
a{
  text-decoration: none;
  color: red;
}
a:visited a:active{
  color: darkred;
}

#time{
  font-size: 50px;
  position: fixed;
  top: 205px;
  right: 0px;
  width: 160px;
  text-align: center;
}

#message{
  font-size: 30px;
  position: fixed;
  top: 255px;
  right: 0px;
  width: 160px;
  text-align: center;
  opacity: 0;
  animation: abtauchen 7s ease-out;
}

/*Slide*/
.Auswahl{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 4vw;
  text-align: center;
  align-items: center;
  z-index: 1;
  margin-top: 5%;
}
.Auswahl:visited{
  color: red;
}

.splide__track{
  height: 100vh;
}

.splide__slide{
  border-width: 2px;
  border-color: rgb(143, 143, 143);
  border-style: solid;
  box-shadow: 20px 20px 60px #9c9c9c, -20px -20px 60px #ffffff;
  height: 75vh;
  margin: 2vh;
  background: #112747;
  position: relative;
  display: flex;
  place-content: center;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
}

.splide__slide::before {
  content: '';
  position: absolute;
  width: 200px;
  background-image: linear-gradient(180deg, rgb(194, 247, 48), rgb(255, 48, 255));
  height: 180%;
  animation: rotBGimg 5s linear infinite;
  transition: all 0.2s linear;
  border-radius: 20px;
}

.splide__slide::after {
  content: '';
  position: absolute;
  background: #112747;
  inset: 5px;
  border-radius: 15px;
}  

.splide__progress{
  position: fixed;
  bottom: 2vw;
  width: 100%;
}

.splide__progress__bar {
  height: 5px;
  background: linear-gradient(90deg, red 10%, red 70%, orange 95%, transparent 100%);
}

.splide__pagination{
  position: fixed;
}

.splide__pagination__page{
  font-size: 4vh;
  height: 5vh;
  width: 5vh;
  margin: 1vh;
  margin-top: 10vh;
  border-radius: 5vh;
  transform: translate(0, -20%);
  background-color: rgba(208, 208, 208, 0.494);
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.splide__pagination__page.is-active{
  font-size: 4vh;
  height: 5.5vh;
  width: 5.5vh;
  margin: 1vh;
  margin-top: 10vh;
  border-radius: 5vh;
  transform: translate(0, -40%);
  color: red;
  background-color: rgba(255, 255, 255, 0.597);
}
.splide__arrow{
  width: 5vh;
  height: 5vh;
}

@media (max-width: 1020px) {
  .splide__arrow{
    width: 6vh;
    height: 6vh;
  }
  .splide__list{
    margin-left: -10vw;
  }
  .Auswahl{
    font-size: 5vh;
  }

  .Cover4{
    transform: translateX(-20%);
  }
}

@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes stop {
  0%{
    transform: translate(0%, 0%);
  }
  100%{
    transform: translate(0%, 0%);
  }
}
@keyframes abtauchen {
  0%{
      opacity:1;
  }
  100%{
      opacity:0;
  }
}
@keyframes jump {
  0%{
    transform: translate(0%, 50%);
  }
  50%{
    transform: translate(0%, 0%);
  }
  100%{
    transform: translate(0%, 50%);
  }
}
@keyframes jump2 {
  0%{
    transform: translate(0%, 50%);
  }
  50%{
    transform: translate(0%, 10%);
  }
  100%{
    transform: translate(0%, 50%);
  }
}