* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    background: black;
    color: white;
    overflow: hidden;
}

/* Responsive splash video */
.video-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Navigation */
.navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 10;
}

.left-nav {
    display: flex;
    gap: 25px;
}

.navigation a {
    color: white;
    text-decoration: none;
    font-size: 17px;
    font-weight: 300;
}

.instagram {
    font-size: 17px;
}

/* Works page */
body.works-page {
    background: #e2d3b5;
    overflow-y: auto;
}

.works-grid {
    width: 90%;
    max-width: 1800px;
    margin: 120px auto 0;
    padding-bottom: 120px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.work-item {
    display: block;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    clip-path: inset(0 2% 0 2% round 20px);
}

.work-item:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 18px 25px rgba(0, 0, 0, 0.25));
}

/* Bio page */
.bio-page {
    width: 80%;
    max-width: 1200px;
    margin: 100px auto 60px;
    display: grid;
grid-template-columns: minmax(0, 32vw) minmax(0, 1fr);    gap: 100px;
    align-items: start;
}

.bio-image {
   width: min(32vw, 60vh, 1000px);
   margin-top: 100px;
}

.bio-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.bio-text {
    max-width: 600px;
}

.bio-text h1 {
    margin: 0 0 30px;
    font-size: 42px;
    font-weight: 300;
}

.bio-text {
max-width: 480px;
color: black;
}

.bio-text h1 {
margin: 0 0 30px;
font-size: 42px;
font-weight: 200;
color: black;
}

.bio-text p {
margin: 0 0 24px;
font-size: 13px;
line-height: 1.3;
font-weight: 200;
color: black;
}
.home-button {
position: fixed;
top: 25px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
}

.home-button img {
display: block;
width: 28px;
height: auto;
}
.works-page .navigation, .works-page .home-button { position: absolute; }
.instagram img {
    width: 35px;
    height: 35px;
    display: block;
}
.contact-image {
    width: 600px !important;
    max-width: 90vw !important;
    margin-top: 100px;
}

.contact-image img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
    border-radius: 20px;
}
.contact-image img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
    border-radius: 20px;
    transform: rotate(20deg);
}
.contact-text-box {
    position: absolute;
    width: 100%;
    height: 205px;
    background: #4B5320;
    margin-top: -50px;
    margin-left: -20px;
    border-radius: 20px;
    z-index: 1;

    left: -50px;
    top: 200px;
}