starting refinement

src/app.css

@@ -130,10 +130,22 @@
 :root {
   font-family: "Source Code Pro", monospace;
 }
+::selection {
+  background-color: var(--color-text);
+  color: var(--color-crust);
+}
+::-moz-selection {
+  background-color: var(--color-text);
+  color: var(--color-crust);
+}
+::-webkit-selection {
+  background-color: var(--color-text);
+  color: var(--color-crust);
+}
 
 body {
   background: var(--color-base);
-  color: var(--color-crust);
+  color: var(--color-text);
 }
 
 .cursor-typing {
@@ -166,3 +178,241 @@ body {
     opacity: 0;
   }
 }
+
+.input-group,
+.textarea-group {
+  position: relative;
+  margin-top: 45px;
+}
+
+input.underlinedInput,
+textarea.underlinedInput {
+  font-size: 18px;
+  padding: 10px 10px 10px 5px;
+  display: block;
+  border: none;
+}
+input.underlinedInput,
+textarea.underlinedInput {
+  border-bottom: 1px solid var(--color-surface2);
+}
+
+textarea.underlinedInput {
+  resize: none;
+}
+
+input.underlinedInput:focus,
+textarea.underlinedInput:focus {
+  outline: none;
+}
+
+.bar {
+  position: relative;
+  display: block;
+}
+
+.bar:before,
+.bar:after {
+  content: "";
+  height: 2px;
+  width: 0;
+  bottom: 0px;
+  position: absolute;
+  transition: width 0.3s ease-out;
+  /*TODO:*/
+  background: var(--color-surface2);
+}
+
+.bar:before {
+  left: 50%;
+}
+
+.bar:after {
+  right: 50%;
+}
+
+input.underlinedInput:focus ~ .bar:before,
+input.underlinedInput:focus ~ .bar:after,
+textarea.underlinedInput:focus ~ .bar:before,
+textarea.underlinedInput:focus ~ .bar:after {
+  width: 50%;
+}
+input.underlinedInput:focus ~ label,
+input.underlinedInput:not(:placeholder-shown) ~ label,
+textarea.underlinedInput:focus ~ label,
+textarea.underlinedInput:not(:placeholder-shown) ~ label {
+  top: -20px;
+  font-size: 14px;
+  color: var(--color-blue);
+}
+
+.delete input.underlinedInput:focus ~ label,
+.delete input.underlinedInput:not(:placeholder-shown) ~ label,
+.delete textarea.underlinedInput:focus ~ label,
+.delete textarea.underlinedInput:not(:placeholder-shown) ~ label {
+  color: var(--color-red);
+}
+
+label.underlinedInputLabel {
+  font-size: 18px;
+  font-weight: normal;
+  position: absolute;
+  pointer-events: none;
+  left: 5px;
+  top: 10px;
+  transition:
+    all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+    color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+label.underlinedInputLabel {
+  color: var(--color-surface1);
+}
+
+.logoSpinner:hover {
+  animation: spinner 1.5s ease;
+}
+@keyframes spinner {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}
+@keyframes spinReverse {
+  to {
+    transform: rotate(-360deg);
+  }
+}
+.animate-spin-reverse {
+  animation: spinReverse 1s linear infinite;
+}
+
+.vertical-rule-around {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.vertical-rule-around:before,
+.vertical-rule-around:after {
+  content: "";
+  flex: 1;
+  border-left: 1px solid var(--color-surface2);
+  margin: 10px 0;
+}
+.checkbox-container {
+  position: relative;
+  padding-left: 35px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+}
+
+.checkbox-container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 25px;
+  width: 25px;
+  background-color: #eee;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.checkbox-container:hover input ~ .checkmark {
+  background-color: #ccc;
+}
+
+.checkbox-container input:checked ~ .checkmark {
+  background-color: #2196f3;
+}
+
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: var(--form-background);
+  margin: 0;
+  font: inherit;
+  width: 1.15em;
+  height: 1.15em;
+  border: 2px solid var(--color-blue);
+  border-radius: 0.15em;
+  transform: translateY(-0.075em);
+
+  display: grid;
+  place-content: center;
+}
+
+input[type="checkbox"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  clip-path: circle(25%);
+  transform: scale(0);
+  color: var(--color-blue);
+  transform-origin: center;
+  transition: 120ms transform ease-in-out;
+  /* Windows High Contrast Mode */
+  background-color: CanvasText;
+}
+@media (prefers-color-scheme: light) {
+  input[type="checkbox"]::before {
+    box-shadow: inset 1em 1em black;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  input[type="checkbox"]::before {
+    box-shadow: inset 1em 1em white;
+  }
+}
+
+input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+.tooltip {
+  position: relative;
+}
+.rule-around {
+  display: flex;
+  align-items: center;
+}
+.rule-around:before,
+.rule-around:after {
+  content: "";
+  flex: 1;
+  border-top: 1px solid var(--color-text);
+  margin: 0 10px;
+}
+.hover-underline-animation {
+  display: inline-block;
+  position: relative;
+}
+
+.hover-underline-animation::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  transform-origin: bottom right;
+  transition: transform 0.35s ease-out;
+}
+
+.hover-underline-animation:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+  background-color: var(--color-surface2);
+}