aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/site/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'site/style.css')
-rw-r--r--site/style.css70
1 files changed, 70 insertions, 0 deletions
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;
+ }
+}