@import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css");
:root {
  font-size: calc(1rem + 0.25vw) !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: inherit;
}

html {
  background: #000;
}
html body {
  font-family: "Lato", sans-serif;
  color: #fff;
  line-height: 1.6;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh - 40px);
  width: 100vw;
}
@media only screen and (max-width: 768px) {
  html body {
    height: 80vh;
  }
}
html body .trekanter {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  height: calc(100vh - 40px);
  width: 100vw;
}
@media only screen and (max-width: 768px) {
  html body .trekanter {
    height: 80vh;
  }
}
html body .trekanter svg {
  position: fixed;
  height: 100vh;
  width: 100vw;
}
@media only screen and (max-width: 768px) {
  html body .trekanter svg {
    height: 80vh;
  }
}
html body :root {
  font-size: calc(1rem + 0.25vw) !important;
}
html body h1 {
  color: #f30;
  margin: 0px;
  font-size: calc(3rem + 1vw);
  line-height: calc(3rem + 1vw);
}
@media only screen and (max-width: 990px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  html body h1 {
    font-size: calc(2rem + 1vw);
  }
}
html body p {
  font-size: 1rem;
}
@media only screen and (orientation: landscape) {
  html body p {
    font-size: 0.8rem;
  }
}
html body a, html body a:active, html body a:visited {
  color: #fff;
  text-underline-offset: 0.1rem;
  -webkit-text-decoration: underline 0.1em #f93;
          text-decoration: underline 0.1em #f93;
  transition: text-decoration-color 300ms, text-underline-offset 300ms;
}
html body a:hover, html body a:active:hover, html body a:visited:hover {
  -webkit-text-decoration: underline 0.25em #f30;
          text-decoration: underline 0.25em #f30;
  text-underline-offset: 0.25rem;
}
html body header {
  /*padding: 20px;
  background: rgba(0, 0, 0, 0.5);*/
}
html body main {
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}
html body footer {
  z-index: 2;
  position: fixed;
  bottom: 0;
  padding: 2rem;
  text-align: left;
}

svg {
  /*.cls-2 {
      fill: url(#linear-gradient);
  }*/
}
svg .cls-1,
svg .cls-2,
svg .cls-3,
svg .cls-4,
svg .cls-5,
svg .cls-6,
svg .cls-7,
svg .cls-8 {
  stroke-width: 0px;
}
svg .cls-1 {
  fill: #00c;
}
svg .cls-3 {
  fill: #3cc;
}
svg .cls-4 {
  fill: #090;
}
svg .cls-5 {
  fill: #f93;
}
svg .cls-6 {
  fill: #f30;
}
svg .cls-7 {
  fill: #fff;
}
svg .cls-8 {
  fill: #939;
}
svg #back #white {
  opacity: 0;
}
svg polygon, svg .cls-1 {
  animation: rotateHue 8s ease-in-out alternate;
}
@keyframes rotateHue {
  from {
    opacity: 0.1;
    filter: hue-rotate(0deg);
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    opacity: 1;
    filter: hue-rotate(360deg);
    -webkit-filter: hue-rotate(360deg);
  }
}

.title {
  animation: pulseTitle 6s ease-out;
  animation-fill-mode: forwards;
}

@keyframes pulseTitle {
  0% {
    filter: hue-rotate(0deg);
    -webkit-filter: hue-rotate(0deg);
  }
  80% {
    filter: hue-rotate(360deg);
    -webkit-filter: hue-rotate(360deg);
    text-shadow: 0px 0px 20px #000;
  }
  90% {
    color: #000;
    text-shadow: 0px 0px 0px #fff;
  }
  100% {
    color: #fff;
    text-shadow: 0px 0px 20px #fff;
  }
}/*# sourceMappingURL=styles.css.map */