Merge remote-tracking branch 'origin/Frontend' into Backend

# Conflicts:
#	static/style.css
#	templates/index.html

static/style.css

@@ -1,107 +1,84 @@
-body
-{
-	background-color: #1d1919; 
-	font-size: 150%;
-	font-family: "Asap","Calibri", "Arial";
-    color: #fff1f1;
-    animation-name: HG;
-    animation-duration: 20s;
-    animation-iteration-count: infinite
-}
-
-input {
-    width: 150px;
-    height: 50px
-}
-
-input[type=url], input[type=email], input[type=password] {
-    width: 500px;
-}
-
-select {
-    width: 200px;
-    height: 50px
-}
-
-.cs
-{   
-
-    position: absolute;
-    top: 38%;
-    left:12%;
+body {
+    background-color: black;
     margin: 0;
-    width: 75%;
-    /*border: 3px solid red;*/
 }
 
-.cs h1, .cs h2, .cs form
-{
-    display: flex;
-    text-align: center;
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    width: 200px;
+    background-color: #333;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    overflow-y: auto;
+}
+
+nav li {
+    border-top: none;
+}
+
+nav li.start a {
+    border-top: 3px solid white;
+}
+
+nav li a {
+    display: block;
+    color: white;
+    padding: 12px 16px;
+    text-decoration: none;
+    margin-top: 5px;
+}
+
+nav li a:hover {
+    background-color: red;
+}
+
+.cs1 {
+    margin-left: 220px;
+    padding: 20px;
+}
+
+.cs {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 200%;
-    /*border: 3px solid green;*/
-}
-h1
-{
-    text-align: center;
-	font-weight: bold;
-    font-family: "Asap","Calibri","Arial";
-    font-size: 300%;
-    color: #e7dbdb;
+    flex-direction: column;
+    margin-left: 220px;
+    padding: 20px;
 }
 
-h2
-{
-    font-size: 100%;
-    position: sticky;
-    bottom: 0;
-    text-align: left;
+
+.container {
+    display: flex;
+    flex-direction: column; 
 }
 
-p
-{
-    line-height: 150%;
+/* Reihen */
+.row {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
 }
 
-a:link
-{
-    font-style: italic;
-    text-decoration: none;
-    font-weight: bolder;
-    color: #adadad
+.box {
+    width: 200px;
+    height: 200px;
+    border: 2px solid red;
+    margin: 5px;
 }
 
-a:visited
-{
-    color: #9e9393;
-}
-
-a:hover
-{
-    color: #726868;
-    font-size: 105%;
-    transition: font-size 100ms ease-in;
-}
-
-a, img
-{
-    transition: 100ms ease-out
-}
-
-img
-{
-    width: 30%;
-    height: auto
-}
-
-img:hover
-{
-    width: 32%;
-    height: auto;
-    opacity: 75%;
-    transition: 100ms ease-in; 
+
+.cs1 h1 {
+    color: white; 
 }
 
+.notification-icon {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+	width:50px;
+    
+}