body {
    margin: 0;
    padding: 40px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f6f1c4;
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px),
        linear-gradient(to right, rgba(0,0,0,0.18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.18) 1px, transparent 1px);
    background-size:
        10px 10px,
        10px 10px,
        100px 100px,
        100px 100px;
    color: black;
}

nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    margin-bottom: 80px;
    font-size: 18px;
    letter-spacing: 1px;
}

.nav-left {
    justify-self: start;
}

.nav-right {
    display: flex;
    gap: 30px;
    justify-self: end;
}

nav a {
    text-decoration: none;
    color: black;
}

nav a:hover {
    opacity: 0.4;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
}

.grid img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

.project-container {
    max-width: 800px;
}

.project-container img {
    width: 100%;
    margin-bottom: 20px;
}

.small-text {
    font-size: 13px;
    line-height: 1.6;
}