.theme-light {
    --color-bg: #eceff4;
    --color-bg-2: #e5e9f0;
    --color-fg-1: #2e3440;
    --color-fg-2: #3b4252;
    --color-fg-3: #434c5e;
    --color-fg-4: #4c566a;
    --color-accent: #81a1c1;
}

.theme-dark {
    --color-bg: #3b4252;
    --color-bg-2: #434c5e;
    --color-fg-1: #eceff4;
    --color-fg-2: #e5e9f0;
    --color-fg-3: #d8dee9;
    --color-accent: #81a1c1;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg);
    color: var(--color-fg-1);
    word-wrap: break-word;
    font-family: 'Inter';
}

h2 {
    color: var(--color-fg-1);
    padding: 0.5rem 0;
}

p, span {
    font-size: 1.2rem;
}

a {
    color: var(--color-fg-2);
    font-style: normal;
    font-size: 1.2rem;
}

article a {
    font-size: 1em;
}

article > p {
    padding-bottom: 1.2em;
}

a:focus {
    outline: var(--color-fg-4) solid 2px;
    border-radius: 3px;
    background-color: var(--color-bg);
}

a:hover {
    color: var(--color-fg-4);
}

li {
    list-style: none;
    padding-bottom: 0.2rem;
}

.icon {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125rem;
}