/* Help page two-column layout. */
#help {
	display: grid;
	grid-template-columns: 1fr min-content;
	align-items: center;
	gap: 1em;
}

/* Help landing-page controls. The generic menu-card component stays shared. */
#webpush-message:not(:empty) { margin-bottom: 1em; }
.help-menu-grid { justify-content: center; column-gap: 2%; row-gap: 1.5em; }
.help-menu-grid .menu-box { box-sizing: border-box; }

/* Shared by the help landing page and the customization guide hub. */
.rules li { margin: 1em 0; }
.menu-box { width: 31%; padding: 0.25em; }
.menu-box h2,
.menu-box-button {
    font-family: "Heffaklump";
    color: black;
    font-size: 1.4em;
    font-weight: normal;
}
.menu-box h2 {
    border: 2px solid black;
    border-radius: 0.3125em;
    padding: 0.25em;
}
.menu-box-button {
    border: .25em solid black;
    border-radius: .5em;
    padding: .5em;
}
.menu-box.yellow-btn h2 { background-color: #fff7cc; }
.menu-box.yellow-btn h2:hover { background-color: gold; transition: 5ms; }
.menu-box.yellow-btn h2:active { background-color: #ccad00; }
.menu-box.green-btn h2 { background-color: #d6f5d6; }
.menu-box.green-btn h2:hover { background-color: #33cc33; }
.menu-box.green-btn h2:active { background-color: #28a428; }
.menu-box.blue-btn h2 { background-color: #ccf5ff; }
.menu-box.blue-btn h2:hover { background-color: #00ccff; }
.menu-box.blue-btn h2:active { background-color: #00a3cc; }
.menu-box.pink-btn h2, .gen-pink-btn { background-color: #ffcce6; }
.menu-box.pink-btn h2:hover, .gen-pink-btn:hover { background-color: #ff66b3; }
.menu-box.pink-btn h2:active, .gen-pink-btn:active { background-color: #cc528f; }
.gen-blue-btn { background-color: #ccf5ff; }
.gen-blue-btn:hover { background-color: #00ccff; }
.gen-blue-btn:active { background-color: #00a3cc; }
.help-menu-button {
    font-family: "Heffaklump";
    color: black;
    font-size: 1.4em;
    font-weight: normal;
    border: 2px solid black;
    border-radius: 5px;
    padding: 4px;
    background-color: #E6E6FA;
}
.help-menu-button:hover { background-color: #CF9FFF; }