1 files changed, 119 insertions, 0 deletions
diff --git a/client/style/map.css b/client/style/map.css
index e64a4cd..3d9dd1f 100644
--- a/client/style/map.css
+++ b/client/style/map.css
@@ -15,3 +15,122 @@ main {
     position: relative;
     height:100%;
 }
+
+/* Describes the styling of all <article> elements */
+article {
+    color: var(--light-text-color);
+    border: none;
+    display: block;
+    width: 100%;
+    position: relative;
+}
+
+/* Describes the styling of all elements with class="parkname", note the . in front of parkname */
+.parkname {
+    background-color: white;
+    color: black;
+    font-size: 1rem;
+    font-weight: bold;
+    text-transform: none;
+    display: block;
+    height: auto;
+}
+
+/* Describes the styling of all elements with class="parkname", note the . in front of parkname */
+.parkdescription {
+    font-size: 1rem;
+    text-align: left;
+    height: 30px;
+    margin: 15px 15px 0 15px;
+}
+
+.order {
+    padding-top: 25px;
+    text-align:center;
+}
+
+.prices {
+    margin-bottom: 15px;
+    margin-left: 15px;
+    margin-right: 15px;
+    font-size: 0.9rem;
+}
+
+.total {
+    margin: 10px;
+    font-size: 0.9rem;
+}
+
+.adultinput {
+    width:100%;
+}
+
+.kidsinput {
+    width:100%;
+}
+
+.orderbutton {
+  background: hsl(170deg 0% 64%);
+  border-radius: 12px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  outline-offset: 4px;
+  margin: 20px;
+}
+
+.front {
+  font-size: 1rem;
+  padding: 6px 15px;
+
+  padding: 10px 9px;
+  font-size: 1.2rem;
+
+  display: block;
+  border-radius: 12px;
+  background: var(--primary-color);
+  color: white;
+  transform: translateY(-4px);
+  transition:
+      transform 600ms
+      cubic-bezier(.3, .7, .4, 1);
+}
+
+.disabled {
+  display: block;
+  border-radius: 12px;
+  background: grey;
+  color: white;
+  transform: translateY(-2px);
+  padding: 10px 9px;
+  font-size: 1.2rem;
+}
+
+.orderbutton:hover .front {
+    transform: translateY(-6px);
+    transition:
+        transform
+        250ms
+        cubic-bezier(.3, .7, .4, 1.5);
+}
+
+
+.orderbutton:active .front {
+  transform: translateY(-2px);
+}
+
+.orderbutton:active .disabled {
+  transform: translateY(-2px);
+}
+
+.orderbutton:hover .disabled {
+    transform: translateY(-2px);
+}
+
+
+
+
+.cancel .front {
+    font-size: 1rem;
+    padding: 6px 15px;
+}