body {
    margin:0;
    font-family:Arial;
    color:rgba(0,0,0,0.8);
    text-align:center;
    transition: background 1s linear;
}

nav a {
    margin:10px;
    color:rgba(0,0,0,0.8);
    text-decoration:none;
    font-weight:bold;
}

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

.thumb {
    cursor:pointer;
    transition: transform .1s, filter .2s;
}

.thumb:hover {
    transform: scale(var(--hover-scale));
}

.thumb:active {
    filter: brightness(var(--click-darkness));
}

.thumb img {
    width:100%;
    max-width:250px;
}

.modal {
    display:none;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(255,168,150,0.8);
    justify-content:center;
    align-items:center;
}

.modal img {
    width:80px;
    margin:10px;
}

.page-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 40px;
    background:rgba(177,56,71,0.2);
}

.header-img {
    width:100px;
    height:auto;
    border-radius:4px;
}

.headline h1 {
    color:rgba(0,0,0,0.8);
    margin:0;
    font-size:1.8em;
}

.pagination {
    margin:20px;
}
.pagination a {
    color:white;
    background:rgba(0,0,0,0.3);
    padding:6px 12px;
    border-radius:4px;
    margin:0 6px;
    text-decoration:none;
}