#NOTES_CONTAINER {
    display: flex;
    position: absolute;
    right: 0; 
    width: var(--offsetWidth);
    margin-inline: 20px;
    margin-top: 90px;
    flex-wrap: wrap;
    gap: var(--margin);
    padding-bottom: 200px;
}
#PINNED {
    display: flex;
    height: fit-content;
    border-bottom: 2px dashed var(--color-base2);
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
#PINNED note .topBar::after {
    content: "";
    position: absolute;
    right: 10px; background: #feb529;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    animation: glow 1.5s ease;
}
note {
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    color: #fff !important;
    background: var(--color-base2-lighter);
    display: flex;
    flex: 1 1 400px;
    flex-direction: column;
    position: relative;
    box-shadow: 0 10px 10px var(--color-base2);
    transition: box-shadow .5s ease;
    backdrop-filter: blur(20px);
    max-width: 100%;
}
note.edited {
    animation: glow 2s .5s ease;
}
@keyframes glow {
    from { filter: brightness(100%) }
    50% { filter: brightness(150%) }
    to { filter: brightness(100%) }
}
note.checked {
    animation: glow 2s 2s ease;
}
note.new {
    right: 100vw;
    animation: moveLeft .5s .5s ease both, glow 2s 2s ease;
}
@keyframes moveLeft { to { right: 0; } }
note.checked #NOTE_HEADER {
    text-decoration: line-through;
    font-style: italic;
    text-decoration-thickness: 4px;
}
note.checked .topBar::after {
    content: "";
    background: #00ff00;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    position: absolute;
    right: 10px;
}
note .topBar span#TIME { 
    white-space: pre;
    position: absolute;
    top: 0; right: 40px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px; 
    padding: 10px;
    background: #00000029;
    color: #dedede;
}
note .topBar {
    display: flex;
    height: 28px;
    color: var(--color-font2);
    gap: 10px;
    transition: all .5s ease;
    overflow: auto;
    justify-content: flex-end;
    align-items: center;
    margin: 10px;
}
note .topBar::-webkit-scrollbar { display: none;}
note .topBar .grp .option {
    height: 28px;
    width: 28px;
    opacity: 0.4;
    filter: blur(20px);
}
note .topBar .grp { 
    display: flex;
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    left: 14px;
}
note:hover, note:focus { box-shadow: 15px 15px 0px var(--color-base2) !important; filter: hue-rotate(10deg); }
note:hover > .topBar .grp { box-shadow: 0 0 5px black; }
note:hover > .topBar .grp .option, note:focus { opacity: 1 !important; filter: blur(0) hue-rotate(0deg) !important; }
note:focus { outline: 2px dashed var(--color-base1); }
note .topBar .grp .option#CHECK { background-color: #00ff00 }
note .topBar .grp .option#PIN { background-color: #ffb700 }
note .topBar .grp .option#DELETE { background-color: #ff6161 }
note .topBar .grp .option:hover { filter: brightness(60%) }

note #NOTE_HEADER {
    margin-top: 10px;
    margin-bottom: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-inline: 15px;
    margin-right: 15px;
}
note #NOTE_HEADER::after {
    content: "";
    display: inline-block;
    height: 0; width: 0;
    border-left: 12px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    position: relative;
    margin-left: -50px;
    opacity: 0;
    transition: all .2s  ease;
}
note:hover > #NOTE_HEADER::after {
    opacity: 1;
    margin-left: 20px;
}
note #NOTE_TEXT {
    padding: 10px;
    margin-top: 15px;
    background: #00000029;
    border-radius: 10px;
    font-size: large;
    overflow: auto;
    max-height: 50vh;
    margin-inline: 15px;
}

note .items {
    padding: 5px;
    display: grid;
    gap: 10px;
}
note .items .item {
    background: #00000029;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
}
note.msg {
    text-align: center;
}
note.msg h1 {
    line-height: 2em;
    align-items: center;
    display: flex; gap: 10px;
    justify-content: center;
}