@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

html,
body {
    font-family: "Open Sans", sans-serif;
    padding: 0px;
    margin: 0px;
}

.container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    max-width: 1000px;

    margin-left: auto;
    margin-right: auto;
}

:root {
    color-scheme: light dark;

    --background-color: light-dark(white, #1e1e1e);
    --text-color: light-dark(black, white);
    --link-color: light-dark(purple, orange);

    --button-border-color: light-dark(#cccccc, #666666);

    --menu-bg-color: light-dark(#f0f0f0, #333333);
    --menu-border-color: light-dark(#cccccc, #666666);

    --alternative-bg-color: light-dark(#e0e0e0, #444444);
    --alternative-text-color: light-dark(black, white);

    --warning-bg-color: light-dark(#ffcccc, #813737);
    --warning-border-color: #ff0000;
    --warning-text-color: #ff0000;
}

#mascot {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: -1;
}

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

    &:hover {
        text-decoration: underline;
    }
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

.setting-group {
    border: 2px solid var(--menu-border-color);
    background-color: var(--menu-bg-color);
    border-radius: 10px;
    padding: 10px;
}

.warning-modal {
    border: 2px solid var(--warning-border-color);
    background-color: var(--warning-bg-color);
    border-radius: 10px;
    padding: 5px;
}

code {
    background-color: var(--alternative-bg-color);
    color: var(--alternative-text-color);
    padding: 5px;
    border-radius: 5px;
    border: 1px solid var(--menu-border-color);
}

button, input[type="submit"] {
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    cursor: pointer;
    padding: 5px;

    transition-duration: .15s;
}

.feather-icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.delete-button {
    color: light-dark(rgb(220, 0, 0), rgb(255, 80, 80));
    border-color: light-dark(rgb(220, 0, 0), rgb(255, 80, 80)) !important;
    background-color: light-dark(rgb(255, 240, 240), transparent);
    font-weight: bold;

    &:hover {
        background-color: light-dark(rgb(220, 0, 0), rgb(200, 0, 0));
        border-color: light-dark(rgb(200, 0, 0), rgb(200, 0, 0)) !important;
        color: white;
        transition-duration: .2s;
    }
}

.create-button {
    color: light-dark(rgb(0, 120, 212), rgb(80, 180, 255));
    border-color: light-dark(rgb(0, 120, 212), rgb(80, 180, 255)) !important;
    background-color: light-dark(rgb(240, 248, 255), transparent);
    font-weight: bold;

    &:hover {
        background-color: light-dark(rgb(0, 120, 212), rgb(0, 100, 180));
        border-color: light-dark(rgb(0, 100, 180), rgb(0, 100, 180)) !important;
        color: white;
        transition-duration: .2s;
    }
}

#topbar {
    position: sticky;
    top: 0;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);

    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    justify-content: space-between;

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

    border-bottom: 1px solid var(--menu-border-color);

    .left {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .right {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .topbar-option {
        &:hover {
            text-decoration: none;
            color: var(--text-color);
            transition-duration: .2s;
        }

        span, svg {
            vertical-align: middle;
        }
    }
}

@media (max-width: 420px) {
    #topbar {
        justify-content: center;
    }

    .topbar-option {
        span {
            display: none;
        }

        svg {
            width: 20px;
            height: 20px;
        }
    }

    h1 {
        text-align: center;
    }
}

.badge {
    border: 1px solid var(--menu-border-color);
    border-radius: 10px;
    padding: 4px;
}

#account-settings {
    .account-settings-button-row {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
}