@charset "UTF-8";

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #777777;
    background-color: #222222;
	margin: 0;
}

p {
	margin: 0;
	padding: 0;
	white-space: initial;
}

span {
	display: block;
}

a:link, a:hover, a:visited, a:active {
	text-decoration: none;
	color: rgb(70, 130, 76);
}

a:hover {
	text-decoration: underline;
}

#header {
    background-color: #017040;
	color: rgba(166, 220, 169, 0.89);
	align-items: center;
	display: flex;
	padding: 0.5em 0em 0.5em 0em;
	justify-content: center;
	background-image: url("overlay.png"), url("circles.svg");
	background-position: top left, center center;
	background-attachment: fixed, fixed;
	background-size: auto, cover;
}

#header a:link, #header a:hover, #header a:visited, #header a:active {
	color: rgba(166, 220, 169, 0.89)
}

#header a:hover {
	text-decoration: none;
	border-bottom: dotted 1px !important;
}

#header h1, section #thanks {
    font-size: 1.3em;
    font-weight: bold;
}

#header h1 {
	background-color: transparent;
	color: white;
}

#header .links {
	padding-left: 1.5em;
}

section {
	background-color: #ededed;
}

section h1 {
	font-size: 1em;
	margin: 0;
	padding: 1em;
    font-weight: bold;
    color: #d2d1d2;
	background-color: rgba(49, 49, 49, 0.975);
    border-radius: 0.6em 0 0 0.6em;
}

#programmer h1 {
    border-radius: 0 0 0 0.6em;
}

section > span {
	padding: 1.33em 1.5em 1.33em 1.5em;
}

section > span h2 {
	margin: 0;
	padding: 0 0 0.33em 0;
	font-size: 1em;
}

section#translations-old > span h2 {
	display: inline;
	padding-right: 0.5em;
}

section > span > span {
	padding-bottom: 1em;
}

section > span > span:last-of-type {
	padding-bottom: 0;
}

section > span > span > span {
	/* padding-left: 1em; */
}

section #thanks {
	padding-top: 1em;
    text-align: center;
	color: rgb(70, 130, 76);
}

section#license, section#warranty {
	padding: 0 1.5em 0.5em 1.5em;
    font-size: 0.8em;
    text-align: justify;
}

section#warranty {
	padding-bottom: 1.5em;
}

section span, section ul li {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

section ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

section ul li {
	padding: 0.2em 0 0.2em 0;
}

section ul li:first-of-type {
	padding-top: 0;
}

section ul li:last-of-type {
	padding-bottom: 0;
}

section#donations .emoji {
	display: inline;
}

section#donations .emoji::after { 
	vertical-align: middle;
	font-size: 0.69em;
}

section#donations .emoji-alba::after { 
	content: "🌙";
}

section#donations .emoji-anton::after { 
	content: "👶🏻";
}

section#donations .emoji-arnau::after { 
	content: "✊🏼";
}

section#donations #showdonation {
	padding-top: 0;
	white-space: initial;
}

@media (prefers-color-scheme: light, dark) {

}

@media (prefers-color-scheme: light) {
    body, section {
        background-color: #FFFFFF;
    }
    #header {
        border-radius: 0.6em 0 0 0;
    }
}

@media (prefers-color-scheme: dark) {
	#header {
		background-color: #0a421a;
        border-radius: 0.6em 0 0 0;
	}
    body, section {
        background-color: #212121;
    }
	section {
		color: #888888;
	}
	section > span h2 {
		color: #a1a1a1;
	}
}