:root {
    --header:             #000000;
    --custom-grey:        #000000;
    --custom-blue:        #000000;
    --background-content: #00000096;
}

/* ── Reset ── */

body {
    font-family: Arial, sans-serif;
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.0) 0%,
            rgba(0,0,0,1)   100%
        ),
        url('space.jpg');
    background-size:       cover;
    background-attachment: fixed;
    color:   #beb7b7;
    margin:  0;
    padding: 0;
}

a {
    color:           #87a7d1;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
}

/* ── Header ── */

.links-and-logos {
    display:          flex;
    justify-content:  space-between;
    align-items:      stretch;
    background-color: var(--header);
    padding:          0;
    margin:           0;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    height:           100px;
    box-shadow:       0px 1.2vh 15px var(--header);
    z-index:          20;
    position:         relative;
}

.links-and-logos img {
    height: 100px;
    width:  auto;
}

.links-and-logos ul {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
    flex:            1;
    gap:             20px;
    margin:          20px;
    padding:         0;
}

.links-and-logos ul li a {
    white-space: nowrap;
}

@media screen and (max-width: 480px) {
    .links-and-logos ul {
        flex-direction: column;
        align-items:    flex-end;
    }
}

/* ── Main ── */

main {
    padding: 0 0 80px 0;
    margin:  0;
}

.main-content {
    display:         flex;
    justify-content: center;
    padding:         0 20px;
    margin-top:      5px;
}

/* ── Content blocks ── */

.content,
.content-reverse {
    display:     flex;
    align-items: stretch;
    max-width:   1000px;
    margin:      10px 0;
    width:       100%;
}

.content div,
.content-reverse div {
    display:          flex;
    flex-direction:   column;
    justify-content:  center;
    align-items:      stretch;
    background-color: var(--background-content);
    flex:             1 1 50%;
    padding:          0 20px;
    font-size:        1rem;
}

.content div p,
.content-reverse div p {
    flex:      1;
    font-size: 0.9rem;
    margin:    25px;
}

.content div ul,
.content-reverse div ul {
    list-style:   circle;
    padding-left: 10px;
    flex:         1;
    font-size:    0.9rem;
    margin:       50px;
}

.content img,
.content-reverse img {
    flex:         1 1 50%;
    max-width:    400px;
    width:        100%;
    object-fit:   cover;
    aspect-ratio: 1/1;
}

.content-reverse {
    flex-direction: row-reverse;
}

@media screen and (max-width: 480px) {
    .content,
    .content-reverse {
        flex-direction: column;
        align-items:    center;
        max-width:      100%;
    }

    .content div,
    .content-reverse div {
        align-items:    center;
        text-align:     center;
        flex-direction: column;
        max-width:      100%;
    }

    .content img,
    .content-reverse img {
        max-height: 250px;
    }
}

/* ── Downloads ── */

.downloads-wrapper {
    display:          flex;
    flex-direction:   column;
    background-color: var(--background-content);
    max-width:        1000px;
    margin:           10px 0;
    width:            100%;
    padding:          0 20px;
    box-sizing:       border-box;
}

.downloads-wrapper h2 {
    font-size:   1.5rem;  /* was 1rem */
    font-weight: bold;    /* was normal */
    margin:      25px 0 0 0;
    color:       #beb7b7;
}

.project-card h3 {
    font-size:   1rem;    /* was 0.9rem */
    font-weight: bold;    /* was normal */
    margin:      0;
    color:       #beb7b7;
}

.downloads-wrapper > p {
    font-size: 0.9rem;
    margin:    10px 0 20px 0;
    color:     #beb7b7;
}

/* ── Project list ── */

.project-list {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   20px;
    padding-bottom:        25px;
}

.project-card {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    border-left:    1px solid #333;
    padding:        0 0 0 15px;
}

.project-card h3 {
    font-size:   0.9rem;
    font-weight: normal;
    margin:      0;
    color:       #beb7b7;
}

.project-desc {
    flex:        1;
    font-size:   0.9rem;
    color:       #beb7b7;
    line-height: 1.5;
    margin:      0;
}

.project-meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    font-size: 0.75rem;
    color:     #beb7b7;
}

.badge::before { content: '['; }
.badge::after  { content: ']'; }

.download-row {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-top:     auto;
}

.download-row select {
    width:      100%;
    padding:    6px 8px;
    background: #111;
    border:     1px solid #333;
    color:      #beb7b7;
    font-size:  0.9rem;
    box-sizing: border-box;
}

.download-btn {
    display:         block;
    width:           100%;
    padding:         6px 8px;
    background:      transparent;
    border:          1px solid #333;
    color:           #87a7d1;
    font-size:       0.9rem;
    text-align:      left;
    text-decoration: none;
    box-sizing:      border-box;
}

.download-btn:hover:not(.disabled) {
    text-decoration: underline;
}

.download-btn.disabled {
    color:          #444;
    cursor:         not-allowed;
    pointer-events: none;
}

/* ── Footer ── */

footer {
    display:         flex;
    justify-content: center;
    padding:         0;
    margin:          0;
}

footer ul {
    padding: 0;
}

.links {
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

.links ul {
    display:         flex;
    justify-content: center;
    gap:             40px;
}

.links ul li {
    margin-bottom: 15%;
}