/* http://meyerweb.com/eric/tools/css/reset/ 
  v2.0 | 20110126
  License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul,
li {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.revertCss html,
.revertCss body,
.revertCss div,
.revertCss span,
.revertCss applet,
.revertCss object,
.revertCss iframe,
.revertCss h1,
.revertCss h2,
.revertCss h3,
.revertCss h4,
.revertCss h5,
.revertCss h6,
.revertCss p,
.revertCss blockquote,
.revertCss pre,
.revertCss a,
.revertCss abbr,
.revertCss acronym,
.revertCss address,
.revertCss big,
.revertCss cite,
.revertCss code,
.revertCss del,
.revertCss dfn,
.revertCss em,
.revertCss img,
.revertCss ins,
.revertCss kbd,
.revertCss q,
.revertCss s,
.revertCss samp,
.revertCss small,
.revertCss strike,
.revertCss strong,
.revertCss sub,
.revertCss sup,
.revertCss tt,
.revertCss var,
.revertCss b,
.revertCss u,
.revertCss i,
.revertCss center,
.revertCss dl,
.revertCss dt,
.revertCss dd,
.revertCss ol,
.revertCss ul,
.revertCss li,
.revertCss fieldset,
.revertCss form,
.revertCss label,
.revertCss legend,
.revertCss table,
.revertCss caption,
.revertCss tbody,
.revertCss tfoot,
.revertCss thead,
.revertCss tr,
.revertCss th,
.revertCss td,
.revertCss article,
.revertCss aside,
.revertCss canvas,
.revertCss details,
.revertCss embed,
.revertCss figure,
.revertCss figcaption,
.revertCss footer,
.revertCss header,
.revertCss hgroup,
.revertCss menu,
.revertCss nav,
.revertCss output,
.revertCss ruby,
.revertCss section,
.revertCss summary,
.revertCss time,
.revertCss mark,
.revertCss audio,
.revertCss video {
  margin: revert;
  padding: revert;
  border: revert;
  font-size: revert;
  font: revert;
  vertical-align: revert;
}
.revertCss article,
.revertCss aside,
.revertCss details,
.revertCss figcaption,
.revertCss figure,
.revertCss footer,
.revertCss header,
.revertCss hgroup,
.revertCss menu,
.revertCss nav,
.revertCss section {
  display: revert;
}
.revertCss body {
  line-height: revert;
}
.revertCss ol,
.revertCss ul,
.revertCss li {
  list-style: revert;
}
.revertCss blockquote,
.revertCss q {
  quotes: revert;
}
.revertCss blockquote:before,
.revertCss blockquote:after,
.revertCss q:before,
.revertCss q:after {
  content: revert;
  content: revert;
}
.revertCss table {
  border-collapse: revert;
  border-spacing: revert;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-tap-highlight-color: transparent !important;
}

html {
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

body {
  color: var(--foreground-rgb);
  background: var(--foreground-rgb);
  font-size: var(--font-size-1);
  line-height: 1.5;
}

a {
  color: inherit;
  pointer-events: auto;
  text-decoration: none;
  display: inline-block;
}

a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  border-radius: none;
  color: inherit;
  font: inherit;
  pointer-events: auto;
}

input,
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  pointer-events: auto;
}

img,
svg {
  vertical-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

html,
body {
  overflow: hidden;
  height: 100%;
  width: 100%;
}

main {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

#canvas {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: rgb(20, 20, 20);
}

img {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

*,
*:before,
*:after {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

:root {
  --space-1: 15px;
}

.footerIcons {
  position: fixed;
  bottom: var(--space-1);
  right: var(--space-1);
  z-index: 10;
}

.footerName {
  position: fixed;
  bottom: var(--space-1);
  left: var(--space-1);
  z-index: 10;
}

.nameWrapper {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  width: 130px;
}
@media only screen and (min-width: 768px) {
  .nameWrapper {
    width: initial;
  }
}

.socials {
  display: flex;
  align-items: center;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .socials {
    flex-direction: row;
  }
}

.iconWrapper {
  width: 18px;
}
.iconWrapper:not(:last-child) {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
@media only screen and (min-width: 768px) {
  .iconWrapper:not(:last-child) {
    margin-bottom: 0;
    padding-bottom: 0;
    margin-right: 15px;
    padding-right: 15px;
    width: 33px;
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  }
}
.iconWrapper svg {
  fill: rgb(255, 255, 255);
  width: 100%;
  opacity: 0.5;
  transition: opacity 0.35s;
}
.iconWrapper svg:hover {
  opacity: 1;
}

.underline {
  cursor: pointer;
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, 0.9);
}
.underline:before {
  content: "";
  position: absolute;
  top: 80%;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--t-1) var(--easing-1);
}
.underline:hover:before {
  transform: scaleX(1);
}

.links-container {
  display: flex;
  position: fixed;
  right: var(--space-1);
  top: var(--space-1);
  color: white;
}

.links-container > *:not(:last-child) {
  margin-right: 8px;
}

.links-container a {
  font-size: 11px;
}

.debug-holder {
  position: fixed;
  z-index: 100;
  top: 45px;
  left: var(--space-1);
  color: rgb(0, 0, 0);
  background-color: rgb(206, 206, 206);
  border: 1px solid rgb(0, 0, 0);
  border-radius: 3px;
  font-size: 11px;
  padding: 3px;
  opacity: 0.5;
  display: none;
}

.fps {
  position: fixed;
  z-index: 100;
  top: var(--space-1);
  left: var(--space-1);
  color: rgb(0, 0, 0);
  background-color: rgb(206, 206, 206);
  border: 1px solid rgb(0, 0, 0);
  border-radius: 3px;
  font-size: 11px;
  padding: 3px;
  opacity: 0.5;
}

.info-icon {
  height: 50px;
  color: white;
  opacity: 0.35;
}

:root {
  --animate-duration: 1.5s;
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: var(--easing-1);
  }
  0% {
    transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
    opacity: 1;
  }
  60% {
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  animation-duration: calc(var(--animate-duration) * 0.75);
  animation-name: bounceIn;
  animation-delay: 0.3s;
  animation-fill-mode: backwards;
}

@keyframes enterInfoIcon {
  from {
    left: 50%;
    bottom: calc(var(--space-1) * 3.5);
  }
  to {
    left: 50%;
    bottom: calc(var(--space-1) + 20px);
  }
}
.enter-info-icon {
  animation-duration: 1.1s;
  animation-timing-function: var(--easing-1);
  animation-name: enterInfoIcon;
  animation-delay: 0.7s;
  animation-fill-mode: both;
  position: fixed;
  transform: translateX(-50%);
  z-index: 10;
}

.extra-info {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-1));
  transform: translateX(-50%);
  z-index: 10;
  color: white;
}

:root {
  --easing-1: cubic-bezier(0.64, 0.02, 0.16, 0.97);
  --font-size-1: 12px;
  --t-1: 0.45s;
}