.rules-hero{
height:90vh;
min-height:890px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:
linear-gradient(
180deg,
rgba(5,8,20,.2),
#050814
),
url("/img/fondofinalPA.png");
background-size:cover;
background-position:center;
}

.rules-hero:after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:220px;
background:linear-gradient(transparent,#050814);
}

.stellar-rules-hero-content{
position:relative;
z-index:2;
max-width:1000px;
width:100%;
padding:20px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
animation:stellarHeroContent 1s cubic-bezier(.22,1,.36,1) forwards;
}

.stellar-rules-title{
font-family:"Orbitron",sans-serif;
font-size:120px;
font-weight:1000;
letter-spacing:-4px;
background:
linear-gradient(
90deg,
#ffffff,
#64dcff,
#9b7bff
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
opacity:0;
transform:translateY(60px) scale(.95);
filter:blur(12px);
animation:stellarRulesTitle 1s cubic-bezier(.22,1,.36,1) forwards;
}

.stellar-rules-description{
margin-top:25px;
padding:25px 35px;
max-width:750px;
border-radius:24px;
position:relative;
background:
linear-gradient(
145deg,
rgba(255,255,255,.13),
rgba(255,255,255,.04)
);
border:1px solid rgba(255,255,255,.16);
box-shadow:
inset 0 5px 15px rgba(255,255,255,.18),
inset 0 -15px 30px rgba(0,0,0,.4),
0 25px 60px rgba(0,0,0,.45);
backdrop-filter:blur(25px);
color:#e4ebff;
font-size:20px;
font-weight:500;
line-height:1.6;
opacity:0;
transform:translateY(40px);
filter:blur(10px);
animation:stellarRulesDescription 1s cubic-bezier(.22,1,.36,1) .25s forwards;
}

.rules-description:before,
.rules-description:after{
content:"";
position:absolute;
top:25px;
bottom:25px;
width:2px;
background:
linear-gradient(
180deg,
transparent,
#64dcff,
#52ffe0,
transparent
);
}

.rules-description:before{
left:0;
}

.rules-description:after{
right:0;
}


.rules-section{
padding:100px 40px 220px;
background:#050814;
}


.rules-container{
max-width:950px;
margin:auto;
}


.rules-page{
padding:45px;
border-radius:35px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.13),
rgba(255,255,255,.05)
);
border:1px solid rgba(255,255,255,.16);
box-shadow:
inset 0 5px 15px rgba(255,255,255,.15),
inset 0 -15px 30px rgba(0,0,0,.35),
0 30px 60px rgba(0,0,0,.4);
backdrop-filter:blur(18px);
animation:openRules .9s ease;
}


.rules-page h2{
font-family:"Orbitron",sans-serif;
font-size:44px;
font-weight:900;
text-align:center;
margin-bottom:40px;
letter-spacing:2px;
background:
linear-gradient(
90deg,
#fff,
#64dcff,
#9b7bff
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}


.rules-page>p{
font-size:17px;
font-weight:500;
line-height:1.7;
text-align:center;
color:#bcc7e5;
margin-bottom:40px;
}


.rule-box{
padding:25px;
margin-bottom:25px;
border-radius:22px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);
border:1px solid rgba(255,255,255,.12);
transition:.35s;
}


.rule-box:hover{
transform:translateY(-8px);
border-color:#64dcff;
box-shadow:
0 0 35px rgba(100,220,255,.25),
inset 0 5px 15px rgba(255,255,255,.15);
}


.rule-box h3{
font-family:"Orbitron",sans-serif;
font-size:22px;
font-weight:900;
color:#64dcff;
margin-bottom:15px;
}


.rule-box p{
font-size:15px;
font-weight:500;
line-height:1.7;
color:#bcc7e5;
}


.contact-box{
margin-top:50px;
padding:30px;
border-radius:28px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.13),
rgba(255,255,255,.05)
);
border:1px solid rgba(255,255,255,.16);
box-shadow:
inset 0 5px 15px rgba(255,255,255,.15),
inset 0 -15px 30px rgba(0,0,0,.35),
0 25px 60px rgba(0,0,0,.4);
backdrop-filter:blur(20px);
text-align:center;
}


.contact-box p{
font-size:17px;
font-weight:500;
line-height:1.7;
color:white;
}


.discord-link{
font-family:"Orbitron",sans-serif;
font-weight:900;
background:
linear-gradient(
90deg,
#52ffe0,
#64dcff,
#9b7bff
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-decoration:none;
}


@keyframes heroContent{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}


@keyframes heroTitle{
from{
opacity:0;
transform:translateY(60px) scale(.95);
filter:blur(12px);
}
to{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}
}


@keyframes heroDescription{
from{
opacity:0;
transform:translateY(40px);
filter:blur(10px);
}
to{
opacity:1;
transform:translateY(0);
filter:blur(0);
}
}


@keyframes openRules{
from{
opacity:0;
transform:scaleY(.8);
}
to{
opacity:1;
transform:scaleY(1);
}
}


@media(max-width:1000px){

.rules-title{
font-size:70px;
}

.rules-description{
font-size:15px;
padding:22px;
}

}


@media(max-width:600px){

.rules-hero{
min-height:500px;
}

.rules-title{
font-size:45px;
}

.rules-description{
font-size:15px;
padding:20px;
}

.rules-page{
padding:30px;
}

.rules-page h2{
font-size:30px;
}

}

@keyframes stellarHeroContent{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}


@keyframes stellarRulesTitle{

from{
opacity:0;
transform:translateY(60px) scale(.95);
filter:blur(12px);
}

to{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}

}


@keyframes stellarRulesDescription{

from{
opacity:0;
transform:translateY(40px);
filter:blur(10px);
}

to{
opacity:1;
transform:translateY(0);
filter:blur(0);
}

}