:root {
    --card-base: hsl(180, 100%, 85%);
}

@layer page {
    body {
        background: hsl(180, 100%, 95%);
    }

    main {
        justify-self: center;

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

        padding: 4rem 0;

        gap: 2rem;

        .search {
            max-width: 80ch;
        }

        button {
            background: hsl(180, 100%, 72%);
        }

        .card a {
            color: color-mix(in srgb, var(--card-base-internal), #000 80%);
        }

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

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