@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

:root {
    --color-black: #212529;
    --color-white: #fff;
    --color-primary: #209cee;
    --color-success: #92cc41;
    --color-error: #e76e55;
    --color-warning: #f7d51d;
    --color-gray: #7c7c7c;
    --color-blue: #4428bc;
    --color-red: #a81000;
    --color-brown: #ac7c00;
    --color-green: #00b800;
    --color-purple: #9878f8;
}

.grid {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    margin-bottom: 1rem;
}

.header {
    max-width: 90%;
    width: 100%;
    margin-top: 1rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media (width >= 64rem) {
    .header {
        max-width: 60%;
    }
}

.content {
    max-width: 90%;
    width: 100%;
    font-size: 12px;
}

@media (width >= 64rem) {
    .content {
        max-width: 60%;
        font-size: 16px;
    }
}

.content .nes-container {
    margin-top: 2rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nes-container {
    padding: 0.75rem 1rem;
}

@media (width >= 64rem) {
    .nes-container {
        padding: 1.5rem 2rem;
    }
}

.content .lists {
    padding: 1rem 0;
}

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.color-black {
    color: var(--color-black);
}

.color-white {
    color: var(--color-white);
}

.color-primary {
    color: var(--color-primary);
}

.color-success {
    color: var(--color-success);
}

.color-error {
    color: var(--color-error);
}

.color-warning {
    color: var(--color-warning);
}

.color-gray {
    color: var(--color-gray);
}

.color-blue {
    color: var(--color-blue);
}

.color-red {
    color: var(--color-red);
}

.color-brown {
    color: var(--color-brown);
}

.color-green {
    color: var(--color-green);
}

.color-purple {
    color: var(--color-purple);
}