@import url('https://unpkg.com/basscss@8.0.2/css/basscss.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://unpkg.com/basscss-btn@1.1.0/css/btn.css');
@import url('https://unpkg.com/basscss-btn-primary@1.1.0/css/btn-primary.css');

:root {
    --primary-color: #255FCF;
    --primary-color-contrast: white;
    --background-color: white;
    --card-background: #eee;
    --text-color: black;
    --accent-color: #484848;
    --accent-color-contrast: white;
}

[data-theme="light"] {
    #activateDarkMode {
        display: initial;
    }

    #activateLightMode {
        display: none;
    }
}

[data-theme="dark"] {
    #activateDarkMode {
        display: none;
    }

    #activateLightMode {
        display: initial;
    }

    --primary-color: #255FCF;
    --primary-color-contrast: black;
    --background-color: black;
    --card-background: #eee;
    --text-color: white;
    --accent-color: white;
    --accent-color-contrast: black;

    .icon {
        filter: invert(1);
    }
}

html,
body {
    background: var(--background-color);
    color: var(--text-color);
    font-size: 18px;
    font-family: Noto Sans, sans-serif;
    font-weight: lighter;
    height: 95vh;
    margin: 0;
}

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

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

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

.primary-color-contrast {
    color: var(--primary-color-contrast);
}

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

.accent-color-contrast {
    color: var(--accent-color-contrast);
}

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

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
    font-weight: lighter;
}

.line {
    height: 10px;
    width: 100px;
}

.profile {
    object-fit: contain;
    max-height: 300px;
    width: auto;
    border-radius: 0.5rem;
    padding-bottom: 0.25rem;
}

.list {
    list-style-type: none;
}

.small {
    font-size: 80%;
}

.main {
    max-width: 64em;
    margin-top: auto;
    margin-bottom: auto;
}

.justify-end {
    justify-content: flex-end;
}

.btn {
    height: 1.2rem;
}

.icon {
    color: var(--background-color);
    height: 2.2rem;
}

.icon-small {
    height: 1.4rem;
}

.invert {
    filter: invert(1);
}