@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --text: #e9e9e9;
    --text-dark: #a3a1a1;
    --background: #0e0e11;
    --background-light: #29292d;
    --primary: #3a31d8;
    --secondary: #08053a;
    --accent: #7480ff;
    --error: #ff9292;
    --success: #80d786;
}

@media (prefers-color-scheme: light) {
    :root {
        --text: #171717;
        --text-dark: #525252;
        --background: #d1d1d6;
        --background-light: #a5a5ac;
        --primary: #2f27ce;
        --secondary: #b5b4f8;
        --accent: #000b8a;
        --error: #ff9292;
        --success: #80d786;
    }
}

body {
    background-color: var(--background);
    color: var(--text);

    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    margin: 0;
}

#header {
    position: relative;
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1em;
    text-align: center;

    background-color: var(--primary);
}

#icon-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: 0.5rem;
}

#settings-svg {
    height: 100%;
    color: var(--text-dark);
}
#settings-svg:hover {
    color: var(--text);
}

.page-heading {
    font-size: clamp(1.5rem, 3vw, 2rem);
    display: inline;
    vertical-align: middle;
    margin: 0;
}

#page-content {
    width: max(50%, 20em);
    margin: auto;
}

#card-container {
    columns: 4 9em;
    column-gap: 1em;
}

.card {
    background-color: var(--background-light);
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    margin-bottom: 1em;
    border-radius: 16px;
    position: relative;
    break-inside: avoid;
    filter: drop-shadow(5px 5px 10px #1f1f24);
}

.card-icon-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 1em;
}

.card-icon {
    width: 100%;
    color: var(--text);
}

.card-heading {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 1em 1em;
    color: var(--text);
    font-size: 1.25rem;
    overflow: hidden;
}