html, body {
    padding: 0px;
    margin: 0px;
    border-color: #1a0e14;
    color: #fff4b0;
    background-color: #1a0e14;
    /* overflow: hidden; */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    }

a {
    color: #48ace0;
    }

#page-container {
    display: grid; height:100vh; box-sizing: border-box;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

    border-radius: 6px;
    grid-template-areas:
        "x1y1 x2y1 x3y1 x4y1 x5y1 x6y1 x7y1 x8y1 x9y1 x10y1 x11y1 x12y1"
        "x1y2 x2y2 x3y2 x4y2 x5y2 x6y2 x7y2 x8y2 x9y2 x10y2 x11y2 x12y2"
        "x1y3 x2y3 x3y3 x4y3 x5y3 x6y3 x7y3 x8y3 x9y3 x10y3 x11y3 x12y3"
        "x1y4 x2y4 x3y4 x4y4 x5y4 x6y4 x7y4 x8y4 x9y4 x10y4 x11y4 x12y4"
        "x1y5 x2y5 x3y5 x4y5 x5y5 x6y5 x7y5 x8y5 x9y5 x10y5 x11y5 x12y5"
        "x1y6 x2y6 x3y6 x4y6 x5y6 x6y6 x7y6 x8y6 x9y6 x10y6 x11y6 x12y6"
        "x1y7 x2y7 x3y7 x4y7 x5y7 x6y7 x7y7 x8y7 x9y7 x10y7 x11y7 x12y7"
        "x1y8 x2y8 x3y8 x4y8 x5y8 x6y8 x7y8 x8y8 x9y8 x10y8 x11y8 x12y8";
    overflow: auto;
    }

.grid-container {
    display: grid; box-sizing: border-box;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

    border-radius: 6px;
    grid-template-areas:
        "x1y1 x2y1 x3y1 x4y1 x5y1 x6y1 x7y1 x8y1 x9y1 x10y1 x11y1 x12y1"
        "x1y2 x2y2 x3y2 x4y2 x5y2 x6y2 x7y2 x8y2 x9y2 x10y2 x11y2 x12y2"
        "x1y3 x2y3 x3y3 x4y3 x5y3 x6y3 x7y3 x8y3 x9y3 x10y3 x11y3 x12y3"
        "x1y4 x2y4 x3y4 x4y4 x5y4 x6y4 x7y4 x8y4 x9y4 x10y4 x11y4 x12y4"
        "x1y5 x2y5 x3y5 x4y5 x5y5 x6y5 x7y5 x8y5 x9y5 x10y5 x11y5 x12y5"
        "x1y6 x2y6 x3y6 x4y6 x5y6 x6y6 x7y6 x8y6 x9y6 x10y6 x11y6 x12y6"
        "x1y7 x2y7 x3y7 x4y7 x5y7 x6y7 x7y7 x8y7 x9y7 x10y7 x11y7 x12y7"
        "x1y8 x2y8 x3y8 x4y8 x5y8 x6y8 x7y8 x8y8 x9y8 x10y8 x11y8 x12y8";
    overflow: auto;
    }




#page-container .a1-5x5 {
    grid-column-start: a1;
    grid-column-end: e5;
    grid-row-start: a1;
    grid-row-end: a5;
}

.x1y1-12x8{grid-area:x1y1/x1y1/x1y8/x12y1}

.grid-item {
    margin: 2px;
    border: 4px solid;
    border-radius: 6px;
    overflow: auto;
    }


.bg-near-black {
    border-color: #1a0e14;
    }

.bg-darkest-brown {
    border-color: #321921;
    }

.bg-dark-brown {
    border-color: #4d292d;
    }

.bg-dark-tan {
    border-color: #70483c;
    }

.bg-light-tan {
    border-color: #96705a;
    }

.bg-dark-sand {
    border-color: #b59571;
    }

.bg-light-sand {
    border-color: #e0c892;
    }

.bg-off-white {
    border-color: #fff4b0;
}

.bg-dark-red-brown {
    border-color: #4c2126;
    }

.bg-dark-mid-red-brown {
    border-color: #4c2126;
    }

.bg-light-magenta {
    border-color: #d663d7;
    }

.bg-red-ochre {
    border-color: #bf2b29;
    }

.bg-color-watermelon {
    border-color: #e64e47;
    }

.bg-light-orange {
    border-color: #ed572d;
    }

.bg-golden-yellow {
    border-color: #ff9130;
    }

.bg-color-bad-moon-yellow {
    border-color: #ffbd40;
    }

.bg-color-forest-green {
    border-color: #5a7a22;
    }

.bg-color-lime-green {
    border-color: #b3a720;
    }

.bg-color-sky-blue {
    border-color: #48ace0;
    }

.bg-color-purple-grape {
    border-color: #863ba1;
    }