:root {
    --primary: rgb(34, 30, 30);
    --secondary: rgb(50, 44, 44);
    --text-color-primary: rgb(14, 171, 117);
    --text-color-secondary: rgb(0, 255, 174);
    --font-header-color: #594501;
    --link-color: #FF6EFF;
    --link-color-hover: #FF94FF;
    --light-green: #bafa79;

    --bs-primary: var(--primary);
    --bs-secondary: var(--secondary);
    --bs-body-bg: var(--primary);
    --bs-body-color: var(--text-color-secondary);
    --bs-link-color: var(--link-color);
    --bs-link-hover-color: var(--link-color-hover);
}


/* Archivo */
@font-face {
    font-family: 'archivo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/font/archivo_black.woff2") format("woff2");
}

/* Roboto - Styl standardowy (Normal) 100-900 */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url("/static/font/roboto.woff2") format("woff2");
}

/* Roboto - Kursywa (Italic) 100-900 */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url("/static/font/roboto.woff2") format("woff2");
}

/* Roboto - Pochylenie (Oblique) 100-900 */
@font-face {
    font-family: 'Roboto';
    font-style: oblique 0deg 20deg;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url("/static/font/roboto.woff2") format("woff2");
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--primary);
    color: var(--text-color-secondary);
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

h1.sitename {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 500;
    /*font-size: 2.5rem;*/
    font-size: clamp(1.0rem, 4vw, 2.5rem);
    word-break: break-word;
}

h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

ul {
    padding-left: 2rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


.fst-italic { font-style: italic !important; }
.fst-normal { font-style: normal !important; }

.fw-lighter { font-weight: 200 !important; }
.fw-light   { font-weight: 300 !important; }
.fw-normal  { font-weight: 400 !important; }
.fw-medium  { font-weight: 500 !important; }
.fw-semibold{ font-weight: 600 !important; }
.fw-bold    { font-weight: 700 !important; }
.fw-bolder  { font-weight: 800 !important; }
.fw-black   { font-weight: 900 !important; }

.container,
.container-fluid {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.col {
    flex: 1 0 0%;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.text-center { text-align: center !important; }
.text-start  { text-align: left !important; }
.text-end    { text-align: right !important; }

.fst-italic { font-style: italic !important; }
.fst-normal { font-style: normal !important; }

.fw-lighter  { font-weight: 200 !important; }
.fw-light    { font-weight: 300 !important; }
.fw-normal   { font-weight: 400 !important; }
.fw-medium   { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold     { font-weight: 700 !important; }
.fw-bolder   { font-weight: 800 !important; }
.fw-black    { font-weight: 900 !important; }

.d-flex           { display: flex !important; }
.d-block          { display: block !important; }
.flex-row         { flex-direction: row !important; }
.flex-column      { flex-direction: column !important; }
.flex-wrap        { flex-wrap: wrap !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end    { justify-content: flex-end !important; }
.justify-content-start  { justify-content: flex-start !important; }
.align-items-center     { align-items: center !important; }
.align-items-start      { align-items: flex-start !important; }
.align-items-end        { align-items: flex-end !important; }

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

.m-0  { margin: 0 !important; }
.m-1  { margin: 0.25rem !important; }
.m-2  { margin: 0.5rem !important; }
.m-3  { margin: 1rem !important; }
.m-4  { margin: 1.5rem !important; }
.m-5  { margin: 3rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

.mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }

.p-0  { padding: 0 !important; }
.p-1  { padding: 0.25rem !important; }
.p-2  { padding: 0.5rem !important; }
.p-3  { padding: 1rem !important; }
.p-4  { padding: 1.5rem !important; }
.p-5  { padding: 3rem !important; }

.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.img-fluid { max-width: 100%; height: auto; }
.object-fit-fill { object-fit: fill !important; }

.border { border: 1px solid #dee2e6 !important; }
.border-2 { border-width: 2px !important; }
.border-end { border-right: 1px solid #dee2e6 !important; }
.border-success { border-color: #198754 !important; }
.border-custom-accent { border-color: var(--text-color-primary) !important; }

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background-color: var(--primary);
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-fill > .nav-link,
.nav-fill .nav-item {
    flex: 1 1 auto;
    text-align: center;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

@media (min-width: 768px) {
    .navbar-expand-md {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-md .navbar-nav {
        flex-direction: row;
    }
}

#main {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#left-container {
    min-height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    width: 18%;
}

#lang-list {
    list-style-type: square;
    list-style-position: inside;
    text-align: right;
}

#container {
    min-width: 64%;
}

#right-container {
    min-height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    width: 18%;
}

#header-container {
    background-color: var(--secondary);
}

#logo {
    width: clamp(30px, 5vw, 40px);;
}

#footer-container {
    background-color: var(--secondary);
}

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

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

a.sitename {
    font-family: "archivo", sans-serif;
    font-weight: bold;
    color: var(--text-color-primary);
}

a.sitename:hover {
    text-decoration: none;
    color: var(--text-color-secondary);
}

.navbar-nav .nav-link.nav-element,
.nav-element {
    font-weight: bold;
    color: var(--link-color);
    text-decoration: none;
}

.navbar-nav .nav-link.nav-element:hover,
.nav-element:hover {
    color: var(--link-color-hover);
    filter: brightness(90%);
    text-decoration: underline;
}

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

.article-link:hover {
    filter: brightness(95%);
    text-decoration: none;
}

.article-card {
    background-color: var(--secondary);
    color: var(--text-color-primary);
}

.article-card:hover {
    text-decoration: none;
}

.page-header {
    background-image: linear-gradient(to bottom, var(--secondary) 0%, var(--primary) 100%);
    color: var(--text-color-primary);
}

.katex-display,
.highlight {
    background-color: var(--secondary);
}