/* ===========================
        Index Page
        Hero + Scroll
=========================== */


/* ===========================
        Hero Section
=========================== */


.hero{

    width:100%;

    max-width:1300px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:2.5rem;

    align-items:center;

    margin:auto;

}



.hero-image{

    width:100%;

    max-width:500px;

    justify-self:center;

    filter:
    drop-shadow(0 0 15px rgba(70,255,120,.15))
    drop-shadow(0 0 35px rgba(255,255,255,.08));
}



/* ===========================
        Quest Buttons
=========================== */


.quest-buttons{

    display:flex;

    flex-direction:column;

    gap:1rem;

    margin-top:2rem;

}



/* ===========================
        Index Responsive
=========================== */


@media (max-width:900px){


.hero{

    grid-template-columns:1fr;

    text-align:center;

}



.hero-image{

    max-width:320px;

}



.scroll{

    padding:2rem;

}



}



@media (max-width:600px){


.scroll h2{

    font-size:1.6rem;

}



.scroll p{

    font-size:1.15rem;

}



.quest-button{

    font-size:.95rem;

    padding:.9rem;

}


}


/* ===========================
        Guild Signup
=========================== */


.interest-form{

    width:100%;

    text-align:center;

    margin-top:3rem;

}



.interest-form h2{

    font-family:"Cinzel", serif;

    color:var(--gold);

    letter-spacing:2px;

    font-size:2rem;

    margin-bottom:1rem;

}



.interest-form p{

    color:#f7f2e8;

    font-size:1.2rem;

    margin-bottom:1.5rem;

}



.interest-form form{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

}



.interest-form input{

    width:260px;

    padding:.8rem 1rem;

    border-radius:8px;

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

    background:#171b18;

    color:white;

    font-family:"Cormorant Garamond", serif;

    font-size:1.1rem;

}



.interest-form input::placeholder{

    color:#bca66f;

}



.interest-form button{

    padding:.8rem 1.5rem;

    border-radius:8px;

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

    background:linear-gradient(
        180deg,
        #6b5031,
        #3d2a19
    );

    color:var(--gold-light);

    font-family:"Cinzel", serif;

    cursor:pointer;

    transition:.25s;

}



.interest-form button:hover{

    transform:translateY(-3px);

}