Update file home.html

wiki/pages/home.html

@@ -8,6 +8,7 @@
   <title>Home | Tsinghua - IGEM 2024</title>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
+
     body {
       font-family: Calibri, sans-serif;
       line-height: 1.6;
@@ -19,16 +20,18 @@
       background-position: 90% center;
       background-repeat: no-repeat;
     }
+    
     .content-wrapper {
       display: flex;
       flex-direction: column;
       align-items: center;
       padding: 20px;
       max-width: 1200px;
-      margin: 250px auto 0; 
+      margin: 100px auto 0; 
       min-height: calc(100vh - 210px);
       justify-content: center;
     }
+
     .content-block {
       background-color: rgba(255, 255, 255, 0.7);
       border-radius: 20px;
@@ -39,16 +42,7 @@
       transition: all 0.3s ease;
       cursor: pointer;
     }
-    .content-block:first-child {
-      width: 80%;
-      margin: 0;
-      cursor: default;
-    }
-    .content-block:not(:first-child):hover {
-      background-color: rgba(255, 255, 255, 0.95);
-      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
-      transform: scale(1.02);
-    }
+
     .content-block img {
       max-width: 100%;
       height: auto;
@@ -56,30 +50,48 @@
       display: block;
       margin: 0 auto;
     }
-    .content-block h2 {
+
+    .content-block h2, .content-block p {
       color: #333;
       text-align: center;
+      font-style: italic;
+      font-size: 1.5rem;
     }
-    .content-block p {
-      color: #666;
-      text-align: center;
-    }
+
     .full-content {
       display: none;
     }
+
     #first-block h2 {
       font-family: 'Parisienne', cursive;
       color: #fa8072;
       opacity: 0;
       transition: opacity 2s ease-in-out;
+      font-size: 3rem;
     }
+
     #first-block p {
       font-family: 'Parisienne', cursive;
       color: #fa8072;
       opacity: 0;
       transition: opacity 2s ease-in-out;
       transition-delay: 2s;
+      font-size: 1.8rem;
+      text-align: center;
+    }
+
+    #first-block {
+      margin: 0;
+      width: 80%;
+      padding: 40px;
+      background-color: transparent;
+      box-shadow: none;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
     }
+
     .modal {
       display: none;
       position: fixed;
@@ -93,6 +105,7 @@
       justify-content: center;
       align-items: center;
     }
+
     .modal-content {
       background-color: #fefefe;
       padding: 40px 20px 20px;
@@ -104,12 +117,14 @@
       position: relative;
       overflow-y: auto;
     }
+
     .modal-content img {
       max-width: 100%;
       height: auto;
       display: block;
       margin: 10px auto;
     }
+
     .close {
       color: #aaa;
       position: absolute;
@@ -119,11 +134,13 @@
       font-weight: bold;
       cursor: pointer;
     }
+
     .close:hover,
     .close:focus {
       color: #000;
       text-decoration: none;
     }
+
     .loader-container {
       position: fixed;
       top: 0;
@@ -137,10 +154,12 @@
       align-items: center;
       z-index: 9999;
     }
+
     .loader-gif {
       width: 150px;
       height: 150px;
     }
+
     .centered-text {
       text-align: center;
       font-weight: bold;