:root {
    /* Colors */
    --background-color: #26292a;
    --forground-color: #1e2122;

    --default: #191e24;
    --primary: #641ae6;
    --secondary: #d425a6;
    --accent: #1a9389;
    --info: #69c8f0;
    --success: #36d399;
    --warning: #fbbd23;
    --error: #f87272;

    /* Buttons */
    --button-primary-hover: #5917ca;
    --button-secondary-hover: #a81b83;
    --button-accent-hover: #12645d;
    --button-info-hover: #4d94b3;
    --button-success-hover: #258f68;
    --button-warning-hover: #a57c16;
    --button-error-hover: #b35252;

    --button-ghost: transparent;
    --button-ghost-hover: rgba(0, 0, 0, 0.25);

    --button-link: transparent;
    --button-link-hover: transparent;

    --ripple-color: rgba(255, 255, 255, 0.7);

    /* Text */
    --text-color: #ffffff;

    --text-badge: rgba(255, 255, 255, 0.8);

    --text-alert: rgba(255, 255, 255, 0.8);
    --text-alert-link: rgba(255, 255, 255, 0.6);

    --text-card-description: #cccccccc;

    /* Navbar */
    --nav-button-hover: rgba(255, 255, 255, 0.2);

    /* Cards */
    --card-shadow: rgba(0, 0, 0, 0.5);

    /* Tooltips */
    --tooltip-background: rgba(0, 0, 0, 0.8);

    /* Modal */
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-background: #1c232a;
    --modal-shadow: rgba(0, 0, 0, 0.2);
    --modal-button-hover: rgba(255, 255, 255, 0.2);
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 0;
    margin: 0;
}

.button {
    background-color: var(--default);
    text-decoration: none;
    font-weight: bolder;
    color: var(--text-color);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.button:hover {
    background-color: #171b1f;
}

.button:active {
    scale: 95%;
}

.button-primary {
    background-color: var(--primary);
    color: var(--text-color);
}

.button-primary:hover {
    background-color: var(--button-primary-hover);
}

.button-secondary {
    background-color: var(--secondary);
    color: var(--text-color);
}

.button-secondary:hover {
    background-color: var(--button-secondary-hover);
}

.button-accent {
    background-color: var(--accent);
    color: var(--text-color);
}

.button-accent:hover {
    background-color: var(--button-accent-hover);
}

.button-ghost {
    background-color: var(--button-ghost);
    color: var(--text-color);
}

.button-ghost:hover {
    background-color: var(--button-ghost-hover);
}

.button-link {
    background-color: var(--button-link);
    color: #641ae6;
    text-decoration: underline;
}

.button-link:hover {
    background-color: var(--button-link-hover);
}

.button-info {
    background-color: var(--info);
    color: var(--text-color);
}

.button-info:hover {
    background-color: var(--button-info-hover);
}

.button-success {
    background-color: var(--success);
    color: var(--text-color);
}

.button-success:hover {
    background-color: var(--button-success-hover);
}

.button-warning {
    background-color: var(--warning);
    color: var(--text-color);
}

.button-warning:hover {
    background-color: var(--button-warning-hover);
}

.button-error {
    background-color: var(--error);
    color: var(--text-color);
}

.button-error:hover {
    background-color: var(--button-error-hover);
}

.button-wide {
    width: 100%;
}

.button-static:active {
    scale: 100%;
}

span.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    pointer-events: none;
    animation: ripple 600ms linear;
    background-color: var(--ripple-color);
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.alert {
    padding: 0.9375rem;
    border-radius: 0.25rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
}

.alert-container {
    display: flex;
    align-items: center;
}

.alert-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
}

.alert-text {
    font-size: 1rem;
}

.alert-primary,
.alert-secondary,
.alert-accent,
.alert-info,
.alert-success,
.alert-warning,
.alert-error {
    color: var(--text-alert);
}

.alert-primary {
    background-color: var(--primary);
}

.alert-secondary {
    background-color: var(--secondary);
}

.alert-accent {
    background-color: var(--accent);
}

.alert-info {
    background-color: var(--info);
}

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

.alert-warning {
    background-color: var(--warning);
}

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

.alert-primary a,
.alert-secondary a,
.alert-accent a,
.alert-info a,
.alert-success a,
.alert-warning a,
.alert-error a {
    color: var(--text-alert-link);
}

.badge {
    padding: 0.3125rem 0.625rem;
    border-radius: 0.3125rem;
    display: inline-block;
}

.badge-primary,
.badge-secondary,
.badge-accent,
.badge-info,
.badge-success,
.badge-warning,
.badge-error {
    color: var(--text-badge);
}

.badge-primary {
    background-color: var(--primary);
}

.badge-secondary {
    background-color: var(--secondary);
}

.badge-accent {
    background-color: var(--accent);
}

.badge-info {
    background-color: var(--info);
}

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

.badge-warning {
    background-color: var(--warning);
}

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

.card {
    transition: all 0.2s;
    text-align: center;
    padding: 0.625rem;
    margin: 0.625rem;
    width: 30vw;
}

@media (max-width: 31.25rem){
    .card {
        transition: all 0.2s;
        width: auto;
    }
}

@media (width < 52.5rem) {
    .card {
        transition: all 0.2s;
        width: auto;
    }
}

.card-title {
    transition: all 0.2s;
    margin-bottom: 0.3125rem;
    font-weight: bold;
    font-size: 1.25rem;
}

.card-description {
    transition: all 0.2s;
    color: var(--text-card-description);
    font-size: 0.9375rem;
    margin: 0;
}

.card-rounded {
    border-radius: 0.625rem;
}

.card-background {
    background-color: var(--forground-color);
    padding: 0.9375rem;
}

.card-shadow {
    box-shadow: 0 0 0.625rem var(--card-shadow);
}

.card-button {
    width: 90%;
}

.image-pixel {
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.nav {
    background-color: var(--forground-color);
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 1.25rem;
}

.nav-header {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.2s;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    border-radius: 0.5rem;
}

.nav-header:hover {
    background-color: var(--nav-button-hover);
}

.nav-header:active {
    scale: 95%;
}

.nav-header img {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.625rem;
}

.nav-header h1 {
    color: var(--text-color);
    font-size: 1.25rem;
}

.nav-item {
    display: flex;
    gap: 0.9375rem;
}

.nav-item a {
    color: var(--text-color);
    text-decoration: none;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.3125rem;
    transition: all 0.2s;
}

.nav-item a:hover {
    background-color: var(--nav-button-hover);
}

.nav-item.left {
    justify-content: flex-start;
}

.nav-item.right {
    justify-content: flex-end;
}

@media (max-width: 48rem) {
    .nav {
        flex-direction: column;
        text-align: center;
    }

    .nav-header {
        margin-bottom: 0.625rem;
    }

    .nav-item {
        justify-content: center;
    }

    .nav-item.right {
        margin-top: 0.625rem;
    }
}

.tooltip {
    overflow: auto;
}

.tooltip-text {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--tooltip-background);
    color: var(--text-color);
    padding: 0.3125rem;
    border-radius: 0.3125rem;
    white-space: nowrap;
    transition: all 0.3s;
}

.tooltip:hover .tooltip-text {
    display: block;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-overlay);
    z-index: 1;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--modal-background);
    padding: 1.25rem;
    border-radius: 1rem;
    box-shadow: 0rem 0rem 1.875rem var(--modal-shadow);
}

.close-btn {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    padding: 0.5rem;
    font-size: 1.2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: center;
}

.close-btn:hover {
    background-color: var(--modal-button-hover);
}

.close-btn:active {
    scale: 95%;
}