body      {--colorBack: #FFFFFF; --colorFont: #000000; --iconInvert: 1;}
body.dark {--colorBack: #000000; --colorFont: #FFFFFF; --iconInvert: 0;}

html {margin: 0; padding: 0;}
body {margin: 0; padding: 0; font-family: sans-serif; background: var(--colorFont); color: var(--colorBack);}
#body {display: flex; height: 100vh; overflow: hidden; min-height: 100vh}

#header {font-size: 26px; line-height: 120%; padding: 20px 0; position: relative; flex-basis: 50%; overflow: hidden; flex-shrink: 0; height: calc(100% - 40px);}
#header h1 {margin: 0; padding: 0; font-size: 100px; line-height: 110%; position: relative; z-index: 10;}
#header h1 a {text-decoration: none; display: flex; align-items: center; margin: 10px 150px 10px 40px; flex-wrap: wrap;}
#header h1 a img {width: 100px; height: 100px; padding-right: 0.5ex;}
#header .switches {position: absolute; right: 20px; top: 10px; z-index: 20; display: flex; flex-direction: column; align-items: flex-end;}
#header .switches a {padding: 0 15px; text-decoration: none; font-weight: 600; margin-top: 10px;}
#header h1 a, #header .switches a {color: #FFFFFF; filter: drop-shadow(0 0 10px #000000);}
#header h1 a:hover,#header .switches a:hover {filter: drop-shadow(0 0 20px #000000);}
#headerphoto {position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover;}
#footer {position: absolute; left: 0; bottom: 0; color: #FFFFFF; padding: 0 10px; font-size: 16px;}

#content {background: linear-gradient(90deg, var(--colorBack) 75%, color-mix(in srgb, var(--colorBack), var(--colorFont) 10%)); box-shadow: 0 0 15px var(--colorBack); color: var(--colorFont); padding: 40px 50px; flex-basis: 50%; overflow: auto; position: relative;}
#content h2 {margin: 40px 0 20px;}
#content h2:first-child {margin-top: 0;}
#content div.back {float: right; text-decoration: none; font-weight: 600;}
#content div.back a {text-decoration: none;}
#content div.back + h2 {margin-top: 0; margin-bottom: 10px}
#content div.written {font-style: italic;}
#content div.tags {margin-bottom: 30px; font-style: italic;}
#content p {margin: 10px 0;}
#content a {color: var(--colorFont);}
#content a:hover {filter: drop-shadow(0 0 10px color-mix(in srgb, var(--colorBack), var(--colorFont) 50%));}

#content .boxes {display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 10px 0; grid-gap: 10px; font-size: 120%;}
#content h2 + .boxes {padding-top: 0;}
#content .boxes > a {display: flex; flex-direction: column; text-align: right; border: 1px solid var(--colorBack); border-left-color: var(--colorFont); border-bottom-color: var(--colorFont); padding: 10px; height: 50px; text-decoration: none; justify-content: center; font-weight: 300; position: relative;}
#content .boxes > a strong, #content .boxes > a span {position: relative; text-shadow: -2px 0 var(--colorBack), 0 2px var(--colorBack), 2px 0 var(--colorBack), 0 -2px var(--colorBack);}
#content .boxes > a img {position: absolute; left: 10px; top: 10px; height: 50px; object-fit: contain; filter: invert(var(--iconInvert));}
#content .boxes > a img:last-child {width: calc(100% - 20px);}
#content .boxes > a:hover {background: var(--colorBack);}

#content .filter {margin: 20px 0 10px; text-align: right;}
#content .filter input {border: none; border-bottom: 1px solid var(--colorFont); background: var(--colorBack); color: var(--colorFont);}

#content .texts > a {display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px; margin-top: 10px; text-decoration: none; font-weight: normal; background: var(--colorBack); border: 1px solid var(--colorBack); border-left-color: var(--colorFont); border-bottom-color: var(--colorBack);}
#content .texts > a strong {display: block; font-size: 110%;}
#content .texts > a i {display: block; flex-basis: 90%;flex-grow: 1; font-style: normal;}
#content .texts > a i span {display: inline-block; padding: 0 5px; border: 1px solid var(--colorBack); border-radius: 8px;}
#content .texts > a i span:hover {border-color: var(--colorFont);}

@media screen and (max-width: 800px) {
	#body {flex-direction: column; overflow: visible; height: unset;}
	#header {flex-basis: 66vh;}
	#header h1 a {margin-right: 40px;}
	#header a.language {bottom: 20px; top: unset;}
	#body.text #header {flex-basis: 150px;}
	#content {flex-basis: unset; overflow: visible; flex-grow: 1; padding: 25px 25px 50px;}
}
@media screen and (max-width: 1200px) {
	#content .boxes {padding: 0; grid-template-columns: repeat(2, 1fr);}
}

form {display: flex; flex-direction: column;}
form input, form select, form textarea {margin-bottom: 10px;}
form textarea {height: 500px;}