html, body {
  overflow-y: auto !important;
  height: auto;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0; 
  background-color: #000000; 
}

.moving-background {
  position: fixed;
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
  background: repeating-conic-gradient(black 0% 25%, white 0% 50%) 50% / 100px 100px;
  animation: diagonal_move 2s linear infinite; 
  z-index: -1;
  pointer-events: none;
}

@keyframes diagonal_move {
  0% { transform: translate(0, 0); }
  100% { transform: translate(100px, 100px); }
}

h1 {
  position: relative;
  text-align: center;
  color: white;
  font-family: sans-serif;
  padding-top: 50px;
}

.main-header {
  background-image: url('https://files.catbox.moe/jl9860.png');
  background-size: cover;      
  background-position: center; 
  height: 400px;               
  color: white; 
  display: flex;
  align-items: center;         
  justify-content: center;     
}

.text-backdrop {
  background-color: rgba(230, 230, 230, 0.7);
  padding: 20px;            
  border-radius: 5px;      
  text-align: center;
  max-width: 600px;        
  width: 90%;              
  margin: 0 auto;          
}