@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Lexend:wght@100..900&display=swap');
:root {
    /** Base colors */
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;

    /** Theme primary colors */
    --clr-primary-a0: #aa50b2;
    --clr-primary-a10: #b464bb;
    --clr-primary-a20: #bf78c3;
    --clr-primary-a30: #c98bcc;
    --clr-primary-a40: #d29ed4;
    --clr-primary-a50: #dcb1dd;

    /** Theme surface colors */
    --clr-surface-a0: #121212;
    --clr-surface-a10: #282828;
    --clr-surface-a20: #3f3f3f;
    --clr-surface-a30: #575757;
    --clr-surface-a40: #717171;
    --clr-surface-a50: #8b8b8b;

    /** Theme tonal surface colors */
    --clr-surface-tonal-a0: #201920;
    --clr-surface-tonal-a10: #352e35;
    --clr-surface-tonal-a20: #4b454b;
    --clr-surface-tonal-a30: #625c62;
    --clr-surface-tonal-a40: #7a757a;
    --clr-surface-tonal-a50: #938f93;

    /** Success colors */
    --clr-success-a0: #22946e;
    --clr-success-a10: #47d5a6;
    --clr-success-a20: #9ae8ce;

    /** Warning colors */
    --clr-warning-a0: #a87a2a;
    --clr-warning-a10: #d7ac61;
    --clr-warning-a20: #ecd7b2;

    /** Danger colors */
    --clr-danger-a0: #9c2121;
    --clr-danger-a10: #d94a4a;
    --clr-danger-a20: #eb9e9e;

    /** Info colors */
    --clr-info-a0: #21498a;
    --clr-info-a10: #4077d1;
    --clr-info-a20: #92b2e5;
}

.background {
    z-index: -1;
    position: fixed;
    top: 0;
    animation: fadeIn 10s ease-in infinite;
    min-width: 100vw;
    min-height: 100vh;
    object-fit: cover;
}


.header {
    display: flex;
    flex-direction: row;
    height: 40px;
    /* width: 100%; */
    background-color: var(--clr-primary-a0);
    border-radius: 8px;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
    margin: 8px;
}

.name {
    color: var(--clr-light-a0);
    font-size: 18px;
    margin: auto 0 auto 8px;
    font-family: Lexend, serif;
}

.nav-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0 8px 0 auto;
}

.nav-button {
    padding: 4px 8px 4px 8px;
    border-radius: 8px;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
    background-color: transparent;
    color: white;
    border: none;
    font-size: 18px;
    font-family: Lexend, serif;
}

.nav-button:hover {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    background-color: var(--clr-primary-a50);
    color: purple;
    text-decoration-color: purple;
}

body {
    background-color: #32004f;
    margin: 0;
}

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