:root {
  --min-width: 320px;
  --link-bottom-near: translateY(-2rem);
  --link-bottom-far: translateY(-4rem);
  --logo-small: url("./img/vesihiisi-website-greensun-bg-trans-600.webp");
  --logo-large: url("./img/vesihiisi-website-greensun-bg-trans-1200.webp");
}

@font-face {
  font-family: "Blackout Two AM";
  src: url("./font/blackout_two_am-webfont.eot");
  src: url("./font/blackout_two_am-webfontt.eot?#iefix")
      format("embedded-opentype"),
    url("./font/blackout_two_am-webfont.woff") format("woff"),
    url("./font/blackout_two_am-webfontt.ttf") format("truetype"),
    url("./font/blackout_two_am-webfont.svg#blackout_two_am-webfont")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

html,
body {
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  width: 100vw;
  height: 100vh;
  font-family: "Blackout Two AM";
}

body {
  background-color: #000400;
  background-image: var(--logo-small);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/*

 PureCSS starfield
 https://codepen.io/kikeur/pen/KpgYdG 

*/
.space__container,
.stars {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stars {
  background-image: radial-gradient(
      2px 2px at 20px 30px,
      #eee,
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: starzoom 10s infinite;
  opacity: 0;
}

.stars:nth-child(1) {
  background-position: 50% 50%;
  animation-delay: 0s;
}
.stars:nth-child(2) {
  background-position: 20% 60%;
  animation-delay: 1s;
}
.stars:nth-child(3) {
  background-position: -20% -30%;
  animation-delay: 2s;
}
.stars:nth-child(4) {
  background-position: 40% -80%;
  animation-delay: 3s;
}
.stars:nth-child(5) {
  background-position: -20% 30%;
  animation-delay: 6s;
}

.fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.grumbaum__img--wrapper {
  overflow: hidden;
}

.grumbaum__link {
  width: 100vw;
  display: inline-flex;
  justify-content: center;
}

.huerotate {
  background-color: green;
  filter: hue-rotate(360deg);
  animation: rotatehue 100s infinite alternate;
  opacity: 0.18;
}

.grumbaum__img--rotate {
  animation: rotateblock 300s infinite alternate;
  transform-origin: center center;
}

.links {
  position: absolute;
  bottom: 0;
  width: 100vw;
  display: flex;
  z-index: 3;
  justify-content: center;
  align-items: end;
  color: white;
  gap: 2rem;
  transform: var(--link-bottom-near);
}

.links a {
  width: 50px;
  height: 50px;
  overflow: hidden;
  background-repeat: no-repeat;
  font-size: 0;
}

.links a {
  filter: invert(0.9);
}

.facebook {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACd0lEQVR4nO2Zv2sUQRTHP+evwigSrCyiAWOpTXpBxcRcCkn8BVrZif+AjUJQSA5Jo4VpbMQiJtrE/CCojZ3YGEQx9nYaE6PRxOJWBp4Qwu7czuzb3Tm4L3zhmn1vPszsm7fvoKWWgtceoArUgGlgEfgO/BWb35+A58AI0CfPBKGKLGgSWAciR/8BJoAzEqsUXQDeeyw+yQvAYJEAR4BXigBb/QLoyhviHLCSI0QkXgUu5wFgzu9QAQDRFtc03x0TaKwEiEj8QAtmpESISHwnK8SlACAi8ZUs1emn0iLMffFQSraJux/YB7QDncBRYLRBjB/AYR8QrRL7EjiQIt/VFLHmXSHOK0HMAjtS5kwDYjyQFqKidGN/kyOEMsi7tFWsT2k3hh0gXEAioDdNwEklkGOWHN3Afcn1328dYo83gtjr2cXGVZjtFoiNjPF/A7ttIFXFTjZJj5Ry9NhAakpJXltyfCniHZxWSjKXEL8iX4saOaZsIJ8V74847VKKH8lnc6KWmgjkqw1ko4lA1rVBBqT522zbdKQ9wXcd85q1JmrZA+Q0Onri0QIlarFEENNDueT9aAs2WxLINmBNs/wOlwRySPvzt98j4HXpnza7y3Ihdsf4mkfeXhuIacR+eQQtuvyuAW2NtvlpE4BMkEI9TQByKg2IOccfAgZZwEFnAwapUuA4KC+QeTzUKVPxUEBWgIN4yjSE9QBA6sBFMup2ACBDKOleiSCjKOuGwzHTAKlr7kTcX2/LBYAsucx4s3SqMzmCTAEdFKh+y5jTB+SNzJ1L03HgsYxJXUFWZfJoYgQjs8iTwE0pDHHaCTwDbgEn5JmWWiJg/QOlYrQmouYwLQAAAABJRU5ErkJggg==);
}

.youtube {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAABg0lEQVR4nO2YvUoDQRRGDykE9QVU8DEEe8UnsFW0sPMHJDZqIWIr2AaCf6V1ioCgaKEvoGJnqZLKxDWrshlZuDZ2uTObjHAPfOXee89mMruzYBiGYRiGUThDwAywBuwBB0AVOAPqwLkydalRlZp57VXplfcMwgbQAlyP0wLKvsNv92Fw9ydb2uFHgTQCgRQY0QgsRjC8k8xrBE4iGNxJjjQC1xEM7iSXGoHHCAZ3knuNQEPZ7ANYAl4CCrxqBN6VzRK5fhjYAdoBBN40AqmnwC/jwCnQ8RBINALfgZtNArfKmp8agU4Bd6ske/pzlzUzjUBW0M9dkpfCbm5QFsMSypkAbnq1hNKAAmOef+SkH9tozoAsl6aylvPZRhueArPAk+fgzudB9qBs9iXvLi5g7jQCV4GH8MmFRuA4gsGd5FAjsBDB4E4y95+PlG3tkRI5UPdbYBNPygH2cU2awDqBGASmgRVgF9gHKvJRqubxYasmNSpSM6+9DExJT8MwDMMwDArkByy0NgqHXBP4AAAAAElFTkSuQmCC);
}

.spotify {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAADoklEQVR4nO2ZWYhOYRjHf6IZY8tYRvY1N0QppSyRQmQLWSLcyBKRLeJG2YbsFJdyI3eW7EIpQ+HKMobB2C5kmSRjhqOn/mp8c875zjnf+b7vJP/61+nre973/Z/neZ/3ec4L//Hvoh0wHdgPXAReAJ8AR/yk3y7pPzOA9iQERcB84Brws96ig/KnbBdorJyjGbAOeB9h8V60sdZr7JxgElAZo4BUVmqOrKGpYtvJEY8DzeMW0RF4kEMRjmhzdopLRC/geR5EOPVCrU+mIkqA8jyKcMRXQNeoIiwd3kuACEe8HzVFH0vA4p0U2ppCYUICFu14cGJQEea+ZwlYsOPBl0HT8poELNZJw7VBDr23Ad7IOWAHsFSuHqQ03QEoBhoBTfTcBegNDAcWAluBk0oktRGFvEu38ef6GJ+J83ASLERGAzuBJyHFWLHqiUs+hp3JPgYCh4EvAYRc8RrEwqDOxzDygRQBLYFNKf2MWwvQxs14Spo3cBboqdN+GLAY2AucAm4p01kp/hH4pfi35yrgsZqtI8BqVbdWv6VDsfaj15qmuRntzkP2qVAojVFycEM3H3t7kQ3gpzwXfANsUeYLKuSCm5AkFIcO8BXYpnRuvOzzXwvnBvgQYrJq4IZcu0QlTT+gh+K6AGisZ9tTfRU+y4AD6tO/xSD6s5uQmoDG233iOQwKdYYcU1KIIqROh+9f+B7QuBXxo5myYEUcQoKG1vgUO0vJo/RJZ708ZuFzFNinUmaDUmV/ecILBcAqhUzk0ApaIlhsnwauh5iwPn9oAy8HunsIGhlwLPNgA5yNYfNF4VUXL7cJaHveTciuPAn5Q/PwCKCtwjKIzR43IZMjTF4tT27Sd98BOsBaa8xi7aEhwCKd4ndVwsQhfqqbkNZpisZUbsggDVsBuhK4nYGIOr0oV5wPMVAL4sFQ4GYEIRf9Bp0TYqCNaowGq6I9obCpUjb7pZRerg1te3Cmrh9S0UgedkLQmkBPWI5/neVNXau3OS8lNK0HCVNgWlvui5VZFlKfTxQFFuubQ9jZoZkWhWqEnISyIog3/mBsAhbseHAcIXEwAYt2UniICLAQK0vA4h3xTpqC0xftErJfKlxa4NDonuc2+KnKnFhQkqcwK9PcsaJQl6FxFXxBLkOLyCLGZDnUyjVHTmDeWaG6Ki4BNtaKTDJTJrAee5Y+7kW5IqiV7ex8CXBDK92VlKqnf6jqt0a050e6nijVf7PxReY/SAJ+A3ixZQqUXqPKAAAAAElFTkSuQmCC);
}

@media (orientation: portrait) {
  .grumbaum__img {
    max-width: 100vw;
  }

  .grumbaum__link {
    align-items: center;
  }
}

@media (orientation: landscape) {
  .grumbaum__img {
    max-height: 100vh;
  }
}

@media (orientation: landscape) and (max-device-width: 1200px) {
  .grumbaum__img--wrapper {
    height: 100vh;
  }

  .grumbaum__link {
    align-items: inherit;
  }

  .links {
    transform: translateY(-1rem);
  }
}

@media (min-width: 1200px) {
  body {
    background-image: var(--logo-large);
  }

  .grumbaum__img--rotate {
    animation: rotateblock 250s infinite alternate;
    transform-origin: center center;
  }

  .grumbaum--zoomer {
    animation: grumbaumzoominout 150s infinite;
    transform-origin: center center;
    filter: saturate(0.4);
  }

  .links {
    transform: var(--link-bottom-far);
  }

  .links a {
    filter: invert(0.8);
    transition: filter 0.5s ease-in;
  }

  .links a:hover {
    filter: invert(1);
    transition: filter 0.5s ease-out;
  }
}