@font-face {
    font-family: 'Electrolize';
    font-style: normal;
    font-weight: 400;
    src: url(/teamspec/fonts/Electrolize-Regular.ttf) format('truetype');
}

.content {
    padding-left: 100px;
    padding-right: 100px;
}
.button span {
    background-color: rgb(218, 35, 58);
    /* Only a 400 (regular) Electrolize face is loaded, so font-weight:bold
       is faked via synthetic bold — which paints an extra offset copy of
       the glyph and fights with our own text-stroke, turning the whole
       letter solid black instead of bolder green. So real font-weight stays
       at 400, and boldness comes from a small green text-shadow in each
       direction instead: it fattens the fill itself without touching the
       glyph outline, so the thin text-stroke below still reads as a clean
       edge and doesn't get any more of the green swallowed by it. */
    -webkit-text-stroke-width: 0.3px;
    -webkit-text-stroke-color: black;
    font-weight: 400;
    text-shadow:
        0.4px 0 rgb(37, 173, 62),
        -0.4px 0 rgb(37, 173, 62),
        0 0.4px rgb(37, 173, 62),
        0 -0.4px rgb(37, 173, 62);
    color: rgb(37, 173, 62)!important;
    border-color: rgb(74, 134, 232);
    border-width: calc(2em/10);
    font-family: 'Electrolize',sans-serif;
}

.screenshot-thumb-link {
    display: block;
    position: relative;
    width: 100%;
    max-width: 840px;
    aspect-ratio: 840 / 472;
    overflow: hidden;
    border-radius: 5px;
    cursor: zoom-in;
}
.screenshot-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.screenshot-thumb-link:hover .screenshot-thumb {
    transform: scale(1.05);
}
.screenshot-full-wrap {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
}
.popupimage-content .screenshot-full {
    max-width: 100%;
    pointer-events: auto;
    touch-action: none;
    -webkit-user-drag: none;
    transform-origin: center center;
}
.screenshot-caption {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    text-align: center;
    max-width: 840px;
    margin: 15px 10px 0;
    font-family: 'Open Sans', sans-serif;
}

/* Screenshots: uniform thumbnails, so a plain responsive grid works. */
.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin: 20px 0 40px;
}
.screenshot-item {
    margin: 0;
}

/* Concept art: thumbnails have mixed aspect ratios, so lay them out with a
   CSS multi-column (masonry-style) grid instead of a fixed-track grid. Each
   image keeps its natural aspect ratio and columns reflow to fit the
   viewport, so nothing overflows horizontally. */
.concept-art-grid {
    column-width: 280px;
    column-gap: 30px;
    margin: 20px 0 40px;
}
.concept-art-item {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 30px;
}
.concept-art-item .screenshot-thumb-link {
    max-width: 100%;
    aspect-ratio: auto;
}
.concept-art-item .screenshot-thumb {
    height: auto;
    object-fit: contain;
}

.screenshot-item figcaption,
.concept-art-item figcaption {
    margin: 8px 0 0;
    font-size: 0.95em;
}

.site_title .logo-text {
    display: block;
    max-width: 260px;
    width: 80%;
    margin: 8px auto 0;
    user-select: none;
    -webkit-user-drag: none;
}

.footer a {
    display: block;
    width: 50px;
    transition: transform 0.5s;
}
.footer a:hover {
    transform: scale(1.5);
}
.footer p {
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
}