body {

    background: chartreuse;
}

div#follow-text {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: deeppink;
    counter-reset: ;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none; /* Ensures the text doesn't interfere with mouse events */
    white-space: pre-line;
    width: 1500px;
    word-break: break-word;
    font-family: 'POPSTAR', sans-serif;
    top: 0%;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
    
@font-face {
  font-family: 'POPSTAR';
  src: url('POPSTAR_pop.TTF') format('TTF'),
       url('POPSTAR.TTF') format('TTF');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PPLANK';
  src: url('PPLANK___.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

#white-slide-box {
  position: fixed;
  top: 250px;
  left: -300px;
  background-color: rgb(255, 255, 255);
  height: 800px;
  z-index: 1001;
  width: 300px;
  border-radius: 10px;
  transition: left 0.8s cubic-bezier(.77,0,.18,1);
   box-shadow: 8px 6px 6px rgba(0, 0, 0, 0.5);

}

#white-slide-box.visible {
  left: 0px; /* Slide in to this position */
}



.slide-text{
  position: relative;
top: 10px;
left: 10px;
  font-size: 15px;
  color: black;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  word-break: break-word;
  white-space: pre-line;
  width: 280px;
  
  
}
h2{
  position: relative;
top: 15px;
}
div#hautdelapage {
    
  position: fixed;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  color: chartreuse;
  background-color: deeppink;
  font-family: 'POPSTAR', sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  z-index: 1000;
  word-break: break-word;
  white-space: pre-line;
  align-items: flex-start;
  top: -10%;
  
  
}
div#error {
    height: 150px;
    width: 150px;
    background-color:rgb(8, 0, 255);
    color: deeppink;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 1000px;
    top: 300px;
    white-space: pre-line;
    word-break: break-word;
    box-shadow: 8px 6px 6px rgba(0, 0, 0, 0.5);
    outline: 2px solid rgb(95, 91, 91);
    font-family: 'PPLANK';
}

#error .move-text {
    position: relative;
top: 10px;
left: 2px;
}

#close-cross {
  position: absolute;
top: 2px;
right: 120px;

  cursor: pointer;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7); 
 

}
#white-bar{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background-color: rgb(232, 226, 226);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}





 div#error2 {
    height: 250px;
    width: 250px;
    background-color:rgb(8, 0, 255);
    color: deeppink;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    position: fixed;
    left: 100px;
    top: 500px;
    white-space: pre-line;
    word-break: break-word;
    box-shadow: 8px 6px 6px rgba(0, 0, 0, 0.5);
    outline: 2px solid rgb(95, 91, 91);
    
    
}

#error .move-text {
    position: relative;
top: 10px;
left: 2px;
}

#error2 .move-text {
    position: relative;
top: -8px;
left: 5px;
}

#close-cross2 {
  position: absolute;
top: 2px;
right: 220px;
  cursor: pointer;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7); 
 

}
#white-bar2{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background-color: rgb(232, 226, 226);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}



div#erroryellow {
    height: 150px;
    width: 150px;
    background-color:yellow;
    color:rgb(8, 0, 255);
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 700px;
    top: 500px;
    white-space: pre-line;
    word-break: break-word;
    box-shadow: 8px 6px 6px rgba(0, 0, 0, 0.5);
    outline: 2px solid rgb(95, 91, 91);
    font-family: 'PPLANK';}


#white-bar3{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background-color: rgb(232, 226, 226);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}

  #close-cross3 {
  position: absolute;
  top: 2px;
  right: 220px;
  cursor: pointer;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7); }

#close-cross4 {
    position: absolute;
top: 2px;
right: 120px;
  cursor: pointer;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7); }

  #erroryellow .move-text {
    position: relative;
top: -8px;
left: 5px;
}


div#errorred {
      height: 300px;
    width: 150px;
    background-color:red;
    color:yellow;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: fixed;
 left: 360px;
top: 150px;
    white-space: pre-line;
    word-break: break-word;
    box-shadow: 8px 6px 6px rgba(0, 0, 0, 0.5);
    outline: 2px solid rgb(95, 91, 91);
  }
#close-crossred {
  position: absolute;
top: 2px;
right: 120px;
  cursor: pointer;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7); 
}
#white-barred{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background-color: rgb(232, 226, 226);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}



#hautdelapage.visible {
  opacity: 1;
  pointer-events: auto;

    }