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

body {
background: white;
color: black;
font-family: Arial, Helvetica, sans-serif;
}

/* Header */

header {
display: flex;
justify-content: space-between;
align-items: center;

```
padding: 35px 40px;

border-bottom: 1px solid #ddd;
```

}

.brand a {
text-decoration: none;
color: black;
letter-spacing: 8px;
}

nav {
display: flex;
gap: 50px;
}

nav a {
text-decoration: none;
color: black;
letter-spacing: 4px;
}

nav a:hover,
.brand a:hover {
opacity: 0.6;
transition: opacity 0.2s ease;
}

/* Homepage */

.hero {
text-align: center;
padding: 80px 20px 60px;
}

.logo {
width: 450px;
max-width: 70vw;
}

/* General Content */

.content {
max-width: 1100px;
margin: 0 auto;
padding: 40px 20px 100px;
}

.content h2 {
text-align: center;
margin-bottom: 30px;
letter-spacing: 3px;
}

.content p {
line-height: 1.8;
}

/* About Page */

.intro {
    max-width: 800px;
    margin: 0 auto 80px;
    text-align: center;
}

.profile {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin: 120px 0;
}

.profile img {
    width: 300px;
    height: 400px;

    object-fit: cover;
    object-position: center top;

    border-radius: 4px;

    flex-shrink: 0;
}

.profile-text {
    flex: 1;
    text-align: left;
}

.profile-text h3 {
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.profile-text p {
    margin-bottom: 20px;
}

/* Work Page */

.work-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}

.thumbnail {
width: 100%;
height: 180px;

```
background: #e5e5e5;
border: 1px solid #ddd;

margin-bottom: 15px;
```

}

/* Mobile */

@media (max-width: 900px) {

    .profile,
    .profile.reverse {
        flex-direction: column;
        align-items: center;
    }

    .profile-text {
        text-align: center;
    }

    .profile img {
        width: 260px;
        height: 340px;
    }
}
/* Film Grain Overlay */

body::before {
    content: "";

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-image: url("grain.gif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    opacity: 0.04;

    pointer-events: none;

    z-index: 9999;
}