body{

    margin:0;

    color:#e4c998;

    font-family:Georgia, serif;

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

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

/* ==========================
   SITE CONTENT WIDTH
========================== */

.hero,
.nav-buttons,
.intro-section,
.container{

    width:90%;
    max-width:1400px;
    margin-left:auto;
    margin-right:auto;
}

/* MAIN WRAPPER */
.container{
    padding:30px 0;
    margin:auto;
}

/* 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; }

/* HERO */

.hero{

    height:300px;

    background-image:url("https://radrians.neocities.org/the%20hunt.jpg");
    background-size:cover;
    background-position:center;

    border:1px solid #8b5a18;
    border-radius:12px;

    overflow:hidden;
    position:relative;
}

.hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.55);
}

.hero-content{

    position:relative;
    z-index:1;

    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.hero h1{

    margin:0;
    color:white;
    letter-spacing:5px;
    font-size:3rem;
}

.hero p{
    color:#c59b59;
}

/* NAV */

.nav-buttons{

    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;

    gap:10px;

    margin-top:15px;
    margin-bottom:25px;
}

.nav-buttons button{

    flex:1;
    min-width:110px;

    padding:14px;

    background:#130905;
    color:#e4c998;

    border:1px solid #8b5a18;
    border-radius:8px;

    cursor:pointer;
    transition:.3s;
}

.nav-buttons button:hover,
.nav-buttons button.active{

    background:#2c1508;
    color:white;
    transform:translateY(-2px);
}

/* INTRO SECTION */

.intro-section{

    display:grid;
    grid-template-columns:1fr 1.2fr;

    gap:12px;

    margin-top:10px;
    margin-bottom:35px;

    padding:30px;

    background:#130905;

    border:1px solid #8b5a18;
    border-radius:12px;
}

/* IMAGE */

.intro-image{
    overflow:hidden;
    border-radius:12px;
}

.intro-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* CONTENT */

.intro-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.intro-content h2{
    margin:0;
    color:white;
    letter-spacing:3px;
    text-transform:uppercase;
}

.intro-content p{
    line-height:1.8;
}

/* SUBTABS */

.subtabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:12px 0;
}

.subtabs button{

    background:#221108;
    border:1px solid #8b5a18;

    color:#e4c998;

    padding:8px 12px;
    border-radius:6px;

    cursor:pointer;
}

.subtabs button:hover{
    background:#2c1508;
    color:white;
}

/* PAGEDOLL */

#pagedoll{

    position:fixed;

    left:15px;
    bottom:15px;

    z-index:9999;

    cursor:pointer;
}

#pagedoll img{

    width:140px;
    transition:.3s;
}

#pagedoll.bounce img{
    animation:bounce .8s;
}

@keyframes bounce{

    0%{transform:translateY(0);}
    30%{transform:translateY(-30px);}
    60%{transform:translateY(0);}
    80%{transform:translateY(-12px);}
    100%{transform:translateY(0);}
}

/* MOBILE */

@media(max-width:900px){

    .intro-section{
        grid-template-columns:1fr;
    }

    .nav-buttons button{
        min-width:45%;
    }
}