body
body.light {
    --primary:#9a25ae;
    --on-primary:#ffffff;
    --primary-container:#ffd6fe;
    --on-primary-container:#35003f;
    --secondary:#6b586b;
    --on-secondary:#ffffff;
    --secondary-container:#f4dbf1;
    --on-secondary-container:#251626;
    --tertiary:#82524a;
    --on-tertiary:#ffffff;
    --tertiary-container:#ffdad4;
    --on-tertiary-container:#33110c;
    --error:#ba1a1a;
    --on-error:#ffffff;
    --error-container:#ffdad6;
    --on-error-container:#410002;
    --background:#fffbff;
    --on-background:#1e1a1d;
    --surface:#fff7fa;
    --on-surface:#1e1a1d;
    --surface-variant:#ecdfe8;
    --on-surface-variant:#4d444c;
    --outline:#7f747d;
    --outline-variant:#d0c3cc;
    --shadow:#000000;
    --scrim:#000000;
    --inverse-surface:#332f32;
    --inverse-on-surface:#f7eef3;
    --inverse-primary:#f9abff;
    --surface-dim:#e0d8dc;
    --surface-bright:#fff7fa;
    --surface-container-lowest:#ffffff;
    --surface-container-low:#faf1f5;
    --surface-container:#f4ecf0;
    --surface-container-high:#eee6ea;
    --surface-container-highest:#e9e0e4;
}

body.dark {
    --primary:#f9abff;
    --on-primary:#570066;
    --primary-container:#7b008f;
    --on-primary-container:#ffd6fe;
    --secondary:#d7bfd5;
    --on-secondary:#3b2b3c;
    --secondary-container:#534153;
    --on-secondary-container:#f4dbf1;
    --tertiary:#f6b8ad;
    --on-tertiary:#4c251f;
    --tertiary-container:#673b34;
    --on-tertiary-container:#ffdad4;
    --error:#ffb4ab;
    --on-error:#690005;
    --error-container:#93000a;
    --on-error-container:#ffb4ab;
    --background:#1e1a1d;
    --on-background:#e9e0e4;
    --surface:#161215;
    --on-surface:#e9e0e4;
    --surface-variant:#4d444c;
    --on-surface-variant:#d0c3cc;
    --outline:#998d96;
    --outline-variant:#4d444c;
    --shadow:#000000;
    --scrim:#000000;
    --inverse-surface:#e9e0e4;
    --inverse-on-surface:#332f32;
    --inverse-primary:#9a25ae;
    --surface-dim:#161215;
    --surface-bright:#3c383b;
    --surface-container-lowest:#100d10;
    --surface-container-low:#1e1a1d;
    --surface-container:#221e22;
    --surface-container-high:#2d292c;
    --surface-container-highest:#383337;
}

#snack-bowl .snackbar:nth-child(1) {
    margin-bottom: 0px;
}
#snack-bowl .snackbar:nth-child(2) {
    margin-bottom: 20px;
}
#snack-bowl .snackbar:nth-child(3) {
    margin-bottom: 40px;
}
#snack-bowl .snackbar:nth-child(4) {
    margin-bottom: 60px;
}
#snack-bowl .snackbar:nth-child(5) {
    margin-bottom: 80px;
}
#snack-bowl .snackbar:nth-child(6) {
    margin-bottom: 100px;
}
#snack-bowl .snackbar:nth-child(7),
#snack-bowl .snackbar:nth-child(n+8) {
    margin-bottom: 120px;
}

#image-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: masonry; */ /* soon */
    gap: 1rem;
}

#image-list .image-item {
    margin-block-start: 1rem;
}

#image-list .image-item {
    display: flex; /* use block and remove flex directives when using masonary */
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: auto; /* replace with fit-content when using masonary */
}