1 files changed, 100 insertions, 0 deletions
diff --git a/frontend/src/App.css b/frontend/src/App.css
new file mode 100644
index 0000000..4f77d97
--- /dev/null
+++ b/frontend/src/App.css
@@ -0,0 +1,100 @@
+.App {
+  text-align: center;
+}
+
+.Logo-container {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.App-logo {
+  height: 15vmin;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: Logo-rotate-in 2s cubic-bezier(0.755, 0.05, 0.855, 0.06) forwards;
+  }
+  .App-main {
+    opacity: 0;
+    animation: App-fade-in 0.65s ease-in 1.8s forwards;
+  }
+}
+
+.App-bg {
+  background-color: #282c34;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.App-main {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.Grid {
+  background: #5262816f;
+  border-radius: 20px;
+  width: 80vmin;
+  height: 80vmin;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  gap: 1%;
+}
+
+.Fit-text {
+  font-size: calc(10px + 1vmin);
+  overflow: hidden;
+  text-overflow: clip;
+}
+
+.Grid-square {
+  background: #acc1eb9d;
+  border: none;
+  border-radius: 10px;
+  width: 100%;
+  height: 100%;
+  font-size: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Selected {
+  background: #d8deea9d;
+}
+
+@keyframes Logo-rotate-in {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg) scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg) scale(5);
+    opacity: 0;
+  }
+}
+
+@keyframes App-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}