:root {
    --card-base: #e4c5ff;
}

@layer page {
    main {
        justify-self: center;

        display: flex;
        flex-direction: column;
        align-items: center;

        padding: 5rem 0;
        gap: 3rem;

        /* background horizontal linear gradient that is black in the center */
        background: linear-gradient(
            to right,
            #ffe4c544 0%,
            /* #ffe4c599 25%, */ #ffe4c5ff 50%,
            /* #ffe4c599 75%, */ #ffe4c544 100%
        );

        @media screen and (max-width: 1024px) {
            padding: 3rem 1rem;
            gap: 3rem;

            .card {
                width: 100%;
            }
        }
    }
}