1 files changed, 125 insertions, 0 deletions
diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..2bf6052
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,125 @@
+:root {
+    /* Tol Vibrant */
+    /* https://cran.r-project.org/web//packages//khroma/vignettes/tol.html */
+    --color-orange: #e73;
+    --color-blue: #07b;
+    --color-light-blue: #3be;
+    --color-pink: #e37;
+    --color-red: #c31;
+    --color-green: #098;
+    --color-gray: #bbb;
+    --color-light-gray: #eee;
+}
+
+html {
+    height: 100%;
+    font-family: sans-serif;
+}
+
+body {
+    height: 100%;
+    margin: 0;
+}
+
+/* Pages */
+
+.g-CardsPage, .g-WordPage {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+/* Cards */
+
+.g-Score {
+    position: absolute;
+    top: 3vw;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    color: black;
+    font-size: 4vw;
+    font-weight: bold;
+}
+
+.g-Cards {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5vw;
+    width: 100%;
+    height: 100%;
+}
+
+.g-Cards > button {
+    color: var(--color-blue);
+    background-color: white;
+    border: 1vw solid var(--color-blue);
+    cursor: pointer;
+    border-radius: 1vw;
+    padding: 6vw 4vw;
+    font-size: 5vw;
+    font-weight: bold;
+}
+
+.g-Cards > button:hover {
+    background-color: var(--color-light-gray);
+}
+
+/* Word */
+
+.g-WordPage {
+    display: none;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+
+@keyframes appear {
+    from {opacity: 0}
+    to {opacity: 1}
+}
+
+.g-Word {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10vw;
+    font-weight: bold;
+    color: var(--color-blue);
+    opacity: 0;
+    animation: appear 2s ease-in 2s 1 normal forwards;
+}
+
+.g-Buttons {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    gap: 10vw;
+}
+
+.g-Buttons > button {
+    padding: 1vw 3vw;
+    cursor: pointer;
+    font-size: 8vw;
+    border-width: 1vw;
+    border-style: solid;
+    border-radius: 1vw;
+    background-color: white;
+}
+
+.g-Buttons > button:hover {
+    background-color: var(--color-light-gray);
+}
+
+.g-Good {
+    color: var(--color-green);
+    border-color: var(--color-green);
+}
+
+.g-Bad {
+    color: var(--color-red);
+    border-color: var(--color-red);
+}