html, body 
{
    margin: 0px;
    padding: 0px;
    background-color: black;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

header section {
    width: 75vw;
    margin: 8px auto;
    container-type: size;
}
#heading {
    height: 10vw;
}
#subheading {
    height: 5vw;
    padding: 8px;
}

main {
    width: 100vw;
}

#card {
    width: 735px;
    height: 766px;
    margin: auto;
    background-color: pink;
    border: pink solid 1px;
    border-radius: 8px;
    display: grid;
    gap: 1px;
    grid-template-columns: [start] 30px [rows] repeat(5, minmax(0, 20fr) [col]);
    grid-template-rows: [start] 30px [cols] repeat(5, minmax(0, 20fr) [row]) 30px [end];
}

#card > span {
    background-color: #000000;
    opacity: 90%;
    display: grid;
    justify-content: center;
    align-content: center;
    text-shadow: 1px 1px 2px black;
    cursor: pointer;
    border-radius: 8px;
}

#card span p {
    margin: 0px;
    max-height: 100%;
    max-width: 100%;
}

#topdiag::after, #botdiag::after {
    content: "⇲";
    transform: translateX(2px); /*rotate(-45deg);*/
}

#r1, #r2, #r3, #r4, #r5 {
    writing-mode: vertical-lr;
    transform: rotate(180deg);

}
#r7 { /*footer of grid */
    display: flex !important;
    justify-content: space-between !important;
    padding: 0px 5px 0px 8px;
    align-items: center;
}
#r7 a {
    text-decoration: none;
    color: #FFFFFF;
}

.cell {
    text-align: center;
    white-space: pre-line;
    overflow: clip;
    padding: 8px
}

.cell .others {
    padding: 0px 5px;
    border-radius: 8px;
    align-self: start;
    justify-self: end;
    position: absolute;
}

.cell img {
    height: 100%;
    /*width: 100%;*/
    max-height: 100%;
    max-width: 100%;
    border-radius: 8px;
    object-fit: cover;
}
.cell .img {
    display: none;
}

.blue {
    background-color: #41CFEDE5 !important;
}
.pink {
    background-color: #F54E96E5 !important;
}

.cell:hover, #botdiag:hover,
#r1:hover, #r2:hover, #r3:hover, #r4:hover, #r5:hover,
#c1:hover, #c2:hover, #c3:hover, #c4:hover, #c5:hover {
    opacity: 69% !important;
}

i[title], span[title]{
    text-decoration: underline rgba(255, 255, 255, .5) dotted;
    cursor: help;
}

#developer {
    font-size: 8pt;
}

#developer span:hover { text-decoration: underline; }

#developer img {
    height: 2em;
    vertical-align: middle;
}

#developer span {
    vertical-align: middle;
}

@font-face{
    font-family: Lazer84;
    src: local(Lazer84), url('Lazer84.ttf') format('truetype');
}