* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial,Helvetica,sans-serif;
}

body {
  height:100vh;
  overflow:hidden;
}


/* STADIUM */
.background {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url("assets/stadium-hero.png");
  background-size:cover;
  background-position:center;
  filter:blur(1px) brightness(99%);
  transform:scale(1.08);
}


/* DARK OVERLAY */
.overlay {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.45);
}


/* LOGIN CARD */
.login-card {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:430px;
  padding:50px;
  background:rgba(20,20,20,.85);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.05);
  border-radius:18px;
  box-shadow:0px 0px 30px rgba(0,0,0,.45);
  text-align:center;
  z-index:100;
}


/* LOGO */
.logo {
  width:120px;
  margin-bottom:25px;
}


/* TITLES */
h1 {
  color:white;
  font-size:34px;
  margin-bottom:10px;
}

p {
  color:#b8b8b8;
  margin-bottom:35px;
}


/* INPUT */
input {
  width:100%;
  padding:16px;
  margin-bottom:18px;
  background:#2c2c2c;
  border:none;
  border-radius:8px;
  color:white;
  font-size:15px;
}

input:focus {
  outline:none;
  border:1px solid #c8a64d;
}


/* BUTTON */

button {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 16px;
  background: linear-gradient(180deg, #f4c85d 0%, #e0a42a 42%, #b8860b 100%);
  color: #080808;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .035em;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  box-shadow: 0 12px 35px rgba(184, 134, 11, .32), inset 0 1px 0 rgba(255, 255, 255, .34);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  animation: goldPulse 2.8s infinite ease-in-out;
}

button::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .55) 42%, rgba(255, 255, 255, .18) 50%, transparent 62%);
  transform: translateX(-135%);
  transition: transform .55s ease;
  pointer-events: none;
}

button:hover {
  transform: translateY(-3px) scale(1.035);
  filter: saturate(1.12);
  box-shadow: 0 0 10px rgba(255, 224, 107, .58), 0 0 26px rgba(255, 194, 48, .46), 0 0 54px rgba(255, 174, 0, .30), 0 16px 42px rgba(184, 134, 11, .35), inset 0 1px 0 rgba(255, 255, 255, .42);
}

button:hover::before {
  transform: translateX(135%);
}

@keyframes goldPulse {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(255, 210, 70, .18), 0 12px 35px rgba(184, 134, 11, .25);
  }

  50% {
    box-shadow: 0 0 18px rgba(255, 210, 70, .48), 0 0 38px rgba(255, 184, 28, .22), 0 12px 35px rgba(184, 134, 11, .32);
  }
}

/* LINKS */
.forgot {
  display:block;
  margin-top:18px;
  color:#c8a64d;
  text-decoration:none;
}

.create {
  margin-top:28px;
  color:#999;
}

.create a {
  color:#c8a64d;
  text-decoration:none;
  font-weight:bold;
}