README + HEAD + CSS ordentlich

style.css

@@ -1,6 +1,12 @@
+/* SCHRIFTARTEN */
+
 @font-face { font-family: "League Spartan"; src: url("resources/LeagueSpartan.ttf");}
 @font-face { font-family: "League Spartan Black"; src: url("resources/LeagueSpartan-Black.ttf");}
 
+
+
+/* BODY + NAVBAR */
+
 body
 {
 	background-color: #FFE49F; 
@@ -11,6 +17,16 @@ body
   width: 100vw;
 }
 
+.navbar {
+  text-align: center;
+  width: 40vw;
+  background-color: #E07A31;
+  z-index: 55;
+  border-radius: 2cqmin;
+  opacity: 90%;
+  height: 3vw;
+}
+
 #navbar-top {
   justify-content: center;
   display: flex;
@@ -26,16 +42,6 @@ body
   margin-bottom: 2.5vh;
 }
 
-#navbar {
-  text-align: center;
-  width: 40vw;
-  background-color: #E07A31;
-  z-index: 55;
-  border-radius: 2cqmin;
-  opacity: 90%;
-  height: 3vw;
-}
-
 ul {
   vertical-align: middle;
   list-style-type: none;
@@ -67,27 +73,18 @@ li.link:hover {
 }
 
 
-.start {
-  display: flex;
-  justify-content: space-evenly;
-  height: 100vh;
+
+/* INHALT ALLGEMEIN */
+
+p {
+  position: relative;
+  font-size: 0.8vw;
+  text-align: right;
+  z-index: 60;
 }
 
-#eins {
-  display: flex;
-  justify-content: right;
-  height: 100vh;
-}
-
-#zwei {
-  width: 100%;
-  z-index: 10;
-  height: 120vh;
-}
-
-.text-rechts {
-  width: 46vw;
-  margin-right: 5vw;
+h1 em {
+  font-style: normal;
 }
 
 h2 {
@@ -98,17 +95,17 @@ h2 {
   text-align-last: justify;
 }
 
-#eins h2 {
+.start {
   display: flex;
-  line-height: 0.3;
+  justify-content: space-evenly;
+  height: 100vh;
 }
 
-#zwei h2 {
-  font-size: 10vw;
-  line-height: 1.8;
+.text-rechts {
+  width: 46vw;
+  margin-right: 5vw;
 }
 
-
 .text-mittig {
   width: 90%;
   margin-left: 5%;
@@ -123,13 +120,6 @@ h2 {
   text-align-last: justify;
 }
 
-p {
-  position: relative;
-  font-size: 0.8vw;
-  text-align: right;
-  z-index: 60;
-}
-
 .title
 {
   font-family: "League Spartan Black";
@@ -164,19 +154,9 @@ p {
   font-family: "League Spartan";
 }
 
-.laut {
-  font-family: sans-serif !important;
-  font-size: 6vw !important;
-  font-style: italic;
-}
-
 .title em { 
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke: 0.3vw #E07A31;
-} 
-
-h1 em {
-  font-style: normal;
 }
 
 .title p {
@@ -186,15 +166,41 @@ h1 em {
   padding-right: 10vw;
 }
 
-.button-rechts {
+#eins {
+  display: flex;
+  justify-content: right;
   height: 100vh;
-  position: relative;
-  top: 25vh;
-  width: 46%;
-  margin-right: 5vw;
-  display: block;
 }
 
+#eins h2 {
+  display: flex;
+  line-height: 0.3;
+}
+
+#zwei {
+  width: 100%;
+  z-index: 10;
+  height: 120vh;
+}
+
+#zwei h2 {
+  font-size: 10vw;
+  line-height: 1.8;
+}
+
+
+
+/* ABOUT */
+.laut {
+  font-family: sans-serif !important;
+  font-size: 6vw !important;
+  font-style: italic;
+}
+
+
+
+/* TRY NOW */ 
+
 form {
   background-color: transparent;
   border-style: dotted;
@@ -229,19 +235,34 @@ hr {
   border-width: 1vh;
 }
 
-#fileselect {
-  visibility: hidden;
+.button-rechts {
+  height: 100vh;
+  position: relative;
+  top: 25vh;
+  width: 46%;
+  margin-right: 5vw;
+  display: block;
 }
 
-
 .sel {
   color:#fff0cb
 }
 
-@keyframes raise {
-  0% {z-index: 0; opacity: 0%;}
-  70% {opacity: 50%;}
-  100% {z-index: 100; opacity: 90%;}
+#fileselect {
+  visibility: hidden;
+}
+
+
+
+/* BLOBS */
+
+.blob {
+  border-radius: 7.5vw;
+  filter: blur(1.6vw);
+  width: 15vw;
+  height: 15vw;
+  top: 25vh;
+  scale: 1.4;
 }
 
 #blobs {
@@ -255,16 +276,6 @@ hr {
   position: relative;
 }
 
-
-.blob {
-  border-radius: 7.5vw;
-  filter: blur(1.6vw);
-  width: 15vw;
-  height: 15vw;
-  top: 25vh;
-  scale: 1.4;
-}
-
 #blue {
   background-color: #50eff4;
   position: relative;
@@ -292,6 +303,32 @@ hr {
   animation: idle-red 7s 0.3s infinite;
 }
 
+
+
+/* ANIMATIONEN 𑁋 ERSCHEINEN */
+
+@keyframes raise {
+  0% {z-index: 0; opacity: 0%;}
+  70% {opacity: 50%;}
+  100% {z-index: 100; opacity: 90%;}
+}
+
+@keyframes appear {
+  0% {transform: scale(0); opacity: 0%}
+  60% {transform: scale(0.8)}
+  80% {transform: scale(1.1); opacity: 100%}
+  100% {transform: scale(1)}
+}
+
+@keyframes float-in {
+  0% {transform: translateY(-15vh); opacity: 0%}
+  100% {transform: translateY(0vh); opacity: 90%;}
+}
+
+
+
+/* ANIMATIONEN 𑁋 TRY NOW */
+
 @keyframes text-in-out {
   0% {color: inherit}
   40% {color: transparent}
@@ -299,12 +336,6 @@ hr {
   100% {color: inherit}
 }
 
-@keyframes border-out {
-  0% {opacity: 1;}
-  40% {opacity: 0;}
-  100% {opacity: 0;}
-}
-
 @keyframes border-in-out {
   0% {border-radius: 1.5vw}
   10%{border-radius: 1.5vw}
@@ -314,12 +345,16 @@ hr {
   100% {border-radius: 1.5vw}
 }
 
-@keyframes float-in {
-  0% {transform: translateY(-15vh); opacity: 0%}
-  100% {transform: translateY(0vh); opacity: 90%;}
+@keyframes border-out {
+  0% {opacity: 1;}
+  40% {opacity: 0;}
+  100% {opacity: 0;}
 }
 
 
+
+/* ANIMATIONEN 𑁋 BLOBS */
+
 @keyframes idle-blue {
   0% {transform: scale(1); z-index: 0;}
   20% {transform: scale(1.4); z-index: 1;}
@@ -399,10 +434,3 @@ hr {
   100% {top: 215vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
 }
 
-
-@keyframes appear {
-  0% {transform: scale(0); opacity: 0%}
-  60% {transform: scale(0.8)}
-  80% {transform: scale(1.1); opacity: 100%}
-  100% {transform: scale(1)}
-}