Style der Seite überarbeitet

index.html

@@ -52,7 +52,7 @@
                     werden.</p>
                     <a href="https://www.pi.uni-hannover.de/fileadmin/pi/se/Stud-Arbeiten/2021/BA-Thomczik2021.pdf">Link zur Bachelorarbeit</a>
                 <div class="video-container">
-                    <video src="demo.mp4" width="320" height="240" controls></video>
+                    <video src="demo.mp4" controls></video>
                 </div>
             </div>
         </div>

style.css

@@ -1,3 +1,13 @@
+/* Font Sizes (px): */
+/* 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */
+
+/* Whitespace (px) */
+/* 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */
+
+* {
+    --color-primary: #08F7FEFF;
+}
+
 .content-layer {
   position: absolute;
   width: 100%;
@@ -15,25 +25,36 @@
 }
 
 .card {
-	display: inline-block;
 	box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
 	position: relative;
-	padding: 2em;
+	padding: 2.4rem 3.2rem;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-    background-color: rgba(0, 140, 145, 0.99);
-	width: 75vw;
-	min-height: 25vh;
+    background-color: rgba(0, 140, 145, 0.80);
+	max-width: 80rem;
+    margin: 2.4rem auto;  
 	border-radius: 25px;
-	overflow-y: auto;
-	margin-bottom: 20px;
+    justify-content: space-evenly;
 }
 
 .card h1, .card p {
-    opacity: 1;
+    color: var(--color-primary);
+}
+
+.card h1 {
+    font-size:2.4rem;
 }
 
+.card p {
+    font-size:1.8rem;
+    letter-spacing:0.05rem;
+}
+
+.card video {
+    width: 48rem;
+    padding-top: 1.6rem;
+}
 
 .video-container {
 }
@@ -58,16 +79,18 @@ html, body {
 	font-family: 'Orbitron', sans-serif;
 	line-height: 1.5;
 	color: #08F7FE;
+    font-size: 62.5%;
 }
 
 a {
+    font-size: 1.8rem;
     font-family: 'Orbitron', sans-serif;
 	color: #08F7FE;
-    text-decoration: none;
+    text-decoration: underline;
 }
 
 a:hover {
-    text-decoration: underline;
+    text-decoration: none;
 }
 
 button {
@@ -80,5 +103,4 @@ button {
 
 button:hover {
     cursor: pointer; 
-
 }