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


body{
    background:#050505;
    color:white;
    font-family:"Inter",sans-serif;
    font-weight:100;
}


.container{
    max-width:900px;
    margin:auto;
    padding:60px 20px;
    text-align:center;
}


/* TITLE */

h1{
    font-family:"UnifrakturCook",cursive;
    font-size:3rem;
    font-weight:700;
    color:white;
    margin-bottom:10px;

    text-shadow:
    0 0 15px rgba(255,255,255,.15),
    0 0 35px rgba(255,255,255,.08);
}


h2{
    font-weight:100;
    font-size:1rem;
    letter-spacing:6px;
    opacity:.85;
    margin-bottom:8px;
    text-transform:uppercase;
}


h3{
    font-weight:100;
    font-size:1rem;
    letter-spacing:5px;
    opacity:.55;
    margin-bottom:45px;
}



/* MAIN ART */

.hero-art{
    display:flex;
    justify-content:center;
}


.hero-art img{
    width:30%;
    max-width:750px;
    height:auto;
}



/* GALLERY */

.gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    margin-bottom:45px;
}


.gallery img{
    width:100%;
    height:auto;
    display:block;
}


.album{
    text-align:center;
}


.album h4{
    margin-top:20px;
    font-size:18px;
    letter-spacing:5px;
    text-transform:uppercase;
    font-weight:200;
}


.album p{
    margin-top:15px;
    font-size:13px;
    line-height:1.8;
    letter-spacing:2px;
    font-weight:200;
    opacity:.65;
}


.art{
    display:flex;
    align-items:center;
}



/* SOCIAL BUTTONS */

.buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
}


.buttons a{

    width:100px;
    padding:18px;

    background:#131313;

    border:1px solid #252525;

    border-radius:1px;

    color:white;

    text-decoration:none;

    font-size:1.1rem;

    transition:.25s;
}


.buttons a:hover{

    transform:translateY(-4px);

    background:#1b1b1b;

    border-color:#555;

    box-shadow:0 0 25px rgba(255,255,255,.08);

}


.buttons i{

    font-size:1.4rem;

}



/* MOBILE */

@media(max-width:700px){

    h1{
        font-size:5rem;
    }


    h2{
        font-size:.8rem;
        letter-spacing:3px;
    }


    h3{
        font-size:.7rem;
        letter-spacing:3px;
    }


    .gallery{
        grid-template-columns:1fr;
    }


    .hero-art img{
        width:95%;
    }


    .buttons a{
        width:70px;
        padding:15px;
    }

}