.note {
    background-color: var(--note-bg);
    color: var(--note-fg);
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: var(--note-shadow) 4px 4px 24px;
    width: min(400px, 90%);
    position: relative;
}

.note.wrapper {
    background-color: transparent;
    padding: 0;
    border-radius: none;
}

.note a {
    color: var(--note-fg);
}

.note .circle {
    position: absolute;
    right: 1rem;
    background-color: var(--note-accent);
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    top: 50%;
    translate: 0 -50%;
}

.note .header {
    background-color: var(--note-accent);
    padding: 0.5rem 1rem;
    border-radius: 1rem 1rem 0 0;
    display: flex;
    justify-content: end;
}

.note .header .close {
    height: 1.6rem;
    width: 1.6rem;
    font-size: 1.2rem;
    border-radius: 50%;
    font-size: larger;
    background-color: var(--note-close-bg);
    color: var(--note-close-fg);
}

.note .header .close,
.note .header .close:hover {
    text-decoration: none;
}

.note .content {
    background-color: var(--note-bg);
    padding: 1rem;
}

.note .footer {
    background-color: var(--note-accent);
    padding: 0.7rem 1rem;
    border-radius: 0 0 1rem 1rem;
}

.note {
    --note-fg: black;
    --note-shadow: #959da533;

    --note-close-bg: #ffc5c1;
    --note-close-fg: #F66151;
}

.note-yellow {
    --note-bg: #fff6cb;
    --note-accent: #ffee92;
}

.note-pink {
    --note-bg: #ffe3f1;
    --note-accent: #ffc5e1;
}

.note-green {
    --note-bg: #e7f6e4;
    --note-accent: #d1ebcb;
}

.note-purple {
    --note-bg: #f2e5ff;
    --note-accent: #e2d0f5;
}

.note-blue {
    --note-bg: #e7f3ff;
    --note-accent: #cce7ff;
}

.note-grey {
    --note-bg: #edebe9;
    --note-accent: #dddad8;
}

.note-black {
    --note-fg: #f5f5f5;
    --note-bg: #5e5e5e;
    --note-accent: #3f3d3c;

    --note-close-bg: #38292A;
    --note-close-fg: #DA594B;
}

.note-white {
    --note-bg: #fafafb;
    --note-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
    .note {
        --note-fg: #white;
        --note-shadow: #6e757c33;

        --note-close-bg: #38292A;
        --note-close-fg: #DA594B;
    }

    .note-yellow {
        --note-bg: #7c7348;
        --note-accent: #7c6b0f;
    }

    .note-pink {
        --note-bg: #7c606e;
        --note-accent: #7c425e;
    }

    .note-green {
        --note-bg: #647361;
        --note-accent: #4e6848;
    }

    .note-purple {
        --note-bg: #6f627c;
        --note-accent: #5f4d72;
    }

    .note-blue {
        --note-bg: #64707c;
        --note-accent: #49647c;
    }

    .note-grey {
        --note-bg: #6a6866;
        --note-accent: #5a5755;
    }

    .note-black {
        --note-fg: #f5f5f5;
        --note-bg: #5e5e5e;
        --note-accent: #3f3d3c;

        --note-close-bg: #6C4B48;
        --note-close-fg: #F66151;
    }

    .note-white {
        --note-bg: #222226;
        --note-accent: #2e2e32;
    }
}