@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:wght@400;500;600&family=Special+Elite&display=swap');

*{
box-sizing:border-box;
scrollbar-width:thin;
scrollbar-color:#D1004A #03040A;
}

::-webkit-scrollbar{
width:12px;
}

::-webkit-scrollbar-track{
background:#03040A;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(
180deg,
#130814,
#7A001F,
#1E3A8A,
#090C17
);
border-radius:20px;
border:1px solid #1A1F38;
box-shadow:
0 0 12px rgba(209,0,74,.45),
0 0 18px rgba(77,163,255,.22);
}

html,body{
margin:0;
padding:0;
background:url('images/bg.jpg');
background-repeat:repeat;
color:#DDE7FF;
font-family:'Cormorant Garamond',serif;
overflow-x:hidden;
}

#header{
background:url('images/head.jpg'),url('images/bg1.jpg');
height:659px;background-repeat:no-repeat,repeat-x;
width:100%;
position:relative;background-position:center;
}

#navigation{
width:max-content;
margin:-270px auto 0;
display:flex;
justify-content:center;
align-items:center;
gap:42px;
padding:30px 65px;
position:relative;
background:rgba(7,10,22,.72);
backdrop-filter:blur(22px);
border-radius:999px;
border:1px solid rgba(77,163,255,.16);
box-shadow:
0 0 50px rgba(0,0,0,.95),
0 0 25px rgba(209,0,74,.16),
0 0 40px rgba(77,163,255,.12),
inset 0 0 18px rgba(255,255,255,.02);
}

#navigation::before{
content:"";
position:absolute;
inset:-18px;
border-radius:999px;
background:
radial-gradient(circle,
rgba(209,0,74,.16) 0%,
rgba(77,163,255,.08) 35%,
transparent 72%);
filter:blur(24px);
z-index:-1;
}

#navigation::after{
content:"⚡ · ⚡ · ⚡";
position:absolute;
top:-26px;
left:50%;
transform:translateX(-50%);
font-size:14px;
letter-spacing:10px;
color:rgba(77,163,255,.55);
text-shadow:
0 0 10px rgba(77,163,255,.5),
0 0 18px rgba(209,0,74,.35);
}

#navigation a{
font-family:'Cinzel Decorative',serif;
font-size:16px;
font-weight:700;
letter-spacing:.24em;
text-transform:uppercase;
color:#B8C6E3;
padding:10px 4px;
position:relative;
transition:
color .45s ease,
transform .45s ease,
text-shadow .45s ease;
}

#navigation a:hover{
color:#F5F8FF;
transform:translateY(-2px);
text-shadow:
0 0 12px rgba(77,163,255,.7),
0 0 24px rgba(209,0,74,.45);
}

#navigation a::before{
content:"";
position:absolute;
left:50%;
bottom:-8px;
transform:translateX(-50%);
width:0%;
height:2px;
border-radius:999px;
background:linear-gradient(
90deg,
transparent,
#D1004A,
#4DA3FF,
transparent
);
box-shadow:
0 0 12px rgba(77,163,255,.5),
0 0 12px rgba(209,0,74,.4);
transition:.5s ease;
}

#navigation a:hover::before{
width:115%;
}

#navigation a::after{
content:"✦";
position:absolute;
left:50%;
top:-10px;
transform:translateX(-50%) translateY(4px);
opacity:0;
font-size:16px;
color:#4DA3FF;
transition:.45s ease;
}

#navigation a:hover::after{
opacity:1;
transform:translateX(-50%) translateY(0);
text-shadow:
0 0 12px rgba(77,163,255,.8),
0 0 18px rgba(209,0,74,.4);
}

#content{
width:60%;
margin:auto;
}

.contentx{
margin:0px auto 20px;
padding:50px;
font-size:21px;
line-height:2;
text-align:justify;
position:relative;
}

h1{
font-family:'Cinzel Decorative',serif;
font-size:36px;
font-weight:700;
text-align:center;
text-transform:uppercase;
letter-spacing:5px;
color:#F2F6FF;
margin-bottom:60px;
text-shadow:
0 0 18px rgba(77,163,255,.35),
0 0 30px rgba(209,0,74,.2),
4px 4px 18px rgba(0,0,0,.95);
}

blockquote{
margin:90px auto;
padding:60px 80px;
max-width:780px;
background:linear-gradient(
145deg,
rgba(15,20,40,.95),
rgba(7,8,15,.98)
);
border-left:2px solid #D1004A;
border-right:1px solid rgba(77,163,255,.2);
color:#D7E2FF;
font-style:italic;
font-size:28px;
position:relative;
opacity:.92;
box-shadow:
0 0 30px rgba(209,0,74,.08),
0 0 25px rgba(77,163,255,.08);
}

blockquote::before{
content:"⚡";
position:absolute;
top:-24px;
left:24px;
font-size:68px;
color:rgba(77,163,255,.16);
text-shadow:0 0 20px rgba(77,163,255,.4);
font-family:'Special Elite',cursive;
}

