Maingron/MainOS

* {
    transition: .2s;
    font-size: 1em;
}

#gridcontainercontainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

#gridcontainer {
    display: inline-grid;
    width: 100%;
    overflow: hidden;
    grid-template-columns: repeat(7, 1fr);
    box-sizing: border-box;

    .cell {
        transition: 0s;
        overflow: hidden;
        text-align: left;
        background-color: #fff;
        width: 100%;
        line-height: 1.25em;
        height: 1.25em;
        padding: 0;
        overflow: hidden;
        border: 0px solid transparent !important;
        outline: .5px solid #777777aa;
        resize: none;
        border-radius: 0;
        box-sizing: border-box;
        appearance: none;

        &:hover {
            cursor: cell;
            background-color: var(--hovercolor);
        }

        &:focus {
            cursor: text;
            background-color: var(--hovercolor);
        }
    }
}

@media (prefers-color-scheme:dark) {
    body #gridcontainer .cell {
        background-color: var(--black);
    }
}