@font-face {
  font-family: 'FetteTrumpDeutsch';
  /* Make sure the file paths exactly match your folder structure */
  src: url('fonts/FetteTrumpDeutsch.ttf') format('truetype'); 
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #00b6ff; /* Your custom blue */
  color: #fff;
  font-family: 'FetteTrumpDeutsch', sans-serif;
  overflow: hidden;
  
  /* Flexbox to center the gate */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

canvas { 
  display: block; 
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* Puts canvas in the background */
}

/* Password gate */
#gate {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #00b6ff; /* Solid background to hide the visualizer */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Guarantees it sits on top of everything */
}
/* FIX: Force headers, inputs, and buttons to obey your custom font! */
h2, input, button, p {
  font-family: 'FetteTrumpDeutsch', sans-serif;
}

input, button { 
  padding: 10px; 
  margin: 10px 0; 
  font-size: 16px; 
  /* Optional: make the input box look a bit cleaner on the blue background */
  border: 2px solid #fff;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1); 
  color: #fff;
}

button {
  background: #fff;
  color: #00b6ff;
  cursor: pointer;
  font-weight: bold;
}

#error { 
  color: #ff5555; 
  height: 20px; 
  margin-top: 10px; 
  font-size: 18px;
}

#content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}