updates

src/assets/main.css

@@ -1,35 +1,47 @@
 @import './base.css';
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+.header-block {
+  height: 50px;
+  background-color: var(--main-color);
+  font-size: large;
+  color: white;
+  vertical-align: middle;
+  padding: 10px 0 10px 16px;
+  font-weight: 700;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
+.input-custom {
+  width: 100%;
+  box-sizing: border-box; /* обязательно! */
+  margin-bottom: 15px;
 }
 
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+.button-custom {
+  margin-left: auto;
+  background-color: var(--main-color);
+  font-weight: 600;
+  color: white;
 }
 
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+.button-custom:hover {
+  background-color: var(--second-color);
+}
+
+.input-custom, .button-custom {
+  padding: 12px 16px;
+  border: 1px solid #ddd;
+  border-radius: 15px;
+  font-size: 16px;
+}
+
+.button-container {
+  display: flex;
+}
+
+.center-message {
+  display: flex;
+  justify-content: center; /* горизонтальное центрирование */
+  align-items: center;    /* вертикальное центрирование */
+  height: calc(100dvh - 100px);
+  text-align: center;     /* центрирование текста */
 }