@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Neue Haas', 'Neue Haas Grotesk Display Pro', 'Neue Haas Text Pro', neue-haas, Helvetica, 'Open Sans', Arial, Verdana, Calibri, 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
  background-color: #0d0342;
  background: linear-gradient(180deg, #41ebff 0%, #0d0342 5%);
  color: #41ebff;
  font-size: x-large;
  line-height: 1.5;
  margin: 0;
  min-height: 100vh;
  overflow: scroll;
  padding: 5% 0 5em 0;
  position: relative;
  text-align: center;
}
@keyframes twinkle {
  from {
    opacity: 0;
    transform: scale(0.025);
  }
  to {
    opacity: 1;
    transform: scale(0.25);
  }
}
.star {
  animation-direction: alternate;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: twinkle;
  animation-timing-function: ease-in-out;
  position: absolute;
  z-index: 1;
}
h1 {
  font-family: "Hanken Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-size: 2em;
  font-style: normal;
  font-weight: 800;
}
translate-element {
  color: #41ebff;
  background-color: #0d0342;
  border-color: #41ebff;
  position: absolute;
  top: 4em;
  right: 1em;
  z-index: 3;
}
/*
  accent-color: #0a00be;
*/
translate-element li {
  list-style-type: none;
}
translate-element li.selected {
  display: none;
}
translate-element a {
  color: #41ebff;
  text-decoration: none;
}
translate-element a:hover {
  text-decoration: underline;
}
translate-element li a[hreflang="de"]::after {
  color: #41ebff;
  content: " Was ist das? ";
  font-size: 1rem;
}
translate-element li a[hreflang="de"] {
  color: transparent;
  font-size: 1px;
}
translate-element li a[hreflang="de"]::before {
  color: #41ebff;
  content: " 🇩🇪 ";
  font-size: 1rem;
}
translate-element li a[hreflang="en"]::after {
  color: #41ebff;
  content: " What is this? ";
  font-size: 1rem;
}
translate-element li a[hreflang="en"] {
  color: transparent;
  font-size: 1px;
}
translate-element li a[hreflang="en"]::before {
  color: #41ebff;
  content: " 🇬🇧 ";
  font-size: 1rem;
}
translate-element li a[hreflang="fi"]::after {
  color: #41ebff;
  content: " Mitä tämä on? ";
  font-size: 1rem;
}
translate-element li a[hreflang="fi"] {
  color: transparent;
  font-size: 1px;
}
translate-element li a[hreflang="fi"]::before {
  color: #41ebff;
  content: " 🇫🇮 ";
  font-size: 1rem;
}
translate-element li a[hreflang="sv"]::after {
  color: #41ebff;
  content: " Vad är detta? ";
  font-size: 1rem;
}
translate-element li a[hreflang="sv"] {
  color: transparent;
  font-size: 1px;
}
translate-element li a[hreflang="sv"]::before {
  color: #41ebff;
  content: " 🇸🇪 ";
  font-size: 1rem;
}

#laatikko, #qrcode {
  border-radius: 25px;
  height: 306px;
  padding: 25px;
  width: 306px;
}
#laatikko {
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
#laatikko img {
  height: 256px;
  width: 256px;
}
#laatikko .logo, #qrcode {
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.5s all;
}
#laatikko .logo {
  transform: rotate3d(0, 1, 0, 0);
}
#qrcode {
  background-color: #FFF;
  opacity: 0;
  transform: rotate3d(0, 1, 0, 180deg);
}
#qrcode a img {
  border-width: 0;
}
#avain {
  font-size: larger;
  font-weight: bold;
  letter-spacing: 0.25em;
}
#laatikko.avattu .logo {
  opacity: 0;
  transform: rotate3d(0, 1, 0, 180deg);
  z-index: 1;
}
#laatikko.avattu #qrcode {
  opacity: 1;
  transform: rotate3d(0, 1, 0, 0);
  z-index: 2;
}
#ohje, form {
  text-align: left;
  margin: 1em auto;
  max-width: 45em;
  padding: 0 1em;
  z-index: 2;
}
/*
p+p {
  text-indent: 1em;
}
*/
q {
  font-style: italic;
}
input {
  font-size: larger;
}
label, .block {
  display: block
}
.block label {
  display: inline;
}
button {
  background: linear-gradient(16deg, #0a00be, #41ebff);
  border-radius: 0.5em;
  color: #FFF;
  font-size: larger;
  margin: 1em 0;
  padding: 0.5em;
}
a {
  color: #FFF;
  cursor: pointer;
  text-decoration: underline;
}
a.block {
  margin-top: 1em;
}
footer {
  background: linear-gradient(180deg, #0d0342 0em, #0a00be 1.75em, #FFF 2em);
  bottom: 0;
  color: #C00;
  font-family: "Dancing Script", serif;
  font-optical-sizing: auto;
  font-size: xx-large;
  font-style: normal;
  font-weight: 600;
  height: 5em;
  line-height: 1.25;
  padding: 2em 0 0 0;
  position: absolute;
  width: 100%;
}