@import url(./colors.css);

body {
    background-color: black;
    height: 100vh;
    margin: 0;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    grid-auto-columns: 1fr;
    grid-template-areas: 
    "div1 div1 div2 div3 div3 div3 div22"
    "div1 div1 div4 div5 div12 div16 div22"
    "div6 div7 div7 div9 div12 div23 div23"
    "div10 div11 div8 div9 div13 div13 div19"
    "div10 div14 div14 div9 div15 div18 div19"
    "div17 div17 div20 div24 div21 div21 div21"
    ;
    gap: 0.8em;

    font-family: monospace;
    
    color: var(--text);
}

.box {
    border: solid 2px var(--surface0);
    transition: background-color ease-out;

    color: #000000;

    display: flex;
    align-items: center;
    justify-content: center;
}
div:hover {border-color: var(--text); color: var(--text);}
div:active {background-color: var(--green); color: #000000}

#text {
    color: var(--text);
}