Small media query adjustments

1 files changed, 93 insertions, 77 deletions

diff --git a/style.css b/style.css
index 7042fc6..b291c75 100644
--- a/style.css
+++ b/style.css
@@ -6,7 +6,6 @@
     opacity: 1;
   }
 }
-
 @keyframes moveInLeft {
   0% {
     opacity: 0;
@@ -17,7 +16,6 @@
     transform: translate(0);
   }
 }
-
 @keyframes moveInRight {
   0% {
     opacity: 0;
@@ -28,7 +26,6 @@
     transform: translate(0) skewX(-12deg);
   }
 }
-
 @keyframes moveInRightMobile {
   0% {
     opacity: 0;
@@ -55,11 +52,7 @@ body {
 }
 
 body {
-  background: linear-gradient(
-    45deg,
-    rgba(2, 48, 89, 0.89) 0%,
-    rgba(9, 61, 94, 0.84) 100%
-  );
+  background: linear-gradient(45deg, rgba(2, 48, 89, 0.89) 0%, rgba(9, 61, 94, 0.84) 100%);
   background-repeat: no-repeat;
   background-size: cover;
   box-sizing: border-box;
@@ -79,6 +72,11 @@ main * {
   animation: fade-in 2s ease-out;
 }
 
+::selection {
+  background-color: #ececec;
+  color: #252424;
+}
+
 .text-link {
   color: #e79759;
 }
@@ -122,6 +120,11 @@ nav {
   height: 10vh;
   width: 100vw;
 }
+@media screen and (max-width: 980px) {
+  nav {
+    height: fit-content;
+  }
+}
 nav ul {
   display: flex;
   align-items: center;
@@ -131,10 +134,26 @@ nav ul {
   padding: 0 3rem;
   width: 100%;
 }
+@media screen and (max-width: 980px) {
+  nav ul {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 0;
+  }
+}
 nav li:first-child {
   text-align: left;
   margin-right: auto;
 }
+@media screen and (max-width: 980px) {
+  nav li:first-child {
+    text-align: center;
+    margin-right: 1.5rem;
+  }
+}
 nav li a {
   display: block;
   color: inherit;
@@ -149,33 +168,28 @@ nav li a:hover {
   color: #ecbf4b;
   transform: translateY(-0.3rem);
 }
-
 @media screen and (max-width: 980px) {
-  nav {
-    height: fit-content;
-  }
-  nav ul {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    padding: 0;
-  }
   nav li a {
     font-size: 2rem;
   }
-  nav li:first-child {
-    text-align: center;
-    margin-right: 1.5rem;
-  }
 }
+
 .about-section {
   display: flex;
   align-items: center;
   justify-content: space-around;
   margin: 3rem auto;
 }
+@media screen and (max-width: 1400px) {
+  .about-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 8rem auto;
+    width: 80%;
+  }
+}
 
 .welcome-section {
   display: grid;
@@ -186,6 +200,17 @@ nav li a:hover {
   margin: 3rem auto;
   width: 60%;
 }
+@media screen and (max-width: 1400px) {
+  .welcome-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4rem;
+    margin: 8rem auto;
+    width: 80%;
+  }
+}
 .welcome-section .welcome-intro {
   border-radius: 10px;
   outline: 3px solid #e79759;
@@ -199,6 +224,12 @@ nav li a:hover {
 .projects-section h2 {
   margin-bottom: 5rem;
 }
+@media screen and (max-width: 1400px) {
+  .projects-section {
+    margin: 8rem auto;
+    width: 80%;
+  }
+}
 .projects-section > div:not(:nth-child(2)) {
   margin-top: 10rem;
 }
@@ -210,34 +241,13 @@ nav li a:hover {
 .contact-section h2 {
   margin-bottom: 5rem;
 }
-
-@media screen and (max-width: 1380px) {
-  .about-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 8rem auto;
-    width: 80%;
-  }
-  .welcome-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 4rem;
-    margin: 8rem auto;
-    width: 80%;
-  }
-  .projects-section {
-    margin: 8rem auto;
-    width: 80%;
-  }
+@media screen and (max-width: 1400px) {
   .contact-section {
     margin: 8rem auto;
     width: 80%;
   }
 }
+
 footer {
   background-color: #173d5a;
   width: 100vw;
@@ -245,18 +255,35 @@ footer {
 footer * {
   margin: 3rem 4rem 2rem 4rem;
 }
+@media screen and (max-width: 600px) {
+  footer * {
+    margin: 2rem;
+  }
+}
 footer dl {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 2rem;
 }
+@media screen and (max-width: 600px) {
+  footer dl {
+    flex-direction: column;
+    height: max-content;
+  }
+}
 footer dl * {
   color: inherit;
   font-size: 1.5rem;
   margin: 0.5rem;
   transition: transform 0.3s;
 }
+@media screen and (max-width: 600px) {
+  footer dl * {
+    font-size: 1.3rem;
+    margin: 0.3rem;
+  }
+}
 footer dl dd i:hover {
   color: #ecbf4b;
   transform: translateY(-0.3rem);
@@ -268,19 +295,6 @@ footer .big-icon {
   font-size: 2rem;
 }
 
-@media screen and (max-width: 520px) {
-  footer * {
-    margin: 2rem;
-  }
-  footer dl {
-    flex-direction: column;
-    height: max-content;
-  }
-  footer dl * {
-    font-size: 1.3rem;
-    margin: 0.3rem;
-  }
-}
 .text-container {
   background-color: #173d5a;
   border-radius: 10px;
@@ -289,6 +303,12 @@ footer .big-icon {
   transform: skewX(-12deg);
   width: 50%;
 }
+@media screen and (max-width: 1400px) {
+  .text-container {
+    transform: skewX(0);
+    width: auto;
+  }
+}
 .text-container p:not(:last-child) {
   margin-bottom: 1.5rem;
 }
@@ -297,17 +317,13 @@ footer .big-icon {
   animation: moveInRight 2s ease-out;
   backface-visibility: hidden;
 }
-
-@media screen and (max-width: 1380px) {
-  .text-container {
-    transform: skewX(0);
-    width: auto;
-  }
+@media screen and (max-width: 1400px) {
   .text-about {
     animation: moveInRightMobile 2s ease-out;
     margin-top: 5rem;
   }
 }
+
 .portrait-container {
   height: 50vh;
   width: fit-content;
@@ -328,7 +344,7 @@ footer .big-icon {
   gap: 2rem;
 }
 
-@media screen and (max-width: 1380px) {
+@media screen and (max-width: 1400px) {
   .project-container {
     display: flex;
     flex-direction: column;
@@ -348,16 +364,16 @@ footer .big-icon {
   width: 40%;
   transition: transform 0.6s ease;
 }
+@media screen and (max-width: 1400px) {
+  .project-screenshot {
+    width: 80%;
+  }
+}
 .project-screenshot:hover {
   transform: scale(1.2);
   z-index: 100;
 }
 
-@media screen and (max-width: 1380px) {
-  .project-screenshot {
-    width: 80%;
-  }
-}
 .messenger-form {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -366,6 +382,11 @@ footer .big-icon {
   gap: 2rem;
   width: 50%;
 }
+@media screen and (max-width: 1400px) {
+  .messenger-form {
+    width: 100%;
+  }
+}
 .messenger-form div {
   display: flex;
   align-items: flex-start;
@@ -394,11 +415,6 @@ footer .big-icon {
   outline: 3px solid #e79759;
 }
 
-@media screen and (max-width: 1380px) {
-  .messenger-form {
-    width: 100%;
-  }
-}
 @media screen and (max-width: 820px) {
   .messenger-form {
     display: flex;