@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.ttf') format('truetype');
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Lato';
}

/* TOP BAR */

.sunbar{
    width:100%;
    background:#c6a300;
    text-align:center;
    padding:0.6rem 0;
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.1em;
}

/* HERO AREA */

.dragonview{
    position:relative;
    width:100%;
    height:94vh;
    overflow:hidden;
}

.dragonview picture,
.dragonview img{
    width:100%;
    height:100%;
    display:block;
}

.dragonview img{
    object-fit:cover;
}

/* OVERLAY */

.shade{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.55);
}

/* AGE BOX */

.vault{
    position:absolute;
    top:45%;
    left:50%;
    transform:translate(-50%,-50%);
    background:rgba(0,0,0,0.3);
    padding:1.5rem 2rem;
    border-radius:0.6rem;
    text-align:center;
    width:90%;
    max-width:32rem;
    color:#fff;
}

.vault h2{
    font-size:1.2rem;
    margin-bottom:2rem;
    font-weight:600;
}

/* BUTTON GROUP */

.choices{
    display:flex;
    justify-content:center;
    gap:1.5rem;
}

.choices button{
    border:none;
    padding:0.9rem 2.5rem;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
}

/* BUTTON STYLES */

.goldtap{
    background:#f2c500;
}

.greentap{
    background:#46b37d;
    color:#fff;
}

/* FOOTER */

.blackzone{
    width:100%;
    background:#000;
    padding:1rem 0;
    display:flex;
    justify-content:center;
    align-items:center;
}

.legalarea{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.6rem;
    font-size:1rem;
    color:#fff;
}

.legalarea a{
    color:#fff;
    text-decoration:none;
    font-size:1rem;
}

.legalarea a:hover{
    text-decoration:underline;
}

/* MOBILE */

@media (max-width:768px){

    .vault{
        padding:2rem 1rem;
        width:95%;
    }

    .vault h2{
        font-size:1.5rem;
    }

    .choices button{
        padding:0.7rem 1.5rem;
        font-size:0.9rem;
    }

    .blackzone{
        padding:1.2rem 0;
    }

    .legalarea{
        font-size:0.9rem;
        gap:0.4rem;
    }

}