style changes

src/Pages/ResultView.elm

 module Pages.ResultView exposing (..)
 
 import Types exposing (Model, Msg(..), Question, QuestionType(..))
-import Html exposing (Html, div, text, button, a, p, h2, table, tbody, tr, td)
+import Html exposing (Html, div, text, button, a, p, h1, table, tbody, tr, td)
 import Html.Attributes exposing (class, href)
 import Html.Events exposing (onClick)
 import Utils.HelperFunction exposing (normalizeString)
@@ -13,7 +13,7 @@ resultView model =
         content = answersToTable model.quiz.questions
     in
     div [ class "resultView" ]
-        [ h2 [] [ text "Ergebnisse" ]
+        [ h1 [] [ text "Ergebnisse" ]
         , p [] [ text ("benötigt: " ++ String.fromInt model.curTime ++ " Minuten")]
         , content 
         , div [ class "navigation" ]

src/style.css

+html {
+  width: 100%;
+  height: 100%;
+}
+
 body {
-  display: flex;
   font-family: sans-serif;
   background-color: #111;
   color: #fff;
-  align-items: center;
+  width: 100%;
+  height: 100%;
+  margin: 0;
 }
 
 form {
@@ -64,6 +70,19 @@ svg {
   margin-bottom: 10px;
 }
 
+div.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('bg.svg') no-repeat center center;
+  background-size: contain;
+  filter: grayscale(100%);
+  z-index: 1;
+  filter: invert(1);
+}
+
 div.media {
   display: flex;
   align-items: center;
@@ -77,22 +96,25 @@ div.imgDiv, div.svgDiv {
 }
 
 div.center {
-  background-color: #333;
-  border-radius: 15px;
-  padding: 15px;
+  position: relative;
+  z-index: 2;
+  background: rgba(51, 51, 51, 0.8);
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(15px);
 }
 
 div.home {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 95vh;
+  height: 100%;
   justify-content: center;
   align-items: center;
 }
 
 div.quiz {
-  padding: 5px;
   margin-left: 15px;
   width: 100%;
 }
@@ -100,23 +122,20 @@ div.quiz {
 div.questionView {
   display: flex;
   flex-direction: row;
-  width: 100%;
+  padding: 15px;
 }
 
 div.frontPage {
   background-color: #333;
-  margin-top: 15px;
   border-radius: 10px;
   padding: 10px;
 }
 
 div.resultView {
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: stretch;
   flex-direction: column;
-  padding: 5px;
+  padding: 15px;
 }
 
 div.navigation {
@@ -158,7 +177,6 @@ div.question  {
   border-radius: 10px;
   border-width: 1px;
   background-color: #333;
-  margin-top: 15px;
 }
 
 div.choice {
@@ -230,12 +248,11 @@ div.navBar {
   width: 100%;
   max-width: 100px;
   height: 85vh;
-  margin-top: 20px;
   padding-top: 20px;
   border-radius: 10px;
   position: sticky;
   position: -webkit-sticky;
-  top: 28px;
+  top: 15px;
 }
 
 div.navBarBtns {
@@ -350,6 +367,12 @@ h1 {
   text-decoration: underline;
 }
 
+h1.title {
+  margin-top: 0;
+  font-size: 50px;
+  margin-bottom: 20px;
+}
+
 p.latex, p.follow {
   margin: 0;
   padding: 0;