Basic setup of intro screens

styles.scss

@@ -23,6 +23,20 @@ main {
 button {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
     'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
+
+  padding: 6px 15px;
+  background-color: transparent;
+  border: 2px solid black;
+  border-radius: 5px;
+  font-weight: bold;
+  max-width: 180px;
+
+  &:hover {
+    cursor: pointer;
+    background-color: black;
+    color: white;
+  }
 }
 
 .ui {
@@ -211,6 +225,64 @@ button {
       }
     }
   }
+
+  #intro {
+    background-color: white;
+    position: fixed;
+    z-index: 10;
+    top: 50%;
+    left: 50%;
+    min-width: 60%;
+    max-width: 90%;
+    max-height: 90%;
+    overflow-y: auto;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    padding: 2.5rem 4rem;
+    border-radius: 15px;
+    --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+
+    #intro-step1 {
+      display: flex;
+      flex-direction: column;
+
+      h3 {
+        margin: 0.6rem 0 0rem 0;
+      }
+
+      p {
+        margin: 0.6rem 0 1rem;
+      }
+
+      #intro-disclaimer {
+        background-color: #ffedd5;
+        color: #7c2d12;
+        padding: 4px 20px;
+        border-radius: 5px;
+        border-left: 7px solid #7c2d12;
+        margin-top: 15px;
+      }
+    }
+
+    #intro-step2 {
+      display: none;
+    }
+
+    #intro-step3 {
+      display: none;
+    }
+
+    #intro-step4 {
+      display: none;
+    }
+
+    #intro-button {
+      float: right;
+      margin-top: 25px;
+    }
+  }
 }
 
 #backdrop {
@@ -223,3 +295,14 @@ button {
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.7);
 }
+
+#intro-backdrop {
+  display: block;
+  position: fixed;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.95);
+}