body {
    display: grid;
    grid-template: 1fr 1fr 1fr 8fr/1fr 1fr;
}

#userButtons {
    display: flex;
    flex-direction: column; /* Stacks them vertically */
    align-items: flex-end; /* Pushes each individual button to the right */
    grid-area: 1 / 2; 
    justify-content: flex-start; /* Keep the buttons at the top of cell*/
}

#displayTrainers {
    grid-area: 2/1;
}

#trainerList {
    grid-area: 3/1/4/3;
}

ol {
    padding: 20px;
}

#pokemonList {
    grid-area: 4/1/5/2;
}

#displayTrades {
    grid-area: 2/2;
}

#tradeList {
    grid-area: 4/2/5/3;
}

.toggle-btn {
    padding: 10px 20px;
    border: 2px solid #000000;
    background: white;
    color: #000000;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
}

    .toggle-btn:hover {
        background: #FFFFFF;
    }

    .toggle-btn.active {
        background: #000000;
        color: white;
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
    }