updates

src/assets/base.css

@@ -19,6 +19,12 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+
+  /* Главный цвет */
+  --main-color: rgba(115, 185, 83, 1);
+  --second-color: rgba(98, 156, 68, 1);
+  --main-back-color: rgba(240, 240, 240, 1);
+  --main-back-item-color: rgba(254, 254, 254, 1);
 }
 
 /* semantic color variables for this project */
@@ -36,7 +42,7 @@
   --section-gap: 160px;
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   :root {
     --color-background: var(--vt-c-black);
     --color-background-soft: var(--vt-c-black-soft);
@@ -48,7 +54,7 @@
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
   }
-}
+} */
 
 *,
 *::before,
@@ -59,9 +65,9 @@
 }
 
 body {
-  min-height: 100vh;
+  min-height: 100dvh;
   color: var(--color-text);
-  background: var(--color-background);
+  background: var(--main-back-color);
   transition:
     color 0.5s,
     background-color 0.5s;

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;     /* центрирование текста */
 }