@font-face {
    font-family: "Finlandica";
    src: url("https://dlup.s3.eu-north-1.amazonaws.com/static/fonts/finlandica-vari.ttf") format("truetype");
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("https://dlup.s3.eu-north-1.amazonaws.com/static/fonts/jetbrains-mono-regular.woff2") format("woff2");
}

body {
  font-family: JetBrains Mono, system-ui;
  background-color: #181a1b;
  color: #e8e6e3;
  padding: 1rem;
  box-sizing: border-box;
  margin: 0;
  height: 100%;
  text-align: center;
  transition-duration: .25s;
  overflow: hidden;
}

header {
  width: 100%;
  margin: 0;
  font-size: 1rem;
}

div#main {
  position: absolute;
  top: 30%;
  width: 100%;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, -0.02, 1, -0.25);
}

h1 {
  font-size: 4rem;
  position: absolute;
  width: 100%;
}

footer {
  font-family: "Finlandica", sans-serif;
  align-self: flex-start;
  position: absolute;
  bottom: 0;
  right: 1em;
  margin-bottom: 10px;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, -0.01, 1, -0.25);
}

footer svg {
  width: 1em;
  height: 1em;
  vertical-align: baseline;
  margin-left: .5em;
}

a, a:visited {
  color: #d0d0d0;
}

a:hover {
  color: #fafafa;
}

div#msg {
  text-align: left;
  transition-duration: 0s;
  font-size: 1.2rem;
}
.float {
  font-style: italic;
  font-size: 1.1rem !important;
}
img.logo {

  border-radius: 50%;
  cursor: pointer;
  width: 48px;
  height: 48px;
  top: 24px;
  left: 24px;
  position: absolute;
  transition-duration: .1s;
}

#main-shadow-1 {
  -webkit-animation: shadow1 57s infinite;
  animation: shadow1 57s infinite;
  /*text-shadow: 3px -1px 0px #15dc60;*/
}

#main-shadow-2 {
  -webkit-animation: shadow2 33s infinite; /* Chrome, Safari, Opera */
  animation: shadow2 33s infinite;
  /*text-shadow: -3px 1px 0px #fc1560;*/
}
@-webkit-keyframes shadow1 {
  0% {text-shadow: 3px -1px 0px #15dc60;}
  50% {text-shadow: -2px 0px 1px #15dc60;}
}
@keyframes shadow1 {
  0% {text-shadow: 3px -1px 0px #15dc60;}
  50% {text-shadow: -2px 0px 1px #15dc60;}
}
@-webkit-keyframes shadow2 {
  25% {text-shadow: -3px 1px 0px #fc1515;}
  75% {text-shadow: 2px 0px 1px #fc1515;}
}
@keyframes shadow2 {
  25% {text-shadow: -3px 1px 0px #fc1515;}
  75% {text-shadow: 2px 0px 1px #fc1515;}
}