/* General Styles */
body {
    font-family: Arial, sans-serif;
}

h1 {
    margin: 20px 0;
}

/* Table Container */
.table-container {
    display: grid;
    grid-template-areas:
        "Ht . .    .     .   .  .   .  .   .   .   .   .  .   .     .   Ga   Ct"
        "Ef Hd .   .   Acc   .  .   .  .   .   .   Lc  Ts Tu  Om   Jc   Wd   Cg"
        "Yn Ha .   .     .   .  .   .  .   .   .   Fl  Hb Lr  Ot   Bn   Vh   Aa"
        "Gg Bg Ye  Hs   Sp  Br  Pd  Sq Sh  Sa  Dg  Fr  Co Ag  Pr   Sw   Ec   Ss"
        "De Pe Cs  Pc   Eo  Ps  No  Lf St  Bh  Ah  Shg Bb Cr  Wp   Fz   Ft   Ttc"
        "Ia L4 Tlt Ff   Po Tch  Dc  Tp Fi  Grs Bon Lp  Wf Bar BarC Pdn Gpr   Hu"
        "Ge Lg Agg Bre  Fc  Pt  Kh  Df Bi  La  Gm Thc Wt Ip   Er   Kc   Fw   Fns"
        ".   .  .  Opi  Oi  Sr  Bc  Wc Jb  Cc  Ob  Ca  Gs Bs  Ftb  Oc   Jp   Cl"
        ".   .  .  Hes Psd Rip  Spd NA Prn Res Nc  Qr  Am Pol Oa   Mc   Exc  Chr";
    gap: 10px; /* Spacing between elements */
    overflow: scroll;
    padding: 20px;
    border: 2px solid #ccc;
}

/* Element Styles */
.element {
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 2px solid #ccc;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.element:hover {
    transform: scale(1.05);
    background-color: rgba(255, 235, 59, 0.5);
}

.element.green-element {
    background-color: rgba(76, 175, 80, 0.7);
}

.element.grey-element {
    background-color: #DDDDDD;
}

.element.lightblue-element {
    background-color: #ADD8E6;
}

.element.lightyellow-element {
    background-color: #FFFFC5;
}

.element.brightyellow-element {
    background-color: #FFED29;
}

.element.purple-element {
    background-color: #D6B4FC;
}

.element.red-element {
    background-color: rgba(244, 67, 54, 0.7);
}

.element.marked {
    position: relative;
}

.element.marked::after {
    content: 'X';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: red;
    font-weight: bold;
}

.count-section {
    text-align: center;
}

/* Log Section */
.log-section {
    margin: 20px auto;
    padding: 10px;
    text-align: center;
    max-width: 90%;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.log-section ul {
    list-style: none;
    padding: 0;
}

.log-section li {
    font-size: 14px;
    margin: 5px 0;
}

.symbol {
    font-weight: bold;
}

.name {
}

#reset-button {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 50px;
    padding-right: 50px;
}