Language seperation

public/styles/start.css

@@ -0,0 +1,109 @@
+* {
+  scroll-margin-block-start: 60px;
+  scroll-margin-block-end: 60px;
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+::-webkit-scrollbar {
+  width: 9px;
+}
+::-webkit-scrollbar-track {
+  background: rgb(41, 41, 41);
+}
+::-webkit-scrollbar-thumb {
+  background: #ff8906;
+  border-radius: 5px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+[class*="col-"] {
+  float: left;
+}
+.row {
+  clear: both;
+}
+
+body {
+  background-color: #0f0e17;
+  color: #a7a9be;
+  text-align: left;
+  font-size: 1.4em;
+  max-width: 900px;
+  margin: auto;
+}
+
+p {
+  padding: 10px;
+}
+
+#cover {
+  opacity: 60%;
+}
+
+.container {
+  position: relative;
+  text-align: center;
+  color: white;
+}
+.centered {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#gone {
+  display: none;
+  color: #fffffe;
+  text-align: center;
+}
+
+#MoreButton {
+  margin: auto;
+  position: relative;
+  height: auto;
+  max-height: max-content;
+  width: auto;
+  max-width: max-content;
+  background-color: #ff8906;
+  border-radius: 5px;
+  color: #fffffe;
+  font-size: 1.2em;
+}
+a {
+  text-decoration: none;
+}
+a div p {
+  text-align: center;
+  padding: 20px;
+}
+a :hover {
+  scale: 1.06;
+}
+
+.righties {
+  padding-bottom: 30px;
+  padding-top: 20px;
+  width: 100%;
+  clear: both;
+}
+
+@media (max-width: 767px) /*unter handy größe*/ {
+  .centered {
+    display: none;
+  }
+  #gone {
+    display: block;
+  }
+  #cover {
+    opacity: 100%;
+  }
+  .righties {
+    width: 100%;
+  }
+}