From 8ad90d1e60cfae67598894cbcb8324bb218dbc11 Mon Sep 17 00:00:00 2001
From: John <johnnyiceproductions@gmail.com>
Date: Mon, 2 May 2022 14:31:32 -0400
Subject: [PATCH] Added Styling for Buttons

---
 css/style.css | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/css/style.css b/css/style.css
index d96c0a6..f77f683 100644
--- a/css/style.css
+++ b/css/style.css
@@ -43,6 +43,19 @@ body {
     border-radius: 30px;
 }
 
+#startPage {
+    position: absolute;
+    align-items: center;
+    top: 75%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    /*background-color: var(--background-color);*/
+    width: 150px;
+    height: 50px;
+    border-radius: 30px;
+    background:none;
+}
+
 #textDiv {
     display: flex;
     justify-content: center;
@@ -50,6 +63,79 @@ body {
     height: 100%;
 }
 
+.button {
+         border-radius: 30px;
+         box-shadow: 0 0 1.25rem 0.5rem var(--shadow-color);
+         justify-content: center;
+         align-items: center;
+         display: flex;
+         height: 100%;
+         width: 150px;
+         height: 50px;
+         top: 50%;
+         left: 50%;
+         color:white;
+         /*background-image:
+         -webkit-linear-gradient(-45deg, 
+                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
+                           rgba(0,0, 0, .1) 66%, transparent 66%),
+         -webkit-linear-gradient(top, 
+                           rgba(255, 255, 255, .25), 
+                           rgba(0, 0, 0, .25)),
+         -webkit-linear-gradient(left, #0074cc, #a700cc);*/
+         background:none;
+}
+
+#firstButtonDiv, #secondButtonDiv {
+    background-image:
+         -webkit-linear-gradient(-45deg, 
+                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
+                           rgba(0,0, 0, .1) 66%, transparent 66%),
+         -webkit-linear-gradient(top, 
+                           rgba(255, 255, 255, .25), 
+                           rgba(0, 0, 0, .25)),
+         -webkit-linear-gradient(left, #0074cc, #a700cc);
+         width: 150px;
+         height: 50px;
+         display: inline-block;
+}
+
+#firstButtonDiv:hover, #secondButtonDiv:hover {
+    background-image:
+         -webkit-linear-gradient(-45deg, 
+                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
+                           rgba(0,0, 0, .1) 66%, transparent 66%),
+         -webkit-linear-gradient(top, 
+                           rgba(255, 255, 255, .25), 
+                           rgba(0, 0, 0, .25)),
+         -webkit-linear-gradient(left, #0061ac, #8e00ad)!important;
+}
+
+#firstButtonDiv, #secondButtonDiv {
+    border-radius: 30px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    height: 100%;
+    width: 150px;
+    height: 50px;
+    top: 50%;
+    left: 50%;
+    color:white;
+    background-image:
+         -webkit-linear-gradient(-45deg, 
+                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
+                           rgba(0,0, 0, .1) 66%, transparent 66%),
+         -webkit-linear-gradient(top, 
+                           rgba(255, 255, 255, .25), 
+                           rgba(0, 0, 0, .25)),
+         -webkit-linear-gradient(left, #0074cc, #a700cc);
+}
+
+#secondButtonDiv {
+    margin-top:10px;
+}
+
 p {
     color: var(--text-color);
     font-size: 5.8rem;