:root {
        --main-gold: #D4AF37;
        --main-orange: #FF8C00;
        --main-brown: #8B4513;
        --main-gradient: linear-gradient(45deg, #D4AF37, #FF8C00);
        --background: linear-gradient(to right, #8B4513, #D4AF37, #FF8C00);
      }

   
.btn-google {
  background-color: #ffffff;
  color: #444;
  border: 1.5px solid #ddd;
  padding: 0.5rem 1.2rem;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.2s ease-in-out;
}

.btn-google:hover,
.btn-google:focus {
  background-color: #f7f7f7;
  border-color: #bbb;
  color: #333;
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.btn-google i {
  color: #ea4335;
  font-size: 1.3rem;
}

      .rubik-glitch-regular {
        font-family: "Rubik Glitch", system-ui;
        font-weight: 400;
        font-style: normal;
        color: var(--main-brown);
      }

      /* Foam side */
      .foam {
        background: var(--background);
        box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.4);
      }

      /* White form box */
      .box {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        padding: 30px;
        width: 80%;
        max-width: 450px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .box:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
      }

      /* Inputs */
      .form-controls {
        outline: none;
        border: 2px solid var(--main-gold);
        border-radius: 12px;
        width: 100%;
        height: 45px;
        padding: 0 15px;
        transition: 0.3s ease;
      }

      .form-controls:focus {
        border-color: var(--main-orange);
        box-shadow: 0 0 10px var(--main-orange);
      }

      label {
        font-weight: bold;
        color: var(--main-brown);
      }

      /* Button */
      .btn-warning {
        background: var(--main-gradient);
        border: none;
        border-radius: 12px;
        font-weight: bold;
        padding: 10px 30px;
        transition: 0.3s ease;
      }

      .btn-warning:hover {
        background: linear-gradient(45deg, #FF8C00, #D4AF37);
        box-shadow: 0 5px 15px rgba(0,0,0,0.4);
      }
    .register-text {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: #555;
  margin-top: 15px;
}

.register-text a {
  color: var(--main-orange);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.register-text a:hover {
  color: var(--main-gold);
  text-decoration: underline;
}