:root {
    --accent-color: #17654b;
    --secondary-color: #9ccc81;
    --tertiary-color: #efffe5;
    --background-color: #e9f3fc;
    --padding: 1.2rem;
    --radius: 1.2rem;
}

html, body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    user-select: none;
}
html {
    background-image: url(bg.webp);
    background-size: cover;
    background-position: 50%;
    &:before {
        content: '';
        display: block;
        position: fixed;
        inset: 0;
        background: var(--secondary-color);
        opacity: .5;
    }

    body {
        flex-direction: column;
        > div {
            background: rgba(255 255 255 / 85%);
            padding: var(--padding);
            border-radius: var(--radius);
            box-shadow: 0 1rem 2rem rgba(0 0 0 / 15%);
            border: 1px solid rgba(255 255 255 / 70%);
            backdrop-filter: blur(1rem) saturate(600%);
            -webkit-backdrop-filter: blur(1rem) saturate(600%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            > img {
                width: 100%;
                max-width: 360px;
            }

            ul {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: row;
                gap: var(--padding);

                li {
                    transition: .3s;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: var(--radius);
                    background: var(--tertiary-color);
                    width: 117px;
                    box-shadow: 0 1rem 2rem rgba(0 0 0 / 15%);
                    border: 1px solid rgba(255 255 255 / 90%);

                    &:hover {
                        transform: scale(1.05);
                        box-shadow: 0 1rem 2.5rem rgba(0 0 0 / 25%);
                        background: #fff;
                    }

                    a {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: var(--padding);
                        flex-direction: column;

                        div {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex: 1;
                            aspect-ratio: 1;
                            width: 50px;
                            height: 50px;
                            margin-bottom: .5rem;
                        }

                        span {
                            font-size: 1rem;
                            color: var(--accent-color);
                            font-weight: 600;
                        }
                    }
                }
            }
        }

        > span {
            display: block;
            color: #fff;
            text-align: center;
            margin-top: 1rem;
            background: #17654b90;
            padding: var(--padding);
            border-radius: var(--radius);
            box-shadow: 0 .5rem 1rem rgba(0 0 0 / 25%);
            border: 1px solid rgba(255 255 255 / 30%);
            backdrop-filter: blur(1rem) saturate(150%);
            -webkit-backdrop-filter: blur(1rem) saturate(150%);
            font-weight: 500;
            font-size: .95rem;
            line-height: 1.2rem;
        }
    }
}


@media (width <=768px) {
    html {
        background-position: 40% 50%;
        body {
            > div{
                max-width: calc(100vw - calc(var(--padding) * 2));
                ul {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    width: 100%;
                    li {
                        width: 100%;
                        max-width: 100%;
                    }
                }
            }
            >span {

                max-width: calc(100vw - calc(var(--padding) * 2));
            }
        }
    }
}