Social links profile challenge - flexbox

What are you most proud of, and what would you do differently next time?

I tried using clamp for dynamic sizing of the content (credit to @MarziaJalili for the idea :) ), which worked in this case, although I'm not sure how applicable it would be in other situations.

    padding-top: clamp(14px, calc(16px + 0.3 * (100vh - 560px)), 38px);
    padding-bottom: clamp(14px, calc(16px + 0.3 * (100vh - 560px)), 38px);
    padding-left: clamp(16px, calc(16px + 0.3 * (100vw - 320px)), 40px);
    padding-right: clamp(16px, calc(16px + 0.3 * (100vw - 320px)), 40px);
    width: clamp(300px, calc(300px + 0.9375 * (100vw - 320px)), 375px);

What specific areas of your project would you like help with?

I used an unordered list for the social links list, but I couldn't get the list items to center, so I added buttons. It worked, but there must be a way to center the text in a list item!

                <ul>
                    <li><button>GitHub</button></li>
                    <li><button>Frontend Mentor</button></li>
                    <li><button>LinkedIn</button></li>
                    <li><button>Twitter</button></li>
                    <li><button>Instagram</button></li>
                </ul>

css:

.card li button {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    background-color: var(--grey700);
    color: var(--fgmain);
    border: none;
    transition: color 0.3s, background-color 0.3s;
}