@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;600&display=swap');

html, body { max-width: 100%; overflow-x: hidden; }
body { background-color: white; margin: 0; font-family: 'Karla'; font-size: calc(0.3vw + 0.3vh + 14px);
       line-height: 1.5em; }
a { text-decoration: none; color: #e59999; }
a:visited { color: #eb6831; }
a:hover { color: #c78310; }
a:active { color: #ebb049; }
body h1 { font-size: 1.6em; font-family: 'Karla'; }
body h2 { font-size: 1.2em; font-family: 'Karla'; }
body p { font-size: 0.8em; }
header { font-family: 'Karla'; width: calc(100% - 5em); padding: 4em 0; height: 256px; user-select: none;
         margin: 0 auto 0; width: 600px; }
header img { width: 256px; height: 256px; margin-left: 0; }
header p { font-size: 64px; margin: 80px 0 0 300px; line-height: 0.9em; animation-name: logotype; }
header * { opacity: 0; animation-fill-mode: forwards; animation-duration: 16s; position: absolute; }
main { overflow: hidden; }
#lines { animation-name: lines; }
#africa { animation-name: africa; }
#lambda { animation-name: lambda; }

ul#language { opacity: 1; top: 0; width: 600px; text-align: right;}
ul#language li { position: relative; opacity: 1; display: inline-block; height: 1.5em; width: 1.5em; font-weight: bold; }
ul#language li a:link, ul#language li a:hover, ul#language li a:visited, ul#language li a:active { z-index: 1000; background-color: #eb6831; color: white; opacity: 1; width: 1.5em; text-align: center; }
ul#language li span { background-color: black; color: white; opacity: 1; width: 1.5em; text-align: center; }

nav { width: 100%; text-align: center; }
nav ul { margin: 0; padding: 0; }
nav:after { content: ""; height: 1px; position: absolute; background-color: silver; width: 40%; left: 30%;
            margin-top: 0.5em; }

nav li { display: inline-block; font-family: 'Karla'; font-size: 0.9em; font-weight: bold; margin: 0 2em 0; }
nav li a, nav li a:link, nav li a:visited { color: gray; text-decoration: none; }
nav li a:hover, nav li a:active { color: black; }

footer { width: calc(100vw - 7em); margin: 3.5em 0 0 0; padding: 3.5em; background-color: #292833;
         color: #999999; font-family: Karla; font-size: 0.7em; text-align: center; }

#sections { padding-top: 3em; }
#sections div, #sections h1 { width: calc(100% - 7em); margin: 0; padding: 3.5em; overflow: hidden; }
#sections h1 { padding: 2.1875em; }
#sections .text { column-count: 2; column-gap: 3.5em; text-align: justify; }
#sections .banner { background-size: cover; height: 28em; background-position: center; }
#sections .onecol { column-count: 1 !important; }

.author { text-align: right; padding-top: 0 !important; padding-bottom: 0 !important; }
.author img { width: 4em; border-radius: 2em; float: right; margin: 0 0 0 1em; }

form { width: 100%; }
label { font-weight: bold; font-size: 0.8em; }
form p { font-size: 0.8em; }
fieldset { width: calc(25% - 2em) !important; padding: 1em !important; text-align: center;
           display: inline-block; border: none; margin: 0; }
fieldset:nth-child(1), fieldset:nth-child(2) { width: calc(50% - 2em) !important; }
fieldset input { width: 70%; border: solid 0.1em #000; font-family: Karla; font-size: 1em; display: block;
                 margin: auto; padding: 0.3em 0.6em; appearance: none; outline: none;
                 transition: background-color ease-in-out 0.2s; }
fieldset input:focus { background-color: #ffee0030; box-shadow: none; }
fieldset input[type=checkbox] { display: block; margin: 1em auto; border: none;
                                background-color: white; appearance: none; -webkit-appearance: none;
                                width: 0.9em !important; height: 0.9em; cursor: pointer; padding: 0; }
fieldset input[type=checkbox]:checked { margin: 1em auto; background-color: black; }
fieldset input[type=checkbox]:before { content: ""; border: solid 0.1em black; width: 1.5em; height: 1.5em; position: absolute; margin: -0.4em 0 0 -0.4em; }
input[type=submit] { appearance: none; -webkit-appearance: none; transition: background-color ease-in-out 0.2s; cursor: pointer; border: solid 0.1em black; font-weight: bold; background-color: #ebb049; font-family: Karla; font-size: 1em; padding: 0.3em 0.6em; margin: 0 auto; display: block; }
input[type=submit]:hover { background-color: #fad800; }


@media only screen and (min-width: 1200px) {
  main { width: 1200px; margin: 0 auto 0; }
  body { font-size: calc(17.6px + 0.3vh); }
}

@media only screen and (max-width: 960px) {
  #sections .text { column-count: 1; }
  ul#language { width: 300px; }
  fieldset { width: calc(50% - 2em) !important; }
  fieldset:nth-child(2), fieldset:nth-child(1) { width: calc(100% - 2em) !important; }
}

@keyframes lines {
  0% { opacity: 0; }
  25% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes africa {
  15% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes lambda {
  0% { opacity: 0; }
  55% { opacity: 0; }
  65% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes logotype {
  0% { opacity: 0; }
  30% { opacity: 0; }
  100% { opacity: 1; }
}