body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  font-size: 3rem;
  margin-bottom: 2rem;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

label {
  font-size: 1.2rem;
}

input {
  padding: 0.5rem;
  color: #FFF;
  font-size: 1.2rem;
  background-color: #30302D;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  padding: 0.5rem 2rem;
  border-radius: 5px;
  border: none;
/*   background-color: #30302D; */
  background: linear-gradient(#30302D, #1E1E1F, #1E1E1E);
  color: #FFF;
  font-size: 1.2rem;
  cursor: pointer;
}

button:hover {
  /* 1. Color Change: Shift the gradient or solid color */
  background: linear-gradient(#3D3D3D, #383838, #121212);

  /* 2. Glow Effect: Increase blur and spread of the shadow */
  /* Syntax: 0 (x) 0 (y) 20px (blur) 5px (spread) color */
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 1.6);

  /* 3. Bonus: Subtle lift effect */
  transform: translateY(-3px);
}

#error-message {
  color: red;
  font-size: 1.2rem;
  margin-top: 1rem;
}

.main-text {
  color: white;
  font-size: 18px;
  /* border: 1px solid black; */
}

.styled-box {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 15px;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  /* 1. Gradient Background */
  /* Syntax: linear-gradient(direction, color1, color2) */
  background: linear-gradient(#30302D, #1E1E1F, #1E1E1E);

  /* 2. Drop Shadow */
  /* Syntax: box-shadow: horizontal vertical blur spread color */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Styles applied ONLY when the mouse is over the box */
.styled-box:hover {
  /* 1. Color Change: Shift the gradient or solid color */
  background: linear-gradient(#3D3D3D, #383838, #121212);
  
  /* 2. Glow Effect: Increase blur and spread of the shadow */
  /* Syntax: 0 (x) 0 (y) 20px (blur) 5px (spread) color */
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 1.6);
  
  /* 3. Bonus: Subtle lift effect */
  transform: translateY(-3px);
}
.rounded-box {
    /* Ensures the element only takes up as much width as its content */
    display: inline-block;

    /* Adds space between the text and the border/background */
    padding: 10px 15px;

    /* Sets the background color of the box */
    background-color: #171717;

    /* Sets the text color */
    color: white;

    /* Adds the rounded corners */
    border-radius: 20px;

    /* Optional: adds a subtle shadow for depth */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    /* Optional: removes default underline if using an <a> tag */
 text-decoration: none;
}