@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:#b07a4a #f4d6b0;
}

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

::-webkit-scrollbar-track{
background:#f7e0c3;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,#c98a4a,#a5642f,#7a4a1f);
border-radius:20px;
border:1px solid rgba(90,50,20,.2);
}

html,body{
margin:0;
padding:0;
background:radial-gradient(circle at top,#ffe7c8 0%,#f6d2a8 40%,#efc08a 75%,#e6b073 100%);
color:#3b2a1f;
font-family:'Cormorant Garamond',serif;
overflow-x:hidden;
}

#header{
background-image:url('images/head.jpg');
background-position:center;
background-repeat:no-repeat;
height:683px;
width:100%;
background-color:#0E0E0E;
position:relative;
overflow:hidden;
}

#navigation{
position:fixed;
top:0;
left:0;
width:100%;
height:92px;
z-index:9999;
display:flex;
justify-content:center;
align-items:center;
gap:28px;
padding:0 60px;
background:linear-gradient(145deg,rgba(255,248,238,.92),rgba(245,220,190,.85));
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(120,70,30,.18);
box-shadow:0 10px 30px rgba(90,50,20,.12);
}

#navigation::after{
content:"SPQR • ROMA • AUREA";
position:static;
transform:none;
font-size:10px;
letter-spacing:.55em;
text-transform:uppercase;
color:rgba(90,55,30,.45);
margin-left:18px;
white-space:nowrap;
pointer-events:none;
}

#navigation a{
font-family:'Cinzel Decorative',serif;
font-size:13px;
font-weight:700;
letter-spacing:.28em;
text-transform:uppercase;
color:#5a3a22;
padding:10px 6px;
transition:.35s ease;
}

#navigation a:hover{
color:#a45a2a;
text-shadow:0 0 12px rgba(160,90,40,.18);
transform:translateY(-1px);
}

#navigation .divider{
width:1px;
height:28px;
background:linear-gradient(to bottom,transparent,rgba(120,70,30,.25),transparent);
}

body{
padding-top:92px;
}

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

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

h1{
font-family:'Cinzel Decorative',serif;
font-size:36px;
font-weight:700;
text-align:center;
text-transform:uppercase;
letter-spacing:5px;
color:#4a2e1a;
margin-bottom:60px;
position:relative;
}

h1::after{
content:"";
display:block;
width:220px;
height:2px;
margin:22px auto 0;
background:linear-gradient(to right,transparent,rgba(160,90,40,.5),transparent);
}

blockquote{
margin:90px auto;
padding:60px 80px;
max-width:780px;
background:linear-gradient(145deg,rgba(255,250,240,.85),rgba(255,235,210,.7));
border-left:3px solid rgba(140,80,40,.6);
color:#4a3322;
font-style:italic;
font-size:28px;
box-shadow:0 10px 30px rgba(80,40,20,.08),inset 0 0 25px rgba(255,255,255,.3);
}

blockquote::before{
content:"❝";
position:absolute;
top:-30px;
left:25px;
font-size:90px;
color:rgba(140,80,40,.18);
font-family:'Special Elite',cursive;
}

textarea,input,select{
width:42%;
padding:1.4rem 1.8rem;
background:linear-gradient(180deg,#fff5e8,#f7e0c3);
border:1px solid rgba(120,70,30,.25);
border-radius:999px;
color:#3b2a1f;
font-size:18px;
box-shadow:inset 0 0 10px rgba(0,0,0,.05);
}

textarea:focus,input:focus,select:focus{
outline:none;
border-color:#c07a3a;
box-shadow:0 0 18px rgba(180,100,40,.18);
}

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

a::after{
content:"";
position:absolute;
left:0;
bottom:-3px;
width:100%;
height:1px;
background:linear-gradient(to right,transparent,rgba(160,90,40,.7),transparent);
transform:scaleX(0);
transition:.35s ease;
}

a:hover{
color:#a85a2c;
letter-spacing:.02em;
}

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

i,em{
color:#a86a3f;
font-style:italic;
opacity:.85;
letter-spacing:.02em;
text-shadow:0 1px 0 rgba(255,255,255,.4);
}

i::before,em::before{
content:"✎ ";
color:rgba(160,100,60,.5);
}

b,strong{
color:#3f2a1b;
font-weight:700;
padding:4px 14px;
background:linear-gradient(180deg,rgba(255,245,230,.85),rgba(235,210,180,.75));
border:1px solid rgba(120,70,30,.25);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px rgba(80,40,20,.12);
text-transform:uppercase;
letter-spacing:.06em;
}

#footer{
margin:2px auto 50px;
padding:30px 20px;
text-align:center;
letter-spacing:.35em;
text-transform:uppercase;
color:#6b4a34;
position:relative;
}

#footer::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:500px;
height:1px;
background:linear-gradient(to right,transparent,rgba(160,90,40,.5),transparent);
}

#footer::after{
content:"SPQR • ROMA AETERNA";
display:block;
margin-top:24px;
font-size:11px;
letter-spacing:.5em;
color:rgba(140,80,40,.45);
}

#footer a{
margin:0 16px;
color:#8a5a35;
}

#footer a:hover{
color:#b06a3a;
}

@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%;
}
}