add variables, refaktoring

CSS/style.css

@@ -1,19 +1,27 @@
+@import url(variables.css);
+@import url(Block/header.css);
+@import url(Block/footer.css);
+@import url(Element/logo.scss);
+
 *, *:before, *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
+
+
 body {
-    background-color: #ffffff;
+    background-color: var(--brand-background);
     color: #666;
     font-size: 15px;
+    margin: 0;
 }
 
 h1 {
     margin: 10px;
-    color: #4d4d4d;
-    font-size: 30px;
+    color: var(--brand-white);
+    font-size: var(--font-size-title-h1);
 }
 
 h1 span {
@@ -21,9 +29,10 @@ h1 span {
     font-size: 40px;
 }
 
+
+
 h2 {
     color: orange;
-    padding: 10px 0 0 10px;
 }
 
 main {
@@ -32,9 +41,8 @@ main {
 }
 
 #wrapper {
-    max-width: 600px;
+    max-width: 90%;
     margin: 0 auto;
-    background-color: #4d4d4d;
     color: white;
 }
 
@@ -54,70 +62,6 @@ main {
    color: orange; 
 }
 
-nav ul {
-    list-style-type: none;
-    padding: 0;
-    display: inline-block;
-    margin: 0;
-}
-
-nav li {
-    float: left;
-    text-align: center;
-    
-}
-
-nav li a {
-    display: block;
-    width: 100px;
-    height: 30px;
-    border: 1px solid #4d4d4d;
-    background-color: #4d4d4d;
-    color: white;
-    text-decoration: none;
-    margin: 5px;
-    text-align: center;
-    line-height: 30px;
-}
-
-nav li a:hover {
-    background-color: orange;
-}
-
-nav {
-    position: fixed;
-    background: white;
-    top: 0px;
-    width: 600px;
-    text-align: center;
-    padding-top: 10px;
-}
-
-#metanavi {
-    color: #4d4d4d;
-    font-weight: bold;
-    margin-bottom: 5px;
-}
-
-#metanavi a {
-    background: #09add0;
-    border: none; 
-    width: 100px; 
-    margin: 0 5px 0 5px; 
-    float: right; 
-    padding: 2px; 
-    border-radius: 5px; 
-    color:#fff;  
-    cursor:pointer; 
-    font-size: 12px;
-    text-decoration: none;
-    text-align: center;
-}
-
-#metanavi a:hover {
-    background: orange;
-}
-
 .articleImg {
     width: 100%;
     border: 2px solid lightskyblue;
@@ -199,4 +143,15 @@ form select {
     display: block;
     font-size: 18px;
     margin: 0 0 5px 0;
+}
+
+.d-flex-between{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.hover:hover{
+    opacity: .75;
+    text-decoration: none;
 }