body{
    background:#000;
    color:#f2f2f2;
    margin:0;
    font-family:Arial,sans-serif;
}

.hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.logo{
    width:220px;
    margin-bottom:40px;
}

h1{
    margin:0;
    font-size:6rem;
    letter-spacing:12px;
    font-weight:700;
}

.tagline{
    margin-top:50px;
    font-size:1.1rem;
    letter-spacing:8px;
    line-height:2.2;
    color:#d0d0d0;
}

.about{
    margin-top:60px;
    color:#8d8d8d;
    letter-spacing:3px;
    font-size:.9rem;
}

.services{
    margin-top:20px;
    color:#b0b0b0;
    letter-spacing:5px;
    font-size:.9rem;
}

.button{
    display:inline-block;
    margin-top:50px;
    padding:18px 70px;
    border:2px solid white;
    color:white;
    text-decoration:none;
    letter-spacing:4px;
    transition:.3s;
}

.button:hover{
    background:white;
    color:black;
}

.gallery{
    padding:120px 8%;
}

.gallery h2{
    text-align:center;
    font-size:3rem;
    letter-spacing:8px;
    margin-bottom:80px;
}

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

.card{
    height:300px;
    border:1px solid #222;
    background:#050505;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:.3s;
}

.card:hover{
    border-color:white;
    transform:translateY(-5px);
}

.card h3{
    margin:0;
    letter-spacing:8px;
    font-size:2rem;
}

.card p{
    margin-top:20px;
    color:#888;
    font-size:.9rem;
    letter-spacing:2px;
    text-align:center;
    max-width:70%;
    line-height:1.7;
}

.tattoo-card{
    position:relative;
    overflow:hidden;
}

.tattoo-card,
.tattoo-card:visited,
.tattoo-card:hover,
.tattoo-card:active{
    color:white;
    text-decoration:none;
}

.tattoo-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.35;
    transition:.4s;
}

.tattoo-card:hover img{
    opacity:.7;
    transform:scale(1.05);
}

.tattoo-card h3,
.tattoo-card p{
    color:white;
}

.overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}
a.tattoo-card,
a.tattoo-card:link,
a.tattoo-card:visited,
a.tattoo-card:hover,
a.tattoo-card:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

a.tattoo-card h3,
a.tattoo-card p,
a.tattoo-card:visited h3,
a.tattoo-card:visited p {
    color: #ffffff !important;
}
/* ---------- TATTOO PAGE ---------- */

.tattoo-header{
    text-align:center;
    padding:80px 20px 40px;
}

.tattoo-header h1{
    font-size:80px;
    letter-spacing:10px;
}

.tattoo-header p{
    letter-spacing:5px;
    color:#888;
    margin:20px 0;
}

.back-button{
    display:inline-block;
    padding:15px 40px;
    border:1px solid white;
    color:white;
    text-decoration:none;
    letter-spacing:3px;
    transition:.3s;
}

.back-button:hover{
    background:white;
    color:black;
}

.gallery{
    width:90%;
    max-width:1600px;
    margin:auto;
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));
    gap:40px;
    padding:50px 0 100px;
}

.gallery-item{
    background:#111;
    padding:20px;
    text-align:center;
    transition:.3s;
}

.gallery-item:hover{
    transform:translateY(-10px);
}

.gallery-item img{
    width:100%;
    cursor:pointer;
    transition:.3s;
}

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

.gallery-item h3{
    margin-top:20px;
    letter-spacing:5px;
    color:white;
}

.gallery-item p{
    color:#888;
}

.lightbox{
    display:none;
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.95);
    justify-content:center;
    align-items:center;
}

.lightbox img{
    max-width:90%;
    max-height:90%;
}

.close{
    position:absolute;
    top:20px;
    right:40px;
    font-size:60px;
    color:white;
    cursor:pointer;
}

footer{
    text-align:center;
    padding:100px 20px;
    border-top:1px solid #222;
}

footer h2{
    letter-spacing:6px;
    margin-bottom:20px;
}

.footer-name{
    color:white;
    letter-spacing:3px;
}

.available{
    margin:30px 0;
    line-height:2;
}

footer a{
    color:white;
    text-decoration:none;
    border:1px solid white;
    padding:15px 30px;
    display:inline-block;
    transition:.3s;
}

footer a:hover{
    background:white;
    color:black;
}
.works h3{
    font-size:1.6rem;
    letter-spacing:6px;
    line-height:1.4;
    max-width:90%;
    text-align:center;
}

.works p{
    max-width:80%;
}
.works,
.works:link,
.works:visited,
.works:hover,
.works:active {
    color: white !important;
    text-decoration: none !important;
}

.works h3,
.works p,
.works:link h3,
.works:visited h3,
.works:hover h3,
.works:active h3,
.works:link p,
.works:visited p,
.works:hover p,
.works:active p {
    color: white !important;
    text-decoration: none !important;
}

.works p {
    color: #888 !important;
}