:root {
    --hue: 175;
    --glass-bg: hsla(var(--hue), 100%, 30%, 0.25);
    --glass-secondary: hsla(var(--hue), 50%, 25%, 0.75);
    --glass-secondary-hover: hsla(var(--hue), 50%, 30%, 0.8);
    --glass-tertiary: hsla(var(--hue), 25%, 90%, 0.65);
    --glass-quaterniary: hsla(var(--hue), 50%, 30%, 0.25);
    --glass-border: hsla(var(--hue), 100%, 15%, 0.5);
    --glass-shadow-color: hsla(var(--hue), 100%, 15%, 0.25);
    --glass-shadow: 0 8px 32px 0 var(--glass-shadow-color);
    --glass-error-color: hsla(5, 100%, 65%, 0.5);
    --glass-success-color: hsla(135, 100%, 65%, 0.5);
    --bg-color-light: hsl(var(--hue), 50%, 75%);
    --bg-color: hsl(var(--hue), 50%, 15%);
    --editor-text-color: hsl(var(--hue), 50%, 10%);
    --foreground-color: hsla(var(--hue), 25%, 95%, 1.0);
    --border-rad: 16px;
    --gaps: 24px;
    --transition-time: 1.25s;
}

body {
    background-color: var(--bg-color);
    margin: 0;
    font-family: sans-serif;
    color: var(--foreground-color);
    display: flex;
    flex-direction: column;
}

.glass-header {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    /* border-radius: 0 0 var(--border-rad) var(--border-rad); */
    border-radius: var(--border-rad);
    margin-inline: calc(var(--gaps) / 2);
    margin-top: var(--gaps);
    padding: var(--gaps);
    height: min-content;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--border-rad);
    padding: var(--gaps);
    margin: var(--gaps);
    display: flex;
    flex-direction: column;
    max-width: 80%;
    width: 800px;
    min-width: 60%;
    justify-self: center;
    justify-content: space-between;
}

.glass-card-narrow {
    max-width: 60%;
    width: 400px;
    min-width: 30%;
    justify-self: center;
}

.editor-card {
    background: var(--glass-quaterniary);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--border-rad);
    display: flex;
    flex-direction: column;
    padding: var(--gaps);
    margin-block: calc(var(--gaps) / 2);
}

.input-field {
    background: var(--foreground-color);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-rad);
    color: var(--editor-text-color);
    padding: 10px;
    margin-bottom: var(--gaps);
    transition: var(--transition-time) ease;
}

.input-field:focus {
    border-radius: calc(var(--border-rad)/2);
}

.editor-toolbar {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: row;
}

.editor-area {
    background: var(--foreground-color);
    border: 1px solid var(--glass-border);
    color: var(--editor-text-color);
    padding: 10px;
    resize: none;
    border-radius: 0 0 var(--border-rad) var(--border-rad);
    min-height: 30%;
    max-height: 80%;
    margin-block: 0;
}

textarea {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

textarea::-webkit-scrollbar {
    display: none;
}

a {
    color: var(--foreground-color);
    text-decoration: none;
}

a:hover {
    box-shadow: var(--glass-shadow);
}

.btn-primary {
    background: var(--glass-secondary);
    border: solid 1px var(--glass-border);
    border-radius: var(--border-rad);
    color: var(--foreground-color);
    padding: 10px;
    transition: var(--transition-time) ease;
    max-width: fit-content;
    max-height: max-content;
    font-size: 1rem;
}

.btn-primary:hover {
    background: var(--glass-secondary-hover);
    box-shadow: var(--glass-shadow);
    border-radius: calc(var(--border-rad)/2);
}

.btn-editor {
    background: var(--glass-secondary);
    border: solid 1px var(--glass-border);
    color: var(--foreground-color);
    padding: 4px;
    transition: var(--transition-time) ease;
    max-width: fit-content;
    max-height: max-content;
    min-width: 24px;
}

.btn-editor:hover {
    background: var(--glass-secondary-hover);
    box-shadow: var(--glass-shadow);
}

.btn-span {
    display: flex;
    flex-direction: row;
    align-self: flex-end;
    gap: 8px;
}

.page-title, .card-title {
    color: var(--foreground-color);
    font-weight: 600;
    font-size: 1.5rem;
    margin-top: calc(var(--gaps) / 2);
}

.card-title {
    margin-top: 0;
    margin-bottom: 1rem;
}

.logo {
    color: var(--foreground-color);
    user-select: none;
    font-weight: 600;
}

.prose-custom h1, .prose-custom h2, .prose-custom h3 {
    color: var(--foreground-color);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.prose-custom h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid var(--glass-secondary-hover);
    padding-bottom: 0.5rem; }

.prose-custom p {
    margin-bottom: 1rem;
    opacity: 0.9;
}

.prose-custom ul li {
    list-style-type: disc;
    margin-left: 1.25rem;
    margin-bottom: 1rem;
}

.prose-custom code {
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

.prose-custom hr {
    border: none;
    height: 1px;
    background-color: var(--glass-secondary-hover);
    margin: 2rem 0;
}

.prose-custom pre {
    background: rgba(0, 0, 0, 0.3);
    color: var(--foreground-color);
    padding: 1rem;
    border-radius: var(--border-rad);
    font-family: monospace;
    font-size: 0.9em;
    line-height: 1.4;
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.prose-custom table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    background: var(--glass-quaterniary);
    border-radius: var(--border-rad);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
}

.prose-custom th,
.prose-custom td {
    border: 1px solid var(--glass-border);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.prose-custom th {
    background: var(--glass-secondary);
    font-weight: 600;
}

.prose-custom tr:nth-child(even) td {
    background: hsla(var(--hue), 50%, 25%, 0.5);
}

.ref {
    cursor: pointer;
    color: var(--glass-tertiary);
    transition: var(--transition-time);
    border-radius: var(--border-rad);
    margin-bottom: 0.25rem;
}

.ref:hover {
    cursor: pointer;
    color: var(--foreground-color);
    box-shadow: var(--glass-shadow);
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

#popup-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gaps) / 2);
    pointer-events: none;
}

.popup-message {
    position: relative;
    width: fit-content;
    margin-left: auto;
    pointer-events: auto;
    padding: 16px 24px;
    border-radius: var(--border-rad);
    color: white;
    font-weight: 500;
    z-index: 1000;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(8px);
    animation: popupSlideIn 1.0s ease-out, fadeOut 1.25s ease-out 3s forwards;
}

.popup-error {
    background: var(--glass-error-color);
}

.popup-success {
    background: var(--glass-success-color);
}

@keyframes popupSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.home-toggle {
    position: fixed;
    width: 50px;
    height: 50px;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--glass-secondary);
    color: var(--foreground-color);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glass-shadow);
    transform: translateX(-100px) scale(1);
    transition: var(--transition-time) ease;
    animation: slideIn var(--transition-time) ease forwards;

    z-index: 1000;
    top: 120px;
    left: 30px;
}

.home-toggle:hover {
    scale: 120%;
}

@keyframes slideIn {
    0% {
        transform: translateX(-100px);
    }
    100% {
        transform: translateX(0);
    }
}