@font-face {
  font-family: monofur;
  src: url("/api/notes/VAxETF8cpgkJ/download");
}

:root {
	--main-bg: white;
	--main-text: black;
	--nav-bg: darkslategrey;
	--nav-text: white;
	--accent-color: #00a8ff;
    font-family: monofur;
    font-size: 18px;
}

* {
	box-sizing: border-box;
}

a {
    color: #0072ff;
}

body {
	background-image: url("/api/images/vkpmycAwWgis/bg.svg");
	background-repeat: no-repeat;
	background-color: lightgray;
    max-width: 70rem;
    margin: 0 auto;
    margin-bottom: 2rem;
    padding: 0 .5rem;
}

body > header {
    color: white;
    text-align: center;
}

.lang-select {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .2em;
    margin-bottom: -1em;
}
    
.lang-select > a {
    color: white;
}
    
.lang-select > div {
    background: white;
    border-radius: 2em;
    color: #00a8ff;
    padding: 0 .3em;
}

body > main, body > nav, body > footer {
    /*max-width: 70rem;
    margin: 0 auto;*/
}
	
body > main {
    color: var(--main-text);
    margin-top: 1em;
    border-radius: 2em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1em;
	filter: drop-shadow(0.3em 0.3em 0.2em rgba(0, 0, 0, 0.333));
}

body > nav {
    display: flex;
    color: var(--nav-text);
    font-size: 1.4em;
    gap: 0.5em;
    padding: .5rem;
    margin: -.5rem;
    overflow-x: auto;
}

body > nav > a {
    display: flex;
    flex-shrink: 0;
    color: var(--main-text);
    background-color: var(--main-bg);
    box-shadow: 0.3rem 0.3rem 0.2rem rgba(0, 0, 0, 0.333);
    padding: 0 0.6em;
    border-radius: 2em;
    text-decoration: none;
    font-weight: bolder;
    height: 3em;
    min-width: 3em;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 0.4em;

    &:hover, &.active {
        color: var(--accent-color);
    }

    > i.bx {
        font-size: 1.7em;
    }
}

body > nav > .spacer {
    flex-grow: 1;
}

body > footer {
    background-color: var(--nav-bg);
}

form > table {
	width: 100%;
}

mark {
	padding: .2em .5em;
	border-radius: 1em;
	background-color: #0072ff;
	color: white;
}
    
article {
    background-color: var(--main-bg);
	padding: 1em 2em;
	clear: both;
}
    
article > aside {
    margin-bottom: 1em;
}
    
article > img {
    max-width: 100%;
}
    
article footer {
    clear: both;
}

.collection {
    gap: 1em;
}

.collection article {
	border-radius: 0;
	padding: 0;
}

.collection article > a {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: .5em;
    height: 100%;
    padding: 2em;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    word-break: break-word;
}

.collection > article > a h3 {
    margin: 0;
}

.collection article img, .collection article i {
    max-width: 100%;
    align-self: center;
    font-size: 5em;
}

.articles-small article > a {
    flex-direction: row;
    align-items: center;
}

.articles-small article > a > div {
    flex-grow: 1;
}

.articles-small article > a h3 {
    font-weight: normal;
}

.articles-small article img, .articles-small article i {
    width: 1em;
    height: 1em;
    font-size: 2em;
}

.articles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	grid-auto-flow: dense;
}

.articles-list {
	display: flex;
	flex-direction: column;
}

.articles-list > article > a {
    flex-direction: row;
    gap: 2em;
}

.articles-list > article > a > div {
    flex-grow: 1;
}

.articles-list > article > a h3 {
    margin-top: 0;
}

.articles-list > article img {
    height: 15em;
    max-width: calc(100% - 15em);
    object-fit: cover;
}

.articles-list > article:nth-child(2n) > a {
    flex-direction: row-reverse;
}

.video {
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 90vh;
}