/* silkscreen-regular - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Silkscreen';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/silkscreen-v6-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('fonts/silkscreen-v6-latin_latin-ext-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* silkscreen-700 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Silkscreen';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/silkscreen-v6-latin_latin-ext-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('fonts/silkscreen-v6-latin_latin-ext-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* carrois-gothic-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Carrois Gothic';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/carrois-gothic-v17-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/carrois-gothic-v17-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

@font-face {
    font-display: swap;
    font-family: 'Pixel_NES';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Pixel_NES.otf') format('opentype');
}

@font-face {
    font-family: 'Pixel_NES';
    src: url('fonts/pixel_nes.otf') format('opentype');
}

body {
    margin: 0;
    background: black;
    color: #caffff;
    font-family: "Carrois Gothic", monospace;
    font-size: 16px;
}



.site {
    max-width: 900px;
    margin: 0 auto;
}

.header {
    text-align: center;
    margin-bottom: 16px;
}

.header h1 {
    font-family: 'Pixel_NES', monospace;
    font-size: 48px;
    color: #4cfffa;
    text-shadow: 0 0 10px #39ffff;
}

/* --- two-column layout --- */
.layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
}

.panel {
    background: #000000;
    border: 2px solid #424242;
    box-shadow: 0 0 12px #416d6d33;
    padding: 12px;
    margin-bottom: 16px;
    border-radius: 4px;
}


.panel h2 {
    margin-top: 0;
    font-family: pixel_nes, monospace;
    font-size: 16px;
    color: #7fffd4;
}

/* --- sidebar --- */
.sidebar .panel {
    margin-bottom: 16px;
}

/* --- menu --- */
.menu {
    list-style: none;
    padding: 0;
}

.menu li {
    margin-bottom: 6px;
}

.menu a {
    color: #caffff;
    text-decoration: none;
}

.menu a:hover {
    color: #00ffff;
}

/* --- status --- */
.online {
    color: #00ff00;
    text-shadow: 0 0 6px #00ff00;
}

/* --- responsive --- */
@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

a {
    color: rgb(45, 45, 255);
}

nav {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

nav a {
    color: #aaa;
    text-decoration: none;
}

nav a:hover,
nav a.active {
    color: #fff;
}

.button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 16px;
    border: 1px solid #555;
    border-radius: 6px;
    color: #eee;
    text-decoration: none;
}

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

.grid img {
    width: 100%;
    object-fit: cover;
    border: 2px solid #000;
}