body{
    background-color: #B69E6E;
    
}
.grid-container {
    z-index: 1;
    width: 43vw;
    justify-self: center;
    background-color: #B69E6E;
    padding: 6px;
    transform: translateY(-10px)
}
a{
    text-decoration: none;
    color: antiquewhite;
    font-family: Impact ; 
    text-align: center;
}
p {
    text-align: center;
}
.card {
    aspect-ratio: 1 / 1;   /* Forces perfect square */
    min-width: 15px;      /* Minimum size */
    min-height: 15px;     /* Optional — not required but helps */
    border-radius: 7px;
    background-color: #ffe4ba;
    text-align-last: center;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    justify-content: center;
}

.LeftSide {
    position: fixed;
    height: 100%;
    z-index: -1;
    top: 0%;
    left: 0%;
}

.RightSide {
    position: fixed;
    height: 100%;
    z-index: -1;
    top: 0%;
    right: 0%;
}