@font-face {
font-family: "6B7TFont";
src: url("../fonts/Minecraft.otf") format("opentype");
font-display: swap;
}

{
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: #0b0b0b;
color: #eee;
font-family: "6B7TFont", Arial, sans-serif;
min-height: 100vh;
}

/* =========================
背景
========================= */

body::before {
content: "";
position: fixed;
inset: 0;

background:
    radial-gradient(
        circle at 50% 0%,
        rgba(255, 255, 255, 0.08),
        transparent 45%
    ),
    linear-gradient(
        rgba(0, 0, 0, 0.65),
        rgba(0, 0, 0, 0.92)
    );

pointer-events: none;
z-index: -1;

}

/* =========================
Header
========================= */

.header {
text-align: center;
padding: 55px 20px 30px;
}

.logo {
max-width: 280px;
width: 60%;
image-rendering: pixelated;
}

.header h1 {
margin: 20px 0 8px;

font-size: clamp(28px, 5vw, 48px);

text-shadow:
    4px 4px 0 #000;

}

.header p {
margin: 0;

color: #aaa;
font-size: 15px;

}

/* =========================
Navigation
========================= */

.nav {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;

padding: 10px 20px 30px;

}

.nav a {
color: #fff;
text-decoration: none;

background: #303030;

border: 2px solid #111;

box-shadow:
    inset 0 2px rgba(255, 255, 255, 0.15),
    0 3px 0 #000;

padding: 10px 18px;

transition: 0.15s;

}

.nav a {
background: #444;

transform: translateY(-2px);

}

/* =========================
Main container
========================= */

.container {
width: min(1100px, 92vw);

margin: auto;

padding-bottom: 70px;

}

/* =========================
Category
========================= */

.category {
margin-top: 35px;
}

.category-title {
display: flex;
align-items: center;

gap: 12px;

margin-bottom: 18px;

}

.category-title h2 {
margin: 0;

font-size: 26px;

text-shadow:
    3px 3px #000;

}

.category-title span {
color: #888;

font-size: 13px;

}

/* =========================
Plugin Grid
========================= */

.plugin-grid {
display: grid;

grid-template-columns:
    repeat(auto-fit, minmax(300px, 1fr));

gap: 16px;

}

/* =========================
Plugin Card
========================= */

.plugin {
background: rgba(25, 25, 25, 0.94);

border: 2px solid #3a3a3a;

box-shadow:
    0 4px 0 #000;

padding: 20px;

transition:
    border-color 0.15s,
    transform 0.15s;

}

.plugin {
border-color: #666;

transform: translateY(-2px);

}

.plugin h3 {
margin: 0 0 10px;

font-size: 21px;

}

.plugin-description {
color: #bbb;

line-height: 1.7;

font-size: 14px;

margin-bottom: 15px;

}

/* =========================
Commands
========================= */

.commands {
border-top: 1px solid #3b3b3b;

padding-top: 12px;

}

.command {
margin: 8px 0;
}

.command code {
display: inline-block;

background: #111;

border: 1px solid #333;

padding: 4px 7px;

color: #ddd;

font-family: monospace;

font-size: 13px;

}

.command-desc {
color: #999;

font-size: 13px;

margin-left: 6px;

}

/* =========================
General Links
========================= */

.plugin a {
color: #fff;

text-decoration: none;

}

.plugin a {
text-decoration: underline;
}

/* =========================
Tip
========================= */

.tip {
margin-top: 30px;

padding: 18px 20px;

background: rgba(40, 40, 40, 0.8);

border-left: 4px solid #aaa;

color: #ccc;

line-height: 1.7;

}

.tip strong {
color: #fff;
}

/* =========================
Back Button
========================= */

.back {
text-align: center;

margin-top: 50px;

}

.back a {
display: inline-block;

color: #fff;

text-decoration: none;

background: #333;

border: 2px solid #111;

box-shadow:
    0 3px 0 #000;

padding: 12px 28px;

transition: 0.15s;

}

.back a {
background: #4a4a4a;

transform: translateY(-2px);

}

/* =========================
Mobile
========================= */

@media (max-width: 600px) {

.header {
    padding-top: 35px;
}

.plugin-grid {
    grid-template-columns: 1fr;
}

.plugin {
    padding: 16px;
}

.category-title h2 {
    font-size: 22px;
}

.category-title {
    flex-wrap: wrap;
}

.nav {
    padding-left: 12px;
    padding-right: 12px;
}

.nav a {
    padding: 9px 14px;
    font-size: 13px;
}

}