* {
    box-sizing: border-box;
}

body {
    max-width: 1100px;
    margin: auto;
    font-size: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 1rem;
    background-color: hsl(0, 0%, 88%);;
}

.HEADER {
    display: grid;
    grid-template-columns: .5fr 1fr;
    grid-template-areas: "a a" "b b" "c d";
    gap: 1rem;
}

.LOGO {
    grid-area: a;
}

.HEADINFOTEXT {
    grid-area: b;
}

.HEADSCREENSHOT {
    grid-area: c;
    box-shadow:  3px 3px 5px #cacaca,
             -3px -3px 5px #f6f6f6;
    border-radius: 8px;
    overflow: hidden;
    display:flex;
    place-items: center;
}

.COMMENT {
    grid-area: d;
    box-shadow:  3px 3px 5px #cacaca,
             -3px -3px 5px #f6f6f6;
    border-radius: 8px;
}

.LOGO {
    justify-self: end;
}

.LOGO img {
    max-height: 40px;
}

.HEADINFOTEXT {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32ch, 1fr));
    gap: 1rem;
}

.HEADINFOTEXT_TABLE,
.HEADINFOTEXT_TABLE tbody {
    display: contents;
}

.HEADINFOTEXT_TABLE tr {
    border-radius: 8px;
    display: grid;
    grid-template-columns: auto 1fr;
    box-shadow:  3px 3px 5px hwb(0 79% 21%),
             -3px -3px 5px hsl(0, 0%, 96%);
    overflow: hidden;
}

.HEADINFOTEXT_TABLE tr td:first-child {
    font-weight: bolder;
    padding: 5px;
    border-right: 1px solid lightgray;
}

.HEADINFOTEXT_TABLE tr td:last-child {
    color: darkblue;
    padding: 5px;
}

/* Hide completely empty rows (modern browsers supporting :has()) */
.HEADINFOTEXT_TABLE tbody tr:not(:has(td:not(:empty))) {
    display: none;
}

.HEADSCREENSHOT img {
    max-width: 100%;
    filter:invert(12%);
}

.COMMENT {
    padding: .5rem .5rem;
}

.COMMENT_NAME {
    display: none;
}

.COMMENT p {
    margin: 0;
}

.CONTENT{
    margin-block: 1rem;
    font-family: monospace;
    font-size: 14px;
    
    border-radius:8px;
    box-shadow:  3px 3px 5px hwb(0 79% 21%),
             -3px -3px 5px hsl(0, 0%, 96%);
    overflow: hidden;
}
.CONTENT_TABLE {
    width: 100%;
    border-collapse: collapse;
}
.CONTENT_TABLE tbody tr:hover{
    background-color: rgb(165, 255, 225) !important;
}
.CONTENT_TABLE thead {
    background-color: lightgray;

}

.CONTENT_TABLE thead th {
    border: 1px solid rgb(210, 210, 210);;
    text-transform: uppercase;
}

.CONTENT_TABLE th,
.CONTENT_TABLE td {
    border: 1px solid lightgray;
    font-size: smaller;
    text-align: center;
    padding-inline: 5px;
    padding-block: 5px;
}
tfoot{background-color: rgb(210, 210, 210);font-weight: bolder;}

.CONTENT_TABLE tbody tr:nth-child(odd) {
    background-color: rgb(239, 239, 239);
}

.th_30,
.td_30,
.th_21,
.td_21,
.th_118,
.td_118 {
    text-align: left !important;
}

@media print{
    body{background-color: white;font-size: 14px;}
    .HEADER, .HEADINFOTEXT{gap: .5rem;}
    .HEADSCREENSHOT, .COMMENT, .HEADINFOTEXT tr{
        border:1px solid gray;
        box-shadow: none;
    }
    img{filter:none !important;}
    .CONTENT{
        box-shadow: none ;
    }
    .CONTENT td{padding-block: 2px;}
}