/* @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
/* Apply black to the root so the edges outside the 960px body remain dark */
html {
    background: #000000;
}

body {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'JetBrains Mono', monospace;
    /* font-size: 1.3rem; */
    background: #000000;
    color: #00ff41;
}

h1 {
    color: #00ff41;
    border-bottom: 2px solid #005f00;
    padding-bottom: 12px;
    font-size: 1.6em;
    font-weight: normal;
    text-transform: uppercase;
}

#list {
    border: none;
    border-collapse: collapse;
    width: 100%;
}

#list thead th {
    background: #000000;
    padding: 14px 16px;
    border-bottom: 2px solid #005f00;
    font-size: 14px;
    color: #00ff41;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#list tbody td {
    padding: 12px 16px;
    border-bottom: 1px dashed #003300;
}

/* Force ALL rows to be transparent to kill the default white zebra striping */
#list tbody tr,
#list tbody tr:nth-child(even),
#list tbody tr.even {
    background: transparent !important;
}

/* Ensure the hover effect still works over the newly transparent rows */
#list tbody tr:hover {
    background: #001100 !important;
}

#list a {
    color: #00ff41;
    text-decoration: none;
    display: block;
}

#list a:hover {
    background: #00ff41;
    color: #000000; 
}