From a5ac4b6b9f2bfc6b9eb261b5ba5dc70e17e1c8b6 Mon Sep 17 00:00:00 2001
From: Jean-Pierre Appel <jeanpierre.appel01@gmail.com>
Date: Tue, 24 Oct 2023 12:26:56 -0400
Subject: minor styling

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

(limited to 'site/style.css')

diff --git a/site/style.css b/site/style.css
index e69de29..788f454 100644
--- a/site/style.css
+++ b/site/style.css
@@ -0,0 +1,70 @@
+:root {
+    --hi-color: purple;
+    --fg-color: lightgrey;
+    --bg-color: white;
+}
+
+body {
+    background-color: var(--bg-color);
+    animation-name: fadein;
+    animation-duration: 1s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+#game {
+    display: flex;
+    flex-direction: row;
+}
+
+div.vertex {
+    padding: 1em;
+    background-color: var(--hi-color);
+    border-radius: 50%;
+}
+
+div.vertex.off {
+    background-color: var(--fg-color);
+}
+
+section#options {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+section.screen {
+    animation: fadein 1s linear;
+}
+
+section.screen.inactive {
+    display: none;
+}
+
+button {
+    background-color: var(--hi-color);
+    color: var(--fg-color);
+    padding: 2em 3em;
+    border: none;
+}
+
+button:hover {
+    filter: brightness(120%);
+}
+
+button:focus {
+    outline: none;
+}
+
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
-- 
cgit v1.2.3