v1.0.0/release

finalize update and set logic

website/public/styles/extralarge.css

@@ -1,3 +1,7 @@
 .input-popup.expanded {
   height: 40vh;
 }
+
+.loading-bar-container {
+  max-width: 25%;
+}

website/public/styles/extrasmall.css

@@ -242,9 +242,9 @@ a {
   display: flex;
   flex-direction: column;
   animation: 0.5s ease-out 0s 1 slideUp;
-  animation-delay: 1s;
+  animation-delay: 0.5s;
   animation-fill-mode: forwards;
-  transform: translateY(300%);
+  transform: translateY(200%);
 }
 .input-popup * {
   color: var(--color-primary);
@@ -312,6 +312,29 @@ a {
   background-color: #55c16c;
 }
 
+@keyframes loading {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+.loading-bar-container {
+  min-height: 2rem;
+  background-color: var(--color-secondary-light);
+  border-radius: 1rem;
+  margin-top: 1rem;
+}
+.loading-bar {
+  position: relative;
+  width: 1rem;
+  min-height: 2rem;
+  background-color: #25d255;
+  border-radius: 1rem;
+  animation: 2s ease-out 0s infinite loading;
+}
+
 @media (hover: hover) and (pointer: fine) {
   .answer:hover,
   .answer.unselected:hover {

website/public/styles/large.css

@@ -24,3 +24,7 @@ footer {
 .input-popup.expanded {
   height: 50vh;
 }
+
+.loading-bar-container {
+  max-width: 35%;
+}

website/public/styles/medium.css

@@ -86,3 +86,7 @@ footer > div:last-of-type {
 .input-popup.expanded {
   height: 55vh;
 }
+
+.loading-bar-container {
+  max-width: 50%;
+}

website/public/styles/smallmedium.css

@@ -1,5 +1,5 @@
 .input-popup {
-  height: 10rem;
+  height: 11rem;
 }
 
 .input-popup.expanded {