/* MOJANGLES */
@font-face {
    font-family: "Mojangles";
    src: url("Mojangles.ttf") format("truetype");
}

/* RESET */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    image-rendering: pixelated;
}

body {
    background-image: url("bg.png");
    background-repeat: repeat;
    font-family: "Mojangles", monospace;
}

/* CENTER */
.mc-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* PANEL */
.mc-panel {
    background: #c6c6c6;
    padding: 14px;
    border: 2px solid #000;
    box-shadow:
        inset -2px -2px 0 #555,
        inset 2px 2px 0 #fff;
    width: 320px;
}

/* TITLE */
.mc-title {
    text-align: center;
    font-size: 18px;
    color: #404040;
    margin-bottom: 12px;
}

/* BUTTON LIST */
.mc-button-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* BUTTON */
.mc-button {
    display: block;
    text-align: center;
    padding: 8px 0;
    background: #c6c6c6;
    color: #404040;
    text-decoration: none;
    border: 2px solid #000;
    box-shadow:
        inset -2px -2px 0 #555,
        inset 2px 2px 0 #fff;
    font-size: 12px;
}

/* HOVER */
.mc-button:hover {
    background: #b0b0b0;
}

/* CLICK */
.mc-button:active {
    box-shadow:
        inset 2px 2px 0 #555,
        inset -2px -2px 0 #fff;
}