html {
    height: 100%;
}


:root {
    --button-bg: #eeeeee;
    --moon-color: #7777aa;
}


body.dark {
    --button-bg: #333333;
    --moon-color: #ddddff;
}


body.twilight {
    --button-bg: #33264d;
    --moon-color: #cfcfff;
}


body {
    margin: 0;
    display: flex;
    height: 100vh;
    font-family: Verdana;
}


/* Sidebar */

#sidebar {

    height: 100vh;
    width: 250px;

    display: flex;
    flex-direction: column;

    padding: 15px;

    box-sizing: border-box;

    border-right: 1px solid #ccc;

    transition: transform 0.3s ease;

}


#sidebar.hidden {

    transform: translateX(-100%);

}


#noteList {

    flex: 1;

    overflow-y: auto;

    margin-top: 15px;

    display: flex;

    flex-direction: column;

    gap: 8px;

}



/* Editor */

#editorContainer {

    flex: 1;

    height: 100vh;

    padding: 20px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

}


#editor {

    flex: 1;

    display: flex;

    flex-direction: column;

    padding: 20px;

    box-sizing: border-box;

}



/* Empty state */

#noNote {

    padding: 20px;

}


.big {

    font-size: 24px;

    color: #000051;

}


#noNote p {

    margin-top: 0;

    color: #666;

}



/* Title */

#title {

    width: 100%;

    padding: 10px;

    font-size: 1.5em;

    font-weight: bold;

    font-family: Verdana;

    box-sizing: border-box;

}



/* Rich editor */

#body {

    flex: 1;

    width: 100%;

    min-height: 500px;

    padding: 15px;

    margin-top: 15px;

    font-family: Verdana;

    font-size: 18px;

    line-height: 1.5;

    background-color: rgb(226, 226, 226);

    border-radius: 8px;

    border: 1px solid #ccc;

    overflow-y: auto;

    outline: none;

    box-sizing: border-box;

}



/* Formatting buttons */

#formatButtons {

    display: flex;

    gap: 8px;

}


#formatButtons button {

    width: 35px;

    height: 35px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

}



/* Notes */

#noteList button {

    width: 100%;

    padding: 10px;

    border: none;

    border-radius: 8px;

    background-color: #eeeeee;

    text-align: left;

    cursor: pointer;

    font-family: Verdana;

    transition: background-color 0.2s;

}


#noteList button:hover {

    background-color: #dddddd;

}



/* Main buttons */

#new {

    background-color: rgb(0, 136, 255);

    color: white;

    border: none;

    border-radius: 8px;

    padding: 10px;

    cursor: pointer;

}


#save {

    background-color: #007604;

    color: rgb(212, 255, 212);

    border: none;

    border-radius: 8px;

    padding: 10px 16px;

    cursor: pointer;

}


#delete {

    background-color: #690400;

    color: rgb(255, 128, 128);

    border: none;

    border-radius: 8px;

    padding: 10px 16px;

    cursor: pointer;

}



/* Twilight */

body.twilight {

    background-color: #1b1630;

    color: #f0d9ff;

}


body.twilight #sidebar {

    border-color: #443366;

}


body.twilight #noteList button {

    background-color: #33264d;

    color: #f0d9ff;

}


body.twilight #noteList button:hover {

    background-color: #463461;

}


body.twilight #title,
body.twilight #body {

    background-color: #241c38;

    color: #f0d9ff;

}



/* Theme buttons */

.themeButton {

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: var(--button-bg);

    transition: transform 0.2s, background-color 0.2s;

}


.themeButton:hover {

    transform: scale(1.1);

}



/* Sun */

.sunIcon {

    width: 16px;

    height: 16px;

    background-color: #ffaa00;

    border-radius: 50%;

}



/* Moon */

.moonIcon {

    width: 18px;

    height: 18px;

    background-color: var(--moon-color);

    border-radius: 50%;

    position: relative;

}


.moonIcon::after {

    content: "";

    width: 16px;

    height: 16px;

    background-color: var(--button-bg);

    border-radius: 50%;

    position: absolute;

    left: 7px;

    top: -2px;

}



/* Sidebar toggle */

