mmc/styles.css

:root {
    --white: #FFFFFE;
    --black: #222222;
    --superblack: #000000;
    --darkgrey: #666666;
    --lightgrey: #BBBBBB;
    --uop1: #FF00FF77;
    --grid-template-areas:
    "header header header header header header header header header header"
    "kp kp ka ka vp vp bs bs be be"
    "kp kp kr kr vp vp de de be be"
    "mb mb mb mb mb if if if if if"
    "footer footer footer footer footer footer footer footer footer footer";
    --grid-template-columns: repeat(10, 1fr);
    --grid-template-rows: min-content auto auto auto min-content;
}

@media (width < 40em) {
    :root {
        --grid-template-areas:
        "header"
        "be"
        "bs" 
        "de" 
        "vp" 
        "kp"
        "ka" 
        "kr" 
        "mb" 
        "if"
        "footer";
        
        --grid-template-columns: 1fr;
        --grid-template-rows: repeat(14, 1fr);
        }
}

@media print {
    :root {
        --white: #ffffff;
        --lightgrey: #ffffff;
    }
    :is(dialog, #help) {
      display: none;
    }
    a {
        color: var(--black);
    }    
}

/* dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --white: #000000;
        --black: #DFDFDF;
        --superblack: #FFFFFF;
        --darkgrey: #999999;
        --lightgrey: #444444;
        --uop1: #FF00FF77;
    }
    img {
        filter: invert(1);
    }
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    color: var(--black);
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--lightgrey);
}

.grid-item {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border: 1px solid var(--darkgrey);
    padding: 1em;
}

.grid-container {
    display: grid;
    margin: 1em;
    height: 96svh;
    grid-template-areas: var(--grid-template-areas);
    grid-template-columns: var(--grid-template-columns);
    grid-template-rows: var(--grid-template-rows);
  }

header {
    grid-area: header;
    display: flex;
    flex-direction: row;
    gap: 2em;
}

header h1 {
    font-size: 2em;
    font-weight: bold;
    padding-block-end: 0.5em;
}

header div {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

header label {
    font-weight: bold;
    font-size: 0.8em;
}


footer {
    grid-area: footer;
    padding-block-start: 0.5em;
}

footer span {
    text-transform: uppercase;
    font-weight: bold;
}

#kp {
    grid-area: kp;
}

#ka {
    grid-area: ka;
}

#vp {
    grid-area: vp;
}

#bs {
    grid-area: bs;
}

#be {
    grid-area: be;
}

#kr {
    grid-area: kr;
}

#de {
    grid-area: de;
}

#mb {
    grid-area: mb;
}

#if {
    grid-area: if;
}

.e {
    width: 100%;
    height: 100%;
    outline: none;
}

h2 {
    padding-bottom: 0.5em;
    font-size: clamp(1.4dvw, 1rem, 1rem);
}

h2 img {
    height: 1em;
    float: right;
}

.hi {
    box-shadow: inset 0 0 1em var(--uop1);
}

.lo {
    opacity: 0.5
}

.grid-item:has(*:focus) {
    box-shadow: inset 0 0 1em var(--uop1);
}

dialog:modal {
    margin: auto;
    padding: 2em;
    display: flex;
    flex-direction: column;
    background: var(--white)
}

dialog p {
    padding-block-start: 0.3em;
}

dialog h2 {
    padding-block-start: 2em;
}


dialog::backdrop {
    background: repeating-linear-gradient(
      45deg,
      #009EE277,
      #62136077,
      #0076A677,
      #3C023877
    );
  }
  
dialog button {
    align-self: flex-end;
    padding: 0.5em;
    background: var(--lightgrey);
}

#help {
    cursor: pointer;
    transition: all 0.2s linear;
    align-self: flex-start;
    filter: saturate(0%);
}

#help:hover {
    transform: scale(1.1);
    filter: saturate(100%);
}

.key {
    background: var(--lightgrey);
    padding: 0.2em;
    border: thin dashed var(--black);
    border-radius: 0.2em;
    font-weight: bold;
}

strong {
    color: var(--superblack);
}