Some fixes and making it look nice

Author: casKd-dev

css/web.css

@@ -3,6 +3,7 @@ html {
     top: 0;
     left: 0;
     font-family: 'Oswald', sans-serif;
+    scroll-behavior: smooth;
 
     /*Fixed Background*/
     background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../res/bg.jpg);
@@ -18,11 +19,11 @@ html {
 
     --header-transparency: rgba(0, 0, 0, 0.7);
 
-    --image-size: 20%;
+    --image-size: 30%;
     --red: #d22;
     --dark-gray: #111;
     --gray: #151515;
-    --light-gray: #222;
+    --transparent-gray: #222E;
 
     --quick-transition: cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
     --long-transition: cubic-bezier(0.215, 0.610, 0.355, 1) 1s;
@@ -46,35 +47,35 @@ html {
     font-size: calc(var(--desktop-height) / 2);
     margin: auto 0;
 }
-#logo-header {
+.logo-header {
     display: none;
     opacity: 0;
     margin: auto 0;
 }
-#logo-header a {
+.logo-header a {
     text-decoration: none;
     color: #fff;
 }
-#logo-header img {
+.logo-header img {
     display: flex;
     margin-left: 5px;
 }
-#links-header {
+.links-header {
     display: flex;
     flex: 1;
     margin: auto 0;
     justify-content: space-around;
     transition: var(--quick-transition);
 }
-#links-header a {
+.links-header a {
     color: #eee;
     text-align: center;
     margin: auto 1vw;
     text-decoration: none;
     font-family: 'Dosis', sans-serif;
     transition: var(--quick-transition);
 }
-.header, #links-header, #logo-header, #logo-header img{
+.header, .links-header, .logo-header, .logo-header img{
     height: var(--desktop-height);
     font-size: calc(var(--desktop-height) / 2);
 }
@@ -88,16 +89,16 @@ html {
     font-size: calc(var(--desktop-height) / 1.75);
     height: calc(var(--desktop-height) * 1.5);
 }
-#links-header a:hover {
+.links-header a:hover {
     color: var(--red);
 }
 
 /*Sticky header*/
-.sticky > #logo-header {
+.sticky > .logo-header {
     opacity: 1;
     display: flex;
 }
-.sticky > #links-header {
+.sticky > .links-header {
     display: flex;
     flex: 1 1 0;
     justify-content: flex-end;
@@ -121,47 +122,47 @@ html {
 }
 
 /* Banner settings */
-#banner {
+.banner {
     /*Sizing*/
     height: 100vh;
     width: 100%;
     color: #fff;
     overflow: hidden;
-    font-size: 4vw;
+    font-size: calc(32px + 2vw);
     transition: var(--long-transition);
 
     /*Flexbox content*/
     justify-content: center;
     align-items: center; 
     display: flex;
 }
-#banner h1 {
+.banner h1 {
     filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
 }
-#banner img {
-    width: 20vw;
+.banner img {
+    width: calc(32px + 14vw);
     filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
     transition: var(--long-transition);
 }
 
 /* Text field settings */
-#text {
+.text {
     display: flex;
     flex-wrap: wrap;
-    width: 95%;
+    width: 100%;
     min-height: 100px;
-    background-color: var(--light-gray);
+    background-color: var(--dark-gray);
     color: #fff;
     align-self: center;
     transition: var(--quick-transition);
 }
 
-#text h2 {
+.text h2 {
     text-align: center;
     width: 100%;
     margin: 3vw 0;
-    font-size: 5vw;
-    line-height: 8vw;
+    font-size: calc(32px + 2vw);
+    line-height: 1.4em;
     background-color: var(--gray);
     transition: var(--quick-transition);
     color: var(--red);
@@ -175,106 +176,97 @@ html {
     margin: 0 auto;
     flex-direction: row;
     flex: 1;
-    font-size: 1.2vw;
+    font-size: calc(16px + 0.5vw);
     flex-wrap: wrap;
     align-items: flex-start;
     text-align: center;
     font-family: 'Dosis', sans-serif;
     transition: var(--quick-transition);
 }
 .row {
-    width: 45%;
+    width: 50%;
 }
 .text-field h3 { 
-    font-size: 1.2vw;
+    font-size: calc(16px + 1vw);
     margin: 0;
 }
 
 /*Category of descriptions*/
 .category {
-    margin: 1.5vw 0;
     display: flex;
     flex-wrap: nowrap;
-    width: 100%;
+    width: 90%;
+    margin: 1.5vw auto;
     overflow: hidden;
     transition: var(--quick-transition);
-    filter: saturate(0%);
     color: #fff;
-    box-shadow: 0 4px 8px -2px #000;
 }
 .category img {
-    width: 40%;
+    width: 80%;
     max-width: 900px;
     padding: 5% 5% 5% 5%;
     transition: var(--quick-transition);
 }
-.category:hover {
-    color: #c22;
-    box-shadow: 0 10px 8px -2px #000;
-    filter: saturate(100%);
-}
 
 /*Left Side settings*/
 .left {
-    background-color: var(--dark-gray);
     width: var(--image-size);
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
     min-width: 200px;
     transition: var(--quick-transition);
 }
 
 .swap .left {
     order: 1;
+    justify-content: flex-start;
 }
 
 /*Right side settings*/
 .right {
-    background-color: var(--gray);
     width: calc(100% - var(--image-size));
     display: flex;
     flex-direction: column;
-    padding: 2%;
+    padding: 5%;
     justify-content: center;
-    text-align: right;
+    text-align: left;
     transition: var(--quick-transition);
 }
 .right h3 {
     font-size: 3vw;
     margin: 0;
 }
 .right p {
-    font-size: 1.5vw;
-    font-style: italic;
+    font-size: calc(16px + 0.75vw);
     font-family: 'Open Sans Condensed', sans-serif;
 }
 .swap .right {
     order: 0;
-    text-align: left;
+    text-align: right;
 }
 
 /*Webpage footer*/
-#footer {
+.footer {
     color: #fff;
     display: flex;
-    width: 100%;
+    width: 95%;
     height: auto;
-    font-size: 1vw;
+    font-size: calc(16px + 0.75vw);
     text-align: center;
     align-items: center;
     overflow: hidden;
     align-content: space-around;
-    padding: 2% 0;
+    padding: 2% 2.5%;
     background-color: var(--dark-gray);
 }
-#footer a {
+.footer a {
     color: var(--red);
     text-decoration: none;
     padding: 0 0.5vw;
 }
-#footer-r, #footer-r a {
-    font-size: 1.5vw;
+.footer-r, .footer-r a {
+    font-size: calc(16px + 0.5vw);
     padding: 0;
     font-style: italic;
 }
@@ -292,35 +284,38 @@ html {
         opacity: 0;
         display: none; 
     }
-    #links-header a {
-        font-size: 3vw;
+    .links-header a {
+        font-size: calc(16 + 1vw);
     }
-    .header, #links-header, #links-header a, #logo-header img {
+    .header, .links-header, .links-header a, .logo-header img {
         height: var(--mobile-height);
         line-height: var(--mobile-height);
     }
     .header:hover {
-        background-color: var(--header-transparency);
+        background-color: var(--dark-gray);
         height: var(--mobile-height);
     }
-    .header:hover > #links-header a {
+    .header:hover > .links-header a {
         line-height: var(--mobile-height);
-        font-size: 3vw;
+        font-size: inherit;
     }
 
     /*Banner settings*/
-    #banner {
+    .banner {
         font-size: 4vw;
         height: 300px;
     }
-    #banner img {
+    .banner img {
         width: 20vw;
     }
 
     /*Category settings*/
     .category {
         flex-wrap: wrap;
-        margin: 2vw 0;
+        margin: 3vh 0;
+        width: 100%;
+        background-color: var(--gray);
+        box-shadow: 0px 10px 10px 5px rgba(0,0,0,1);
     }
     .category img {
         width: 30%;
@@ -336,6 +331,7 @@ html {
     }
     .left {
         min-width: 200px;
+        background-color: #5551;
     }
     .swap .right {
         order: 1;
@@ -346,10 +342,10 @@ html {
         text-align: center;
     }
     .right h3 {
-        font-size: 6vw;
+        font-size: calc(16px + 3vw);
     }
     .right p {
-        font-size: 3vw;
+        font-size: calc(16px + 1vw);
         margin: 0;
     }
 
@@ -358,43 +354,40 @@ html {
         width: 100%;
         margin: 10px 0;
     }
+    .text h2 {
+        font-size: calc(16px + 7vw);
+        line-height: 1.4em;
+    }
     .text-field {
-        font-size: 3vw;
+        font-size: calc(12px + 0.75vw);
         padding: 10px;
         justify-content: space-between;
     }
     .text-field h3 {
-        font-size: 4vw;
+        font-size: calc(16px + 1.2vw);
     }
 
     /*Footer settings*/
-    #footer {
+    .footer {
         width: 90%;
         padding: 0 5%;
-        font-size: 4vw;
+        font-size: calc(16px + 1.2vw);
         height: auto;
         flex-flow: wrap;
     }
-    #footer a {
-        font-size: 4vw;
+    .footer a {
+        font-size: calc(16px + 1.2vw);
         padding: 0 7px 0 7px;
     }
-    #footer-r, #footer-r a {
-        font-size: 3vw;
+    .footer-r, .footer-r a {
+        font-size: calc(16px + 0.5vw);
         padding: 0;
     }
-    #footer-r {
+    .footer-r {
         padding: 0 0 10px 0;
     }
 }
 
-/*Fit text to whole screen*/
-@media screen and (max-width: 1280px) {
-    #text {
-        width: 100%;
-    }
-}
-
 /*Scrollbar hide*/
 ::-webkit-scrollbar {
     width: 0;