Update styles.css

static/css/styles.css

@@ -56,7 +56,7 @@ a:hover,
     padding: 10px;
     font-size: inherit;
     font-family: sans-serif;
-    border: 1px solid #5f6368;
+    border: 1px solid var(--search-container-background-border);
     border-radius: 25px;
 }
 
@@ -66,7 +66,7 @@ a:hover,
     color: inherit;
     background-color: var(--button-bg);
     font-size: 14px;
-    border: none;
+    border: 1px solid var(--main-bg);
     border-radius: 4px;
     padding: 13px 10px 13px 10px;
 }
@@ -79,7 +79,7 @@ a:hover,
 .sub-search-container {
     background-color: var(--search-form-background-color);
     width: 100%;
-    border-bottom: 1px solid #303134;
+    border-bottom: 1px solid var(--border);
 }
 
 .sub-search-container hr {
@@ -89,18 +89,16 @@ a:hover,
 .sub-search-container input {
     margin-bottom: 20px;
     width: 580px;
-}
-
-.sub-search-container .logo {
-    vertical-align: middle;
-    margin-right: 21px;
-    width: 60px;
-    height: auto;
-    padding: 14px
+    position: relative;
+    left: 140px;
+    margin: 18px;
 }
 
 .logomobile {
-    display: none;
+    position: absolute;
+    margin-top: 0px;
+    top: 20px;
+    left: 20px;
 }
 
 .noDecoration {
@@ -113,7 +111,7 @@ a:hover,
 }
 
 .sub-search-button-wrapper {
-    margin-left: 118px;
+    margin-left: 165px;
 }
 
 .search-button-wrapper button:hover,
@@ -181,7 +179,7 @@ a:hover,
 .text-result-container,
 #time,
 .next-page-button-wrapper {
-    margin-left: 116px;
+    margin-left: 170px;
 }
 
 .text-result-container {
@@ -195,13 +193,23 @@ a:hover,
     border-radius: 8px;
     background: var(--special-text-background);
     color: var(--special-text-color);
-    margin-left: 116px;
+    margin-left: 840px;
+    margin-top: 0px;
+    position: absolute;
+}
+
+@media only screen and (max-width: 1320px) {
+    .special-result-container {
+        position: relative;
+        float: none;
+        margin-left: 165px;
+    }
 }
 
 .text-result-wrapper {
-    max-width: 500px;
+    max-width: 550px;
     word-wrap: break-word;
-    margin-top: 35px;
+    margin-top: 25px;
 }
 
 .text-result-wrapper a {
@@ -209,6 +217,11 @@ a:hover,
     color: var(--result-fg);
 }
 
+.video-img {
+    height: 115px;
+    border-radius: 12px;
+}
+
 .text-result-wrapper h2 {
     font-size: 20px;
     color: var(--result-link-fg);
@@ -280,7 +293,7 @@ a:hover,
     background-color: var(--footer-bg);
     padding-top: 15px;
     padding-bottom: 15px;
-    border-top: 1px solid #303134;
+    border-top: 1px solid var(--border);
     text-align: center;
 }
 
@@ -359,6 +372,8 @@ a:hover,
     }
 
     .logomobile {
+        position: relative;
+        float: none;
         margin-top: 0px;
         margin-bottom: 0px;
         margin-left: auto;
@@ -366,10 +381,16 @@ a:hover,
         padding: 10px;
         font-size: 28px;
         display: block;
+        margin-top: 0px;
+        top: 0px;
+        left: 0px;
     }
 
     .sub-search-container input {
         width: 80%;
+        position: relative;
+        left: 0px;
+        margin-top: 0px;
     }
 
     .sub-search-button-wrapper {
@@ -394,10 +415,11 @@ a:hover,
     }
 
     .special-result-container {
-        max-width: 100%;
-        margin-left: 0px;
+        position: relative;
+        float: none;
+        max-width: 90%;
+        margin-left: 10px;
         width: auto;
-        border-radius: 0px;
     }
 
     .special-result-container img {
@@ -425,6 +447,10 @@ a:hover,
         font-size: 14px;
     }
 
+    .next-page-button-wrapper {
+        margin-bottom: 25px;
+    }
+
     .text-result-container,
     #time,
     .next-page-button-wrapper {