:root{

--gold:#b89057;
--gold-light:#d6b882;

--panel:#111111ee;

--text:#d8c7a2;

--border:rgba(184,144,87,.25);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Cormorant Garamond',serif;

color:var(--text);

background:
linear-gradient(rgba(4,4,4,.85),rgba(4,4,4,.85)),
url("https://radrians.neocities.org/szałasy.jpg");

background-size:cover;
background-position:center;
background-attachment:fixed;

overflow-x:hidden;
}

/* SIDE DECORATIONS */

.side-decoration{

    position:fixed;
    top:50%;
    transform:translateY(-50%);
    z-index:100;

    color:#c59b59;
    font-size:1.4rem;
    line-height:2.2;
    text-align:center;

    opacity:.8;

    pointer-events:none;

    text-shadow:0 0 6px rgba(255,186,74,.4);
}

.left-decoration{ left:25px; }
.right-decoration{ right:25px; }


/* FRAME */

.side-border{

position:fixed;

top:0;
bottom:0;

width:110px;

z-index:1;

pointer-events:none;
}

.left{

left:0;

border-right:1px solid var(--border);

background:
linear-gradient(
to right,
rgba(184,144,87,.10),
transparent);
}

.right{

right:0;

border-left:1px solid var(--border);

background:
linear-gradient(
to left,
rgba(184,144,87,.10),
transparent);
}

.corner{

position:fixed;

width:90px;
height:90px;

border:1px solid rgba(184,144,87,.2);

z-index:1;

pointer-events:none;
}

.tl{
top:15px;
left:15px;
}

.tr{
top:15px;
right:15px;
}

.bl{
bottom:15px;
left:15px;
}

.br{
bottom:15px;
right:15px;
}

/* PAGE */

.page{

max-width:1400px;

margin:auto;

padding:30px;

position:relative;

z-index:2;
}

/* HEADER */

header{

display:flex;

justify-content:space-between;

align-items:center;

padding-bottom:25px;

border-bottom:1px solid var(--border);
}

.logo{

display:flex;

gap:15px;

align-items:center;
}

.logo-symbol{

font-size:40px;

color:var(--gold);
}

.logo h1{

font-family:'Cinzel',serif;

font-size:42px;

letter-spacing:5px;
}

.logo span{

letter-spacing:4px;

font-size:12px;
}

nav ul{

display:flex;

gap:28px;

list-style:none;
}

nav a{

text-decoration:none;

color:var(--text);

font-family:'Cinzel',serif;

font-size:14px;

letter-spacing:2px;

transition:.3s;
}

nav a:hover{

color:var(--gold-light);
}

.dropdown{

position:relative;
}

.submenu{

position:absolute;

top:100%;

left:0;

background:#111;

border:1px solid var(--border);

display:none;

min-width:220px;
}

.submenu li{

display:block;
}

.submenu a{

display:block;

padding:12px;
}

.dropdown:hover .submenu{

display:block;
}

.nav-icons{

display:flex;

gap:10px;
}

.nav-icons button{

background:none;

border:1px solid var(--gold);

color:var(--gold);

padding:10px;

cursor:pointer;
}
/* HERO */

.page-header{

height:350px;

margin-top:25px;

position:relative;

overflow:hidden;

border:1px solid rgba(184,144,87,.2);

background:
url("images/subspecies-banner.jpg");

background-size:cover;
background-position:center;
}

.overlay{

position:absolute;

inset:0;

background:
linear-gradient(
rgba(0,0,0,.7),
rgba(0,0,0,.8)
);
}

.header-content{

position:relative;

z-index:2;

padding:80px;
}

.header-content span{

letter-spacing:6px;

font-family:'Cinzel',serif;
}

.header-content h2{

font-family:'Cinzel',serif;

font-size:80px;

margin:15px 0;
}

.header-content p{

font-size:24px;
}

/* SUBSPECIES */

.subspecies-container{

margin-top:30px;
}

.subspecies-card{

margin-bottom:25px;

border:1px solid rgba(184,144,87,.2);

background:var(--panel);
}

.dropdown-btn{

width:100%;

padding:25px;

background:none;

border:none;

color:var(--gold-light);

font-family:'Cinzel',serif;

font-size:24px;

text-align:left;

cursor:pointer;

display:flex;

justify-content:space-between;
}

.dropdown-content{

max-height:0;

overflow:hidden;

transition:.5s ease;

display:grid;

grid-template-columns:450px 1fr;
}

.dropdown-content.active{

max-height:1200px;
}

.species-image{

min-height:420px;

background-size:cover;
background-position:center;
}

.image1{
background-image:url("images/species1.jpg");
}

.image2{
background-image:url("images/species2.jpg");
}

.image3{
background-image:url("images/species3.jpg");
}

.species-info{

padding:40px;
}

.species-info h3{

font-family:'Cinzel',serif;

margin-top:20px;

margin-bottom:10px;

color:var(--gold-light);
}

.species-info p{

font-size:22px;

line-height:1.7;
}

/* RESPONSIVE */

@media(max-width:1000px){

.dropdown-content{

grid-template-columns:1fr;
}

.header-content h2{

font-size:50px;
}

}

@media(max-width:700px){

header{

flex-direction:column;

gap:20px;
}

nav ul{

flex-wrap:wrap;

justify-content:center;
}

.header-content{

padding:40px;
}

.header-content h2{

font-size:40px;
}

}