textarea,input,select{
width:42%;
padding:1.4rem 1.8rem;
background:linear-gradient(
180deg,
#0E1324,
#070A14
);
border:1px solid rgba(77,163,255,.18);
border-radius:999px;
color:#F2F6FF;
font-family:'Cormorant Garamond',serif;
font-size:18px;
transition:.35s ease;
box-shadow:
inset 0 0 12px rgba(0,0,0,.85),
0 0 10px rgba(77,163,255,.04);
}

textarea:focus,
input:focus,
select:focus{
outline:none;
border-color:#4DA3FF;
box-shadow:
0 0 20px rgba(77,163,255,.25),
0 0 30px rgba(209,0,74,.18),
inset 0 0 14px rgba(255,255,255,.03);
}

a{
color:#4DA3FF;
text-decoration:none;
position:relative;
transition:color .3s ease;
}

a:hover{
color:#F5F8FF;
}

a::before{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:100%;
height:1px;
background:linear-gradient(
to right,
transparent,
#D1004A,
#4DA3FF,
transparent
);
transform:scaleX(0);
transition:.35s ease;
}

a:hover::before{
transform:scaleX(1);
}

i,em{
color:#D1004A;
font-style:italic;
letter-spacing:.03em;
text-shadow:0 0 10px rgba(209,0,74,.25);
}

b,strong{
color:#F4F7FF;
font-weight:600;
padding:4px 14px;
border:1px solid rgba(77,163,255,.12);
background:linear-gradient(
180deg,
rgba(20,28,50,.75),
rgba(10,12,20,.9)
);
box-shadow:
0 8px 18px rgba(0,0,0,.6),
0 0 16px rgba(77,163,255,.08);
}

#footer{
margin:140px auto 0px;
padding:90px 40px 60px;
text-align:center;
position:relative;
overflow:hidden;
background:
linear-gradient(
180deg,
rgba(8,10,20,.65),
rgba(3,4,10,.96)
);
border-top:1px solid rgba(77,163,255,.14);
box-shadow:
0 -20px 60px rgba(0,0,0,.85),
inset 0 1px 0 rgba(255,255,255,.03);
}

#footer::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:72%;
height:1px;
background:linear-gradient(
to right,
transparent,
#4DA3FF,
#D1004A,
transparent
);
box-shadow:
0 0 18px rgba(77,163,255,.45),
0 0 24px rgba(209,0,74,.3);
}

#footer .footer-title{
font-family:'Cinzel Decorative',serif;
font-size:18px;
letter-spacing:.45em;
text-transform:uppercase;
color:#EAF1FF;
margin-bottom:30px;
text-shadow:
0 0 12px rgba(77,163,255,.3),
0 0 20px rgba(209,0,74,.18);
}

#footer .footer-quote{
max-width:700px;
margin:0 auto 34px;
font-size:20px;
line-height:1.8;
font-style:italic;
color:#9AA7CC;
opacity:.92;
}

#footer nav{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:26px;
margin-bottom:38px;
}

#footer a{
font-family:'Cinzel Decorative',serif;
font-size:13px;
letter-spacing:.22em;
text-transform:uppercase;
color:#AFC8FF;
position:relative;
padding-bottom:6px;
transition:
color .35s ease,
text-shadow .35s ease,
transform .35s ease;
}

#footer a:hover{
color:#FFFFFF;
transform:translateY(-2px);
text-shadow:
0 0 10px rgba(77,163,255,.55),
0 0 20px rgba(209,0,74,.3);
}

#footer a::before{
content:"";
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%);
width:0%;
height:1px;
background:linear-gradient(
90deg,
#4DA3FF,
#D1004A
);
transition:.4s ease;
box-shadow:
0 0 12px rgba(77,163,255,.4),
0 0 12px rgba(209,0,74,.25);
}

#footer a:hover::before{
width:110%;
}

#footer .footer-copy{
font-size:12px;
letter-spacing:.28em;
text-transform:uppercase;
color:#6D7797;
opacity:.9;
}

#footer .footer-copy span{
color:#D1004A;
text-shadow:0 0 8px rgba(209,0,74,.45);
}

@media(max-width:768px){

#footer{
padding:80px 24px 50px;
}

#footer .footer-title{
font-size:14px;
letter-spacing:.28em;
}

#footer .footer-quote{
font-size:17px;
line-height:1.6;
}

#footer nav{
gap:18px;
}

#footer a{
font-size:11px;
}

#footer .footer-copy{
font-size:10px;
letter-spacing:.18em;
}

}

@media(max-width:768px){

#navigation{
width:92%;
flex-wrap:wrap;
gap:18px;
padding:22px 26px;
}

#navigation a{
font-size:12px;
letter-spacing:.16em;
}

.contentx{
padding:40px 28px;
font-size:20px;
}

h1{
font-size:38px;
letter-spacing:3px;
}

blockquote{
padding:40px 30px;
font-size:22px;
}

textarea,input,select{
width:80%;
}

}