/* bebas-neue-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/bebas-neue-v15-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/space-grotesk-v21-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/space-grotesk-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/space-grotesk-v21-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/space-grotesk-v21-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/space-grotesk-v21-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
  color-scheme: dark;
  overflow: hidden;
  background-color: black;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10lvh;
}

h1 {
  font-family: "Bebas Neue", sans-serif;
  font-size: 32vw;
  margin: 0;
  line-height: 0.85;

  background: -webkit-linear-gradient(
    35deg,
    rgb(230, 0, 0),
    rgb(255, 142, 0),
    rgb(255, 239, 0),
    rgb(15, 180, 48),
    rgb(31, 98, 255),
    rgb(178, 4, 201)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(2vw + 0.75rem);
  color: #fff;
  margin: 0;
  line-height: 1.5;
}

@keyframes dot-1 {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes dot-2 {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dot-3 {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.dot-1 {
  display: inline-block;
  animation: dot-1 4s infinite;
}
.dot-2 {
  display: inline-block;
  animation: dot-2 4s infinite;
}
.dot-3 {
  display: inline-block;
  animation: dot-3 4s infinite;
}
 tj on vps1 at …/miniwar 
 tj on vps1 at …/miniwar 
 tj on vps1 at …/miniwar   ll
total 12
drwxr-xr-x 2 tristanjockel www-data 4096 Nov 30 19:34 fonts
-rw-r--r-- 1 root          root      590 Jan 19 20:46 index.html
-rw-r--r-- 1 root          root     3716 Nov 30 19:30 style.css
 tj on vps1 at …/miniwar   ll fonts/
total 96
-rw-r--r-- 1 tristanjockel tristanjockel 13788 Nov 30 19:34 bebas-neue-v15-latin-regular.woff2
-rw-r--r-- 1 tristanjockel tristanjockel 12972 Nov 30 19:34 space-grotesk-v21-latin-300.woff2
-rw-r--r-- 1 tristanjockel tristanjockel 13268 Nov 30 19:34 space-grotesk-v21-latin-500.woff2
-rw-r--r-- 1 tristanjockel tristanjockel 13292 Nov 30 19:34 space-grotesk-v21-latin-600.woff2
-rw-r--r-- 1 tristanjockel tristanjockel 12780 Nov 30 19:34 space-grotesk-v21-latin-700.woff2
-rw-r--r-- 1 tristanjockel tristanjockel 13456 Nov 30 19:34 space-grotesk-v21-latin-regular.woff2
 tj on vps1 at …/miniwar   zip -r fonts.zip fonts
zip I/O error: Permission denied
zip error: Could not create output file (fonts.zip)
 tj on vps1 at …/miniwar   sudo !!
sudo zip -r fonts.zip fonts
  adding: fonts/ (stored 0%)
  adding: fonts/space-grotesk-v21-latin-300.woff2 (stored 0%)
  adding: fonts/space-grotesk-v21-latin-600.woff2 (stored 0%)
  adding: fonts/space-grotesk-v21-latin-regular.woff2 (stored 0%)
  adding: fonts/bebas-neue-v15-latin-regular.woff2 (stored 0%)
  adding: fonts/space-grotesk-v21-latin-500.woff2 (stored 0%)
  adding: fonts/space-grotesk-v21-latin-700.woff2 (stored 0%)
 tj on vps1 at …/miniwar 
 tj on vps1 at …/miniwar   ll
total 92
drwxr-xr-x 2 tristanjockel www-data  4096 Nov 30 19:34 fonts
-rw-r--r-- 1 root          root     80964 Mar  5 17:21 fonts.zip
-rw-r--r-- 1 root          root       590 Jan 19 20:46 index.html
-rw-r--r-- 1 root          root      3716 Nov 30 19:30 style.css
 tj on vps1 at …/miniwar   pwd
/var/www/html/miniwar
 tj on vps1 at …/miniwar 
 tj on vps1 at …/miniwar   rm fonts.zip
rm: remove write-protected regular file 'fonts.zip'?
 tj on vps1 at …/miniwar   sudo !!
sudo rm fonts.zip
 tj on vps1 at …/miniwar   cd ..
 tj on vps1 at …/html   cd as207792/
 tj on vps1 at …/as207792   cat index.html
<html lang="de-DE">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AS207792</title>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>AS207792</h1>
      <p>
        work in progress<span class="dot-1">.</span><span class="dot-2">.</span
        ><span class="dot-3">.</span>
      </p>
    </div>
  </body>
</html>
 tj on vps1 at …/as207792   cat style.css
/* bebas-neue-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/bebas-neue-v15-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/space-grotesk-v21-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/space-grotesk-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/space-grotesk-v21-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/space-grotesk-v21-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/space-grotesk-v21-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
  color-scheme: dark;
  overflow: hidden;
  background-color: black;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10lvh;
}

h1 {
  font-family: "Bebas Neue", sans-serif;
  font-size: 16vw;
  margin: 0;
  line-height: 0.85;

  background: -webkit-linear-gradient(
    35deg,
    rgb(230, 0, 0),
    rgb(255, 142, 0),
    rgb(255, 239, 0),
    rgb(15, 180, 48),
    rgb(31, 98, 255),
    rgb(178, 4, 201)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(2vw + 0.75rem);
  color: #fff;
  margin: 0;
  line-height: 1.5;
}

@keyframes dot-1 {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes dot-2 {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dot-3 {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.dot-1 {
  display: inline-block;
  animation: dot-1 4s infinite;
}
.dot-2 {
  display: inline-block;
  animation: dot-2 4s infinite;
}
.dot-3 {
  display: inline-block;
  animation: dot-3 4s infinite;
}