#sidebarToggle {

    position: fixed;

    top: 15px;

    right: 15px;

    z-index: 10;

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    background-color: var(--button-bg);

    font-size: 20px;

}

.warn {
    font-family: Verdana;
    font-size: 32px;
    font-weight: bold;

    background: linear-gradient(
        90deg,
        red,
        yellow,
        red
    );

    background-size: 300%;

    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;

    animation: warnGradient 2s linear infinite;
}


.sunset {
    font-family: Verdana;
    font-size: 18px;
    font-weight: normal;

    background: linear-gradient(
        90deg,
        orange,
        pink,
        purple,
        orange
    );

    background-size: 300%;

    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;

    animation: sunsetGradient 5s linear infinite;
}


@keyframes warnGradient {
    from {
        background-position: 0%; 
    }

    to {
        background-position: 300%;
    }
}


@keyframes sunsetGradient {
    from {
        background-position: 0%;
    }

    to {
        background-position: 300%;
    }
}

/* Gem Menu */
#gemMenu {
    position: fixed;
    z-index: 9999;
    width: 210px;
    max-height: 280px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #7774;
    border-radius: 12px;
    background: var(--gem-menu-bg, #20212a);
    color: var(--gem-menu-text, #f5f5f5);
    box-shadow: 0 10px 35px #0005;
}

#gemMenu[hidden] {
    display: none;
}

.gemOption {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.gemOption:hover,
.gemOption:focus-visible {
    background: #8882;
}

.gemSwatch {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #171923;
    background: var(--gem-color);
    box-shadow: 0 0 10px color-mix(
        in srgb, var(--gem-color) 35%, transparent
    );
}

/* Gem text */
.gem {
    display: inline;
    position: relative;
    font-weight: 650;
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gemGradient 5s ease-in-out infinite alternate;
}

.gem::after {
    content: "✦";
    display: inline-block;
    margin-left: 2px;
    font-size: 0.65em;
    vertical-align: super;
    color: var(--sparkle-color);
    opacity: 0;
    animation: gemSparkle 3.5s ease-in-out infinite;
    pointer-events: none;
}

.gem-1 {
    --sparkle-color: #ff9aaa;
    background-image: linear-gradient(
        100deg, #ff5268, #ffb1ba, #e92f59, #ff5268
    );
}

.gem-2 {
    --sparkle-color: #ffd1a4;
    background-image: linear-gradient(
        100deg, #ff9b45, #ffe0a3, #f06b30, #ff9b45
    );
}

.gem-3 {
    --sparkle-color: #fff4ae;
    background-image: linear-gradient(
        100deg, #c7a51d, #fff4ae, #f6d64a, #c7a51d
    );
}

.gem-4 {
    --sparkle-color: #b1ffd0;
    background-image: linear-gradient(
        100deg, #35b974, #b1ffd0, #56df91, #35b974
    );
}

.gem-5 {
    --sparkle-color: #b8e1ff;
    background-image: linear-gradient(
        100deg, #3984ff, #b8e1ff, #55aaff, #3984ff
    );
}

.gem-6 {
    --sparkle-color: #e2c8ff;
    background-image: linear-gradient(
        100deg, #8956df, #e2c8ff, #b18aff, #8956df
    );
}

.gem-7 {
    --sparkle-color: #ffe0f3;
    background-image: linear-gradient(
        100deg, #ef65b8, #ffe0f3, #ff91d2, #ef65b8
    );
}

.gem-8 {
    --sparkle-color: #ffffff;
    background-image: linear-gradient(
        100deg, #9cb9dc, #ffffff, #d8e7f7, #9cb9dc
    );
}

@keyframes gemGradient {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

@keyframes gemSparkle {
    0%, 75%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    82% {
        opacity: 0.9;
        transform: scale(1.15) rotate(25deg);
    }
    90% {
        opacity: 0;
        transform: scale(0.7) rotate(45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gem,
    .gem::after {
        animation: none;
    }

    .gem::after {
        display: none;
    }
}

/* Light theme */
body.light {
    --gem-menu-bg: #ffffff;
    --gem-menu-text: #222222;
}