/* =========================
   WRAPPER
========================= */

.rules-wrapper{
  display:flex;
  justify-content:center;
  padding:120px 20px 60px;
}

/* =========================
   BOX (MAIN CARD)
========================= */

.rules-box{
  width:100%;
  max-width:900px;

  padding:50px 40px;

  border-radius:20px;

  background:rgba(0,15,25,0.75);
  backdrop-filter:blur(10px);

  border:1px solid rgba(0,255,247,0.7);

  box-shadow:
    0 0 30px rgba(0,255,247,0.3),
    0 0 80px rgba(0,255,247,0.15);

  position:relative;
  z-index:2;
}

/* =========================
   TITLE
========================= */

.rules-box h1{
  text-align:center;
  font-size:32px;

  color:#00fff7;

  text-shadow:
    0 0 10px #00fff7,
    0 0 30px rgba(0,255,247,0.6);

  margin-bottom:10px;
}

.rules-subtitle{
  text-align:center;
  opacity:0.8;
  margin-bottom:40px;
}

/* =========================
   SECTION
========================= */

.rules-section{
  margin-bottom:50px;
}

.rules-section h2{
  color:#00ff88;
  font-size:22px;

  margin-bottom:20px;

  text-shadow:0 0 10px #00ff88;
}

/* =========================
   LIST
========================= */

.rules-section ul{
  list-style:none;
  padding:0;
}

.rules-section li{
  margin-bottom:12px;
  line-height:1.6;

  padding:10px 15px;

  border-radius:10px;

  background:rgba(0,255,247,0.05);

  transition:.2s;
}

.rules-section li:hover{
  background:rgba(0,255,247,0.1);
  transform:translateX(5px);
}

/* =========================
   NAV BUTTONS
========================= */

.rules-nav{
  display:flex;
  justify-content:center;
  gap:20px;

  margin-top:100px;
  margin-bottom:40px;
}

.rules-nav a{
  padding:10px 25px;

  border-radius:30px;

  border:1px solid #00fff7;
  color:#00fff7;

  text-decoration:none;
  font-weight:bold;

  box-shadow:0 0 10px rgba(0,255,247,0.4);

  transition:.25s;
}

.rules-nav a:hover{
  background:#00fff7;
  color:#002525;

  box-shadow:
    0 0 20px #00fff7,
    0 0 40px rgba(0,255,247,0.6);
}

/* =========================
   BACK BUTTON
========================= */

.rules-back{
  margin-top:60px;
  text-align:center;
}

.rules-back a{
  padding:12px 35px;

  border-radius:30px;

  background:#00fff7;
  color:#002525;

  text-decoration:none;
  font-weight:bold;

  box-shadow:0 0 15px #00fff7;

  transition:.25s;
}

.rules-back a:hover{
  transform:scale(1.05);

  box-shadow:
    0 0 25px #00fff7,
    0 0 50px rgba(0,255,247,0.6);
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

  .rules-box{
    padding:30px 20px;
  }

  .rules-box h1{
    font-size:24px;
  }

  .rules-section h2{
    font-size:18px;
  }

  .rules-nav{
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  .rules-nav a{
    width:80%;
    text-align:center;
  }

}