* {
    box-sizing: border-box;
}

.grid {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 100px auto;
    gap: 3px 1px;
    background: rgb(10, 10, 10);
    width: fit-content;
    height: fit-content;
    border: 5px solid rgb(10, 10, 10);
}

.grid .cell.row-odd {
    background: rgb(220, 220, 255);
}

.grid .cell.row-even {
    background: rgb(200, 200, 255);
}

.grid .cell.header {
    justify-self: stretch;
    align-self: stretch;
    font-weight: bold;
    color: white;
    background-color: rgba(70, 70, 150, 1);
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    padding: 5px;
}

.grid .cell.header span {
    justify-self: center;
    align-self: center;
}

.grid .cell {
    justify-self: stretch;
    align-self: stretch;
}

.grid .cell {
    position: relative;
}

.grid .cell[selected="1"]::after {
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
    box-shadow: inset 0px 0px 0em 4px rgb(0, 0, 0, 0.5);
    pointer-events: none;
}

.grid .cell[selected="2"]::after {
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
    box-shadow: inset 0px 0px 0em 6px rgb(0, 0, 0, 0.75);
    pointer-events: none;
}

pre {
    margin: 0px;
}

code.hljs {
    height: 100%;
}



table {
    background-color: rgba(100, 100, 255, .1);
    border-collapse: collapse;
}

tr {
    border: 0.1em solid rgb(150, 200, 255);
}

th,
td {
    border-left: 0.1em solid rgb(150, 200, 255);
}

td[selected="1"] {
    border: 0.1em solid rgb(100, 100, 100);
    box-shadow: inset 0px 0px 0.5em 0px rgb(50, 50, 50, 0.5);
}

td[selected="2"] {
    border: 0.1em solid rgb(0, 0, 0);
    box-shadow: inset 0px 0px 0.5em 0px rgb(0, 0, 0, 1);
}

thead {
    background-color: rgba(200, 200, 255, 0.5);
}

element-contextmenu {
    z-index: 1000;
}