a,
abbr,
acronym,
address,
applet,
big,
blockquote,
body,
caption,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
ul,
var {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
body {
  line-height: 1;
  color: #000;
  background: #fff;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption,
table,
td,
th {
  vertical-align: middle;
}
caption,
td,
th {
  text-align: left;
  font-weight: 400;
}
a img {
  border: none;
}
.no-wrap {
  white-space: nowrap;
}
.small-caps {
  font-size: 0.9em;
  line-height: 1.26em;
  letter-spacing: 0.05em;
  vertical-align: baseline;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
body {
  display: block;
  display: -ms-flexbox;
  display: box;
  display: flex;
  min-height: 100vh;
  box-sizing: border-box;
  -o-box-orient: vertical;
  -ms-flex-flow: column;
  flex-flow: column;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  color: #333;
  background: #f0f0f0;
  font-family: Merriweather, Georgia, serif;
  font-size: 14px;
  transition: color 0.5s ease-in-out, background 0.5s ease-in-out;
}
footer,
header,
main {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 80%;
  max-width: 90em;
  z-index: 2;
  transition: opacity 0.5s ease-in-out;
}
@media (max-width: 1000px) {
  footer,
  header,
  main {
    width: 90%;
  }
}
.center footer,
.center header,
.center main {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  transition: opacity 2.5s ease-in-out 5s;
  animation: a 5s 5s ease-in-out forwards;
}
footer {
  padding-bottom: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.dark {
  color: #eee;
  background: #333;
}
section {
  width: 100%;
  overflow: hidden;
}
h1 {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  margin: 3em 0 1em;
  font-size: 1em;
  font-weight: 700;
}
@media (max-width: 1000px) {
  h1 {
    margin-top: 5%;
  }
}
.contact {
  margin-bottom: 1em;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.contact li {
  display: inline-block;
  margin-right: 1em;
}
@media (max-width: 600px) {
  .contact {
    font-size: 0.8em;
  }
}
.about,
.lists,
.top,
footer {
  animation: b 4s;
}
.top {
  animation-delay: -3s;
}
.about {
  animation-delay: -2.5s;
}
.lists {
  animation-delay: -2s;
}
footer {
  animation-delay: -1.5s;
}
.lists ul,
h2,
h3,
p {
  display: block;
  margin: 1em auto;
  font-size: 3em;
  line-height: 1.4em;
}
@media (max-width: 1300px) {
  .lists ul,
  h2,
  h3,
  p {
    font-size: 2.5em;
  }
}
@media (max-width: 1000px) {
  .lists ul,
  h2,
  h3,
  p {
    font-size: 2em;
  }
}
@media (max-width: 800px) {
  .lists ul,
  h2,
  h3,
  p {
    font-size: 1.5em;
  }
}
@media (max-width: 600px) {
  .lists ul,
  h2,
  h3,
  p {
    font-size: 1.2em;
    line-height: 1.6em;
  }
}
h3 {
  margin-bottom: 0;
}
.lists ul {
  margin-top: 0;
}
.big {
  font-size: 4em;
}
@media (max-width: 1300px) {
  .big {
    font-size: 3.5em;
  }
}
@media (max-width: 1000px) {
  .big {
    font-size: 3em;
  }
}
@media (max-width: 800px) {
  .big {
    font-size: 2em;
  }
}
@media (max-width: 600px) {
  .big {
    font-size: 1.5em;
  }
}
.legal {
  font-size: 10px;
}
@media (max-width: 600px) {
  .legal {
    font-size: 8px;
  }
}
a {
  color: #333;
  transition: background 0.2s ease-in-out, color 0.5s ease-in-out;
}
.dark a {
  color: #eee;
}
a:hover {
  background: #333;
}
a:hover {
  outline: 1px solid #333;
}
.dark a:hover {
  background: #eee;
}
.dark a:focus {
  outline: 1px solid #eee;
}
.header {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.4em;
}
@media (max-width: 600px) {
  .header {
    font-size: 0.6em;
  }
}
.award,
.brand,
.likes {
  display: inline-block;
  vertical-align: top;
  margin-right: 0.55em;
}

@keyframes a {
  0% {
    transform: none;
  }
  to {
    transform: translateY(-100vh);
  }
}
@keyframes b {
  0%,
  80% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    transform: translateY(5vh);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    transform: none;
  }
}
@keyframes c {
  0%,
  9.090909090909092% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    max-width: 100vw;
    max-height: 100vh;
  }
  9.090909090909092%,
  to {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    max-width: 0;
    max-height: 0;
  }
}
@keyframes d {
  80%,
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    max-width: 100vw;
    max-height: 100vh;
  }
  0%,
  80% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    max-width: 0;
    max-height: 0;
  }
}
svg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: auto;
  z-index: 1;
  transform-origin: center;
  transform: translate(-50%, -50%);
  animation: f 4s;
}
@media (max-aspect-ratio: 1/1) {
  svg {
    width: 100vh;
  }
}
circle {
  mix-blend-mode: screen;
  fill: #ddd;
  stroke: purple;
  stroke-width: 0;
  -webkit-stroke-width: 0;
  transition: fill 0.5s ease-in-out, stroke-width 0.75s ease-in-out,
    -webkit-stroke-width 0.75s ease-in-out;
}
.dark circle {
  fill: #434343;
}
.center circle {
  fill: #f0f;
  stroke-width: 1600px;
  -webkit-stroke-width: 1600px;
  transition: fill 0.5s ease-in-out, stroke-width 10s ease-in-out 5s,
    -webkit-stroke-width 10s ease-in-out 5s;
  animation: h 8s 15s infinite alternate linear;
}
.circle-group {
  animation: g 300s ease-in-out infinite alternate;
  transition: transform 0.5s ease-in-out;
}
.center .circle-group {
  animation: none;
}
.blue-rect,
.magenta-rect {
  mix-blend-mode: screen;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  transition: opacity 0.5s ease-in-out;
  animation: j 1s infinite linear;
}
.center .blue-rect,
.center .magenta-rect {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.center .magenta-rect {
  animation: k 5s 10s linear both;
}
.blue-line,
.magenta-line {
  stroke-width: 1px;
  -webkit-stroke-width: 1px;
  transition: stroke-width 0.5s ease-in-out,
    -webkit-stroke-width 0.5s ease-in-out;
}
.center .blue-line,
.center .magenta-line {
  animation: i 5s 10s infinite alternate;
}
.blue-line {
  stroke: #ddd;
  transition: stroke 1s;
}
.dark .blue-line {
  stroke: #444;
}
.center .blue-line {
  stroke: #87ceeb;
  transition: stroke 1s 5s;
}
.magenta-line {
  stroke: #f0f;
  mix-blend-mode: multiply;
}
.center .magenta-line {
  animation-delay: 15s;
  animation-duration: 10s;
}
.counter {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  padding: 1em;
  border-radius: 0.5em;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #f0f0f0;
  color: #333;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  z-index: 3;
  transition: all 1s ease-in-out;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .counter {
    font-size: 10px;
  }
}
.center .counter {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  transform: translate(-50%);
  transition: all 1s ease-in-out 5s;
}
.dark .counter {
  color: #eee;
  background: #333;
}
@keyframes f {
  0%,
  50% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes g {
  0% {
    transform: translate(0);
  }
  1% {
    transform: translate(-8px, 4.8px);
  }
  2% {
    transform: translate(0);
  }
  3% {
    transform: translate(3.2px, -0.8px);
  }
  4% {
    transform: translate(0);
  }
  5% {
    transform: translate(5.8px, 7.1px);
  }
  6% {
    transform: translate(0);
  }
  7% {
    transform: translate(1px, 2.1px);
  }
  8% {
    transform: translate(0);
  }
  9% {
    transform: translate(7.5px, -2.6px);
  }
  10% {
    transform: translate(0);
  }
  11% {
    transform: translate(-1px, -0.5px);
  }
  12% {
    transform: translate(0);
  }
  13% {
    transform: translate(-1px, 4.6px);
  }
  14% {
    transform: translate(0);
  }
  15% {
    transform: translate(-2.2px, 5.4px);
  }
  16% {
    transform: translate(0);
  }
  17% {
    transform: translate(5.6px, 1.1px);
  }
  18% {
    transform: translate(0);
  }
  19% {
    transform: translate(1.7px, 1.3px);
  }
  20% {
    transform: translate(0);
  }
  21% {
    transform: translate(5.5px, -3.8px);
  }
  22% {
    transform: translate(0);
  }
  23% {
    transform: translate(0.8px, 4.9px);
  }
  24% {
    transform: translate(0);
  }
  25% {
    transform: translate(7.6px, 3px);
  }
  26% {
    transform: translate(0);
  }
  27% {
    transform: translate(2px, -7.6px);
  }
  28% {
    transform: translate(0);
  }
  29% {
    transform: translate(1.8px, 5px);
  }
  30% {
    transform: translate(0);
  }
  31% {
    transform: translate(6.1px, -2.6px);
  }
  32% {
    transform: translate(0);
  }
  33% {
    transform: translate(5.5px, -5.4px);
  }
  34% {
    transform: translate(0);
  }
  35% {
    transform: translate(3px, -6px);
  }
  36% {
    transform: translate(0);
  }
  37% {
    transform: translate(-0.4px, 6.8px);
  }
  38% {
    transform: translate(0);
  }
  39% {
    transform: translate(4.5px, 1.7px);
  }
  40% {
    transform: translate(0);
  }
  41% {
    transform: translate(-6px, -7.1px);
  }
  42% {
    transform: translate(0);
  }
  43% {
    transform: translate(7.8px, 1.2px);
  }
  44% {
    transform: translate(0);
  }
  45% {
    transform: translate(2.7px, 6.5px);
  }
  46% {
    transform: translate(0);
  }
  47% {
    transform: translate(7.6px, 1.7px);
  }
  48% {
    transform: translate(0);
  }
  49% {
    transform: translate(7px, 3px);
  }
  50% {
    transform: translate(0);
  }
  51% {
    transform: translate(-0.9px, -6.5px);
  }
  52% {
    transform: translate(0);
  }
  53% {
    transform: translate(-6.6px, 6px);
  }
  54% {
    transform: translate(0);
  }
  55% {
    transform: translate(0.4px, 4.2px);
  }
  56% {
    transform: translate(0);
  }
  57% {
    transform: translate(-1.9px, 4.2px);
  }
  58% {
    transform: translate(0);
  }
  59% {
    transform: translate(-4.6px, -5.3px);
  }
  60% {
    transform: translate(0);
  }
  61% {
    transform: translate(7.9px, -5.1px);
  }
  62% {
    transform: translate(0);
  }
  63% {
    transform: translate(2.3px, -8px);
  }
  64% {
    transform: translate(0);
  }
  65% {
    transform: translate(4.2px, 1.4px);
  }
  66% {
    transform: translate(0);
  }
  67% {
    transform: translate(5.3px, 4.6px);
  }
  68% {
    transform: translate(0);
  }
  69% {
    transform: translate(4.7px, 2.8px);
  }
  70% {
    transform: translate(0);
  }
  71% {
    transform: translate(-4.6px, 2.3px);
  }
  72% {
    transform: translate(0);
  }
  73% {
    transform: translate(-0.3px, 3.3px);
  }
  74% {
    transform: translate(0);
  }
  75% {
    transform: translate(-3.5px, 4.7px);
  }
  76% {
    transform: translate(0);
  }
  77% {
    transform: translate(-3.3px, 0.2px);
  }
  78% {
    transform: translate(0);
  }
  79% {
    transform: translate(1.8px, 2.6px);
  }
  80% {
    transform: translate(0);
  }
  81% {
    transform: translate(6.3px, 1.8px);
  }
  82% {
    transform: translate(0);
  }
  83% {
    transform: translate(-5px, 4.5px);
  }
  84% {
    transform: translate(0);
  }
  85% {
    transform: translate(-0.6px, -6.7px);
  }
  86% {
    transform: translate(0);
  }
  87% {
    transform: translate(4px, 7.5px);
  }
  88% {
    transform: translate(0);
  }
  89% {
    transform: translate(-2.2px, -4.5px);
  }
  90% {
    transform: translate(0);
  }
  91% {
    transform: translate(-7.5px, -1.9px);
  }
  92% {
    transform: translate(0);
  }
  93% {
    transform: translate(7.3px, 6.5px);
  }
  94% {
    transform: translate(0);
  }
  95% {
    transform: translate(5.8px, -6.6px);
  }
  96% {
    transform: translate(0);
  }
  97% {
    transform: translate(1.1px, 2.9px);
  }
  98% {
    transform: translate(0);
  }
  99% {
    transform: translate(-7.2px, -2px);
  }
  to {
    transform: translate(0);
  }
}
@keyframes h {
  0% {
    stroke: purple;
  }
  to {
    stroke: #0ff;
  }
}
@keyframes i {
  0% {
    stroke-width: 1px;
    -webkit-stroke-width: 1px;
  }
  to {
    stroke-width: 10px;
    -webkit-stroke-width: 10px;
  }
}
@keyframes j {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}
@keyframes k {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}