/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

/* Fullscreen Centering Container */
#login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent backdrop */
  
  /* Flexbox to lock it dead center */
  display: flex;
  justify-content: center;
  align-items: center;
  
  z-index: 9999; /* Keeps it above everything else */
}

/* Bigger, Centered Modal */
.login-box {
  background: rgba(20, 20, 20, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  
  /* Increased size & spacing */
  width: 420px;            /* Widened from 300px */
  padding: 40px;           /* Added extra inner padding */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  
  text-align: center;
  color: #fff;
  font-family: monospace;
  box-sizing: border-box;  /* Keeps padding within the width */
}

/* Scaled-up Text Elements */
.login-box h2 {
  margin-top: 0;
  font-size: 24px;         /* Bigger title */
  letter-spacing: 3px;
  color: #00ff66;
}

.input-group {
  margin-bottom: 20px;
  text-align: left;
}

.input-group label {
  display: block;
  font-size: 14px;          /* Bigger label text */
  margin-bottom: 8px;
  opacity: 0.9;
  letter-spacing: 1px;
}

.login-box input {
  width: 100%;
  padding: 14px;            /* Taller input boxes */
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #555;
  border-radius: 8px;
  color: #00ff66;
  font-family: monospace;
  font-size: 16px;          /* Larger typed text */
  outline: none;
}

.login-box button {
  width: 100%;
  padding: 14px;            /* Taller button */
  margin-top: 15px;
  background: #ff0055;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;          /* Bigger button text */
  font-weight: bold;
  cursor: pointer;
  font-family: monospace;
  letter-spacing: 1px;
  transition: background 0.2s ease;
}

.login-box button:hover {
  background: #ff3377;
}

#animated-bg {
  position: fixed;
  top: -10%;
  left: -10%;
  width: 120vw;  /* Extra width so edges don't show when it sways */
  height: 120vh; /* Extra height so edges don't show when it scales */
  z-index: -1;   /* Keeps it behind your text/content */
  pointer-events: none; /* Lets clicks go straight to your site links */

  /* Your tiled GIF background settings */
  background-image: url('https://i.imgur.com/xQxHjAK.gif');
  background-repeat: repeat;


  /* Run the sway & breathe animation infinitely */
  animation: balatroBreathe 6s ease-in-out infinite alternate;
}

/* The Sway & Breathe Keyframes */
@keyframes balatroBreathe {
  0% {
    transform: scale(1) rotate(-1.5deg);
  }
  50% {
    transform: scale(1.08) rotate(1.5deg);
  }
  100% {
    transform: scale(1.02) rotate(-1deg);
  }
}