body{
    background:#0f0f0f;
    color:white;
    font-family:sans-serif;
}

/* NAVBAR */

.navbar{
    padding:30px 0;
}

.navbar-brand{
    color:white;
    letter-spacing:4px;
    font-size:1.5rem;
}

.navbar-brand:hover{
    color:white;
}

.return-link{
    color:#999;
    text-decoration:none;
    letter-spacing:2px;
    transition:.3s;
}

.return-link:hover{
    color:white;
}

/* HERO */

.hero-section{
    min-height:90vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.hero-content h1{
    font-size:7rem;
    letter-spacing:10px;
    font-weight:700;
}

.hero-content p{
    color:#888;
    letter-spacing:4px;
    margin-top:20px;
}

.hero-line{
    width:100px;
    height:1px;
    background:#666;
    margin:40px auto;
}

.hero-content h2{
    font-weight:300;
    line-height:1.6;
    color:#ddd;
}

/* MOBILE */

@media (max-width:768px){

.hero-content h1{
    font-size:3rem;
    letter-spacing:5px;
}

.hero-content h2{
    font-size:1.2rem;
}

.navbar-brand{
    font-size:1rem;
}

.return-link{
    font-size:.8rem;
}

}
/* FEATURED */

.featured-section{
    padding:120px 0;
}

.section-title{
    text-align:center;
    margin-bottom:70px;
    letter-spacing:6px;
    font-weight:300;
}

.featured-card{
    position:relative;
    overflow:hidden;
    background:black;
}

.featured-card img{
    width:100%;
    height:500px;
    object-fit:cover;
    transition:.5s;
}

.featured-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    display:flex;
    align-items:flex-end;
    padding:30px;
    opacity:0;
    transition:.4s;
}

.featured-card:hover img{
    transform:scale(1.05);
}

.featured-card:hover .featured-overlay{
    opacity:1;
}

.featured-overlay h3{
    color:white;
    font-weight:300;
    letter-spacing:2px;
}
/* CATEGORY PAGE */

.category-page{
    padding:100px 0;
}

.masonry-grid{
    columns:3 300px;
    column-gap:20px;
}

.photo-item{
    position:relative;
    margin-bottom:20px;
    overflow:hidden;
    border-radius:10px;
}

.photo-item img{
    width:100%;
    display:block;
    transition:.5s;
}

.photo-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
    display:flex;
    align-items:end;
    padding:25px;
    opacity:0;
    transition:.4s;
}

.photo-item:hover img{
    transform:scale(1.03);
}

.photo-item:hover .photo-overlay{
    opacity:1;
}

.photo-overlay h4{
    color:white;
    font-weight:300;
    letter-spacing:2px;
}

@media (max-width:768px){

    .masonry-grid{
        columns:1;
    }

}