:root {
    --gray: #90a4ae;
    --ng: #dd1b16;
    --red: #ea4335;
    --orange: #fbbc05;
    --yellow: #f8d548;
    --green: #c9e265;
    --blue: #38b6ff;
}

.bg-ng {
    background-color: var(--ng);
}

.text-ng {
    color: var(--ng);
}

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

.bg-orange {
    background-color: var(--orange);
    color: black;
}

.bg-yellow {
    background-color: var(--yellow);
    color: black;
}

.bg-green {
    background-color: var(--green);
    color: black;
}

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

body {
    overflow-x: hidden;
    font-family: 'Roboto Mono', monospace;
    text-align: justify;
    background: black;
    color: white;
}

.clickable {
    cursor: pointer;
    transform: scale(1.0);
}

.clickable:hover {
    cursor: pointer;
    transform: scale(1.05);
}

@media (min-width:320px) {
    .info-card {
        display: flex;
        flex-direction: row;
    }
    .explain-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .system-nav {
        display: flex;
        flex: 1 1;
        flex-direction: row;
    }
}

@media (min-width:320px) and (max-width:600px) {
    img {
        width: 100%;
    }
    .info-card {
        display: flex;
        flex-direction: column;
    }
    .system-nav {
        display: flex;
        flex: 1 1;
        flex-direction: column;
    }
}