:root {
    /* --bg-color: rgb(255 255 240); */
    --card-border: 1px solid rgba(255 255 255 / 0.2);
    --blur-bg: rgba(255 255 255 / 0.5);
    --blur-filter: blur(1.5em);
    --card-border-radius: 1em;
}

:root {
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) { 
    :root {
        /* --blur-bg: rgb(0 0 0 / 0.5); */
        --bg-color: rgb(0 0 0 / 0.5);
    }
}

* {
    box-sizing: border-box;
}



body {
    margin: 0;
    min-height: 100dvh;
    /* background-image: url("https://api.cxl2020mc.top"); */
    background: url("https://api.cxl2020mc.top?idx=0");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

main {
    padding: 1em;
}



.card {
    padding: 0.5em;
    border: var(--card-border);
    background: var(--blur-bg);
    backdrop-filter: var(--blur-filter);
    border-radius: var(--card-border-radius);
}

.info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 20em;
}


.info-container .avatar { 
    max-width: 7em;
    max-height: 7em;
    .avatar-img {
        width: 100%;
        height: 100%;
        clip-path: circle(50% at 50% 50%);
    }
}