Layout setup (#338)

Create css strucure, clean up the index html and use proper tags.
Visualy minor changes, but this allow us maint better visuals and start
the css standards that will help us future

src/client/styles/components/button.css

@@ -0,0 +1,57 @@
+.c-button {
+  background: var(--primaryColor);
+  color: #fff;
+  cursor: pointer;
+  outline: none;
+  display: inline-block;
+  font-size: 16px;
+  border: 1px solid transparent;
+  text-align: center;
+  padding: 0.8rem 1rem;
+  border-radius: 8px;
+  transition: var(--transition);
+
+  @media (min-width: 1024px) {
+    font-size: 18px;
+  }
+}
+
+.c-button:hover,
+.c-button:active,
+.c-button:focus {
+  background: var(--primaryColorHover);
+  transition: var(--transition);
+}
+
+.c-button:disabled {
+  background: var(--primaryColorDisabled);
+  opacity: 0.7;
+  cursor: not-allowed;
+  transition: var(--transition);
+}
+
+.c-button--secondary {
+  background: var(--secondaryColor);
+  color: var(--fontColor);
+}
+
+.c-button--secondary:hover,
+.c-button--secondary:active,
+.c-button--secondary:focus {
+  background: var(--secondaryColorHover);
+}
+
+.c-button--block {
+  display: block;
+  width: 100%;
+}
+
+.c-button--blockDesktop {
+  display: block;
+  width: 100%;
+
+  @media (min-width: 1024px) {
+    width: auto;
+    margin: 0 auto;
+  }
+}

src/client/styles/components/modal.css

@@ -0,0 +1,57 @@
+.c-modal {
+  position: fixed;
+  padding: 1rem;
+  z-index: 1000;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow-y: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.c-modal__wrapper {
+  background: #23232382;
+  border-radius: 8px;
+  min-width: 340px;
+  max-width: 860px;
+}
+
+.c-modal__header {
+  position: relative;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  font-size: 18px;
+  background: #000000a1;
+  text-align: center;
+  color: #fff;
+  padding: 1rem 2.4rem 1rem 1.4rem;
+}
+
+.c-modal__close {
+  cursor: pointer;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+}
+
+.c-modal__content {
+  position: relative;
+  color: #fff;
+  padding: 1.4rem;
+  max-height: 60dvh;
+  overflow-y: scroll;
+  backdrop-filter: blur(8px);
+}
+
+/*This will be removed in future*/
+o-modal o-button {
+  @media (min-width: 1024px) {
+    margin: 0 auto;
+    display: block;
+    text-align: center;
+  }
+}