Update styles.css

styles.css

@@ -1,78 +1,137 @@
+:root {
+    --primary-red: #cc0000;
+    --dark-bg: #111111;
+    --text-light: #ffffff;
+    --accent-gray: #333333;
+}
+
 body {
-  margin: 0px;
-  padding: 0px;
+    margin: 0;
+    padding: 0;
+    background-color: var(--dark-bg);
+    color: var(--text-light);
+    /* Privacy-focused font stack using system fonts */
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    overflow-x: hidden;
 }
 
 .loading-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100vw;
-  height: 100vh;
-  max-width: 100%;
-  max-height: 100%;
-  flex-wrap: wrap;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 2rem;
+    text-align: center;
 }
 
 @keyframes fadeIn {
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0%);
-    opacity: 1;
-  }
+    from {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0%);
+        opacity: 1;
+    }
 }
 
 .fade-in-text {
-  font-family: 'Cinzel';
-  font-size: 2rem;
-  margin: 0px;
-  margin-bottom: 2rem;
-  padding: 0px;
-  animation: fadeIn 2s forwards;
+    font-size: 2rem;
+    margin: 0 0 2rem;
+    color: var(--primary-red);
+    animation: fadeIn 2s forwards;
+    font-weight: 700;
+    letter-spacing: 0.05em;
 }
 
 @keyframes delayedFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
 .delayed-fade-in {
-  font-family: 'Cinzel';
-  font-size: 2rem;
-  margin: 0px;
-  margin-bottom: 2rem;
-  padding: 0px;
-  opacity: 0;
-  animation: delayedFadeIn 2s forwards;
-  animation-delay: 2s;
+    font-size: 2rem;
+    margin: 0 0 2rem;
+    opacity: 0;
+    animation: delayedFadeIn 2s forwards;
+    animation-delay: 2s;
+    font-weight: 700;
+}
+
+.risks-container {
+    opacity: 0;
+    animation: delayedFadeIn 2s forwards;
+    animation-delay: 4s;
+    max-width: 800px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: var(--accent-gray);
+    border-radius: 4px;
 }
 
-.delayed-fade-in-img {
-  font-family: 'Cinzel';
-  font-size: 2rem;
-  margin: 0px;
-  margin-bottom: 2rem;
-  padding: 0px;
-  opacity: 0;
-  animation: delayedFadeIn 2s forwards;
-  animation-delay: 2s;
+.risk-item {
+    margin: 1rem 0;
+    padding: 1rem;
+    border-left: 4px solid var(--primary-red);
+    background: rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease;
 }
 
-.loading-container img {
-  margin: 0px;
-  padding: 0px;
+.risk-item:hover {
+    transform: translateX(10px);
 }
 
-@media only screen and (max-width: 675px) {
-  .loading-container .fade-in-text {
-    font-size: 0.85rem;
-  }
+.risk-item h3 {
+    color: var(--primary-red);
+    margin-top: 0;
+}
+
+.cta-button {
+    display: inline-block;
+    padding: 1rem 2rem;
+    margin-top: 2rem;
+    background-color: var(--primary-red);
+    color: var(--text-light);
+    text-decoration: none;
+    border-radius: 4px;
+    transition: transform 0.3s ease;
+    opacity: 0;
+    animation: delayedFadeIn 2s forwards;
+    animation-delay: 6s;
+    font-weight: 600;
+}
+
+.cta-button:hover {
+    transform: scale(1.05);
+    background-color: #ff0000;
+}
+
+.logo {
+    width: 75px;
+    height: 75px;
+    margin: 2rem;
+    opacity: 0;
+    animation: delayedFadeIn 2s forwards;
+    animation-delay: 2s;
+    transition: transform 0.3s ease;
+}
 
-  .loading-container .delayed-fade-in {
-    font-size: 0.85rem;
-  }
+.logo:hover {
+    transform: rotate(360deg);
+}
+
+@media only screen and (max-width: 675px) {
+    .fade-in-text, .delayed-fade-in {
+        font-size: 1.2rem;
+    }
+
+    .risk-item {
+        font-size: 0.9rem;
+    }
+
+    .risks-container {
+        padding: 1rem;
+        margin: 1rem;
+    }
 }