Create css/style.css

src/css/style.css

@@ -0,0 +1,73 @@
+/* css/styles.css */
+
+/* Center align the paragraph in emotion cache */
+.st-emotion-cache-1rsyhoq p{
+    display: flex;
+    justify-content: center;
+    color:rgba(31, 2, 2, 0.815);
+}
+
+/* Nav bar */
+.st-emotion-cache-1eyfjps {
+    display: block;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    height: 3.75rem;
+    background: #0097b2;
+    outline: none;
+    z-index: 999990;
+}
+
+.st-emotion-cache-bm2z3a {
+    display: flex
+;
+    flex-direction: column;
+    width: 100%;
+    overflow: auto;
+    -webkit-box-align: center;
+    align-items: center;
+    background: #0097b2;
+}
+
+/* Style the specific element */
+h2 {
+    display: flex;
+    justify-content: center;
+    color: rgb(207, 58, 58);
+    letter-spacing: -3px;
+    line-height: 0.2;
+}
+h3 {
+    display: flex;
+    justify-content: center;
+    color: rgb(95, 33, 33);
+    letter-spacing: 0px;
+    line-height: 0.2;
+}
+
+/* Background for the emotion cache */
+.st-emotion-cache-12fmjuu {
+    background: rgb(255, 226, 0);
+}
+
+/* Background color for the app */
+.stApp {
+    background-color: yellow;
+}
+
+/* Button styles */
+.stButton > button {
+    color: white;
+    background-color: black;
+    padding: 2px 60px;
+    border-radius: 20px;
+    border: none;
+    font-size: 20px; /* Adjusted for better visibility */
+    font-weight: normal;
+}
+
+.stButton > button:hover {
+    background-color: #45a049;
+}