html{
    scroll-snap-type: y mandatory;
}

::-webkit-scrollbar{
    display:none;
}


body {
  font-family: Arial, sans-serif;
  background: #000000;
  color: #ffffff;
  padding: 40px;
  margin: 0;
}



main, section{
    height: 100vh;
    width: 100vw;
    scroll-snap-align: start;    
    margin: 0;
    height: 100vh;
    display: grid;
    place-items: center;
}



h1 {
  font-size: 80px;
  margin: 0;
  text-align: center;
}


.anfang, .idee, .abschluss, .anfang-extra,.gpt,.seite_5{
    max-width: 800px;
    text-align: center;
    padding: 0 20px;
    font-size: 20px;
    display:block;
}



#frage{
    max-width: 800px;
    text-align: center;
    padding: 0 20px;
    font-size: 25px;
    display: block;
}

p {
    margin-left: 130px;
}


button {    
    padding: 20px 32px;
    cursor: pointer;
    display:block;
    background-color: #c2fbd7;
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: green;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 20px 32px;
  text-align: center;
  text-decoration: none;
  border: 0;
  font-size: 30px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button{

    align-self: center;
}


img{
    height: 150vh;
    display:flex;
    flex-direction: row;
    align-self: center;
}


.button-wrapper{
    position:relative;
    display: inline-block;
    width: 100%;
    height: 300px;
}

.button-wrapper button{
    z-index: 1;
}

.gif-overlay {
    height: 150vh;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
    z-index: 2;
}


.image-overlay{
    height: 70vh;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
    z-index: 2;
    /*display: none;*/
    opacity: 0;
    transition: opacity 5s ease;
    z-index: 1;
}





#heart_rain_gif{
    display:none;
    top: 75%
}


#confettigif{
    display:none;    
}

#yesbtn{
    position: absolute;
    left:40%;
    top: -20%;
    transform:translate(-50%, -50%);
}

#jay {

    font-size: 50px;
    opacity: 0;
    transition: opacity 5s ease;

    transform: translateY(-40px)
}

#nobtn{
    position: absolute;
    place-items: center;
}