#game {
    margin: 20px auto;
    display: flex;
    justify-content: center;
}

#grid {
    display: grid;
    grid-template-columns: repeat(5, 100px);
    grid-template-rows: repeat(5, 100px);
    gap: 10px;
    width:100%;
}

.grid-square {
    width: 100px;
    height: 100px;
    background-color: #a2c2a884;
    border: 2px solid #a2c2a8b0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s;
}

.grid-square:hover {
    transform: scale(1.1);
}

.grid-square.fossil {
    background-color: #795548;
    color: white;
    animation: found 1s ease-in-out;
}

.grid-square.empty {
    background-color: #e0e0e0;
    animation: notFound 0.5s ease-in-out;
}

#info {
    margin-top: 20px;
}

#fossil-info {
    font-size: 1.2em;
}

@keyframes found {
    0% { background-color: #795548; }
    50% { background-color: #a0522d; }
    100% { background-color: #795548; }
}

@keyframes notFound {
    0% { background-color: #e0e0e0; }
    50% { background-color: #ff0000; }
    100% { background-color: #e0e0e0; }
}

#info th{
    width:146px;
    text-align:left;
}

.fossilie_bild{
    width:100%;
    width:400px;
    margin-top:15%;
}