body {
    --background-color: #353951;
    --surface-color: #2d2f46;
    --header-background-color: #ffffff;
}

.homepage {
    background: var(--background-color);
}

.homepage header {
    background: url("assets/header.svg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: top -10px center;
    height: 205px;
    display: flex;

    padding-top: 25px;
    padding-bottom: 50px;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    z-index: 1000;
}

.homepage header h1 {
    display: block;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.homepage header h1 img {
    max-height: 100%;
}

.homepage header ~ * {
    margin-top: 205px;
}

.homepage main {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25vh;
}

.poster-list > article {
    margin: 10px 5px;
    background-color: rgba(0, 0, 0, 0.3);
    font-family: monospace;
    font-size: 2em;
    text-align: center;
    color: white;
}

.poster-list > article a {
    color: inherit;
    text-decoration: inherit;
}

.poster-list > article > a:first-child:last-child {
    display: block;
    width: 100%;
    height: 100%;
    padding: 30px 15px;
}

.poster-list > article a:not([href]) {opacity: 0.5;}

.poster-list > article img {
    width: 100%;
    max-height: 35vh;
    object-fit: scale-down;
}