404 mobile

JohnFScha · Jan 6, 2024 · 0714b33 · 0714b33
1 parent 962053f
commit 0714b33
Showing 1 changed file with 57 additions and 7 deletions.
diff --git a/404.css b/404.css
@@ -1,6 +1,7 @@
-/* Colors */
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap");
+
 @font-face {
-    font-family: "Montserrat";
+    font-family: "Montserraty";
     src: url("src/assets/Montserrat-black/Montserrat-Black.eot");
     /* IE9 Compat Modes */
     src: url("src/assets/Montserrat-black/Montserrat-Black.eot") format("embedded-opentype"), url("src/assets/Montserrat-black/Montserrat-Black.woff2") format("woff2"), url("src/assets/Montserrat-black/Montserrat-Black.woff") format("woff"), url("src/assets/Montserrat-black/Montserrat-Black.ttf") format("truetype"), url("src/assets/Montserrat-black/Montserrat-Black.svg#svgFontName") format("svg");
@@ -11,7 +12,7 @@
 
 :root {
     font-size: 20px;
-    font-family: "Montserrat", sans-serif;
+    font-family: "Montserraty", sans-serif;
 }
 
 * {
@@ -22,7 +23,7 @@
 body {
     overflow: hidden;
     box-sizing: border-box;
-    font-family: 'Montserrat';
+    font-family: 'Montserraty';
 }
 
 main {
@@ -57,14 +58,14 @@ main .text {
 
 main .titleCtn {
     font-weight: 900;
-    font-family: "Montserrat", sans-serif;
+    font-family: "Montserraty", sans-serif;
     font-size: 20rem;
     margin-bottom: 8rem;
     color: #CBDB43;
 }
 
 main .error {
-    font-family: "Montserrat", sans-serif;
+    font-family: "Montserraty", sans-serif;
     -webkit-text-stroke: 2px rgb(203, 219, 67);
     color: transparent;
     position: absolute;
@@ -113,9 +114,58 @@ button {
     align-items: center;
     border-radius: 30px;
     background-color: transparent;
-    font-family: 'Montserrat';
+    font-family: 'Montserraty';
     color: #CBDB43;
     border: 3px solid var(--Estilos-Colores-Verde-Lima-green-500, #CBDB43);
     cursor: pointer;
     font-size: 1rem;
+}
+
+@media screen and (max-width: 390px) {
+    main {
+        width: 110vw;
+        height: 110vh;
+    }
+
+    main .overlay {
+        width: 110vw;
+        height: 110vh;
+    }
+
+    main .titleCtn {
+        font-size: 8rem;
+    }
+
+    main .titleCtn .error {
+        left: 25%;
+        top: 15%;
+    }
+
+    main .subCtn {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        gap: 1rem;
+        width: 100%;
+    }
+
+    main .subCtn .sub1 {
+        margin: 0;
+    }
+
+    main .subCtn .sub2 {
+        margin: 0;
+        font-size: 35px;
+    }
+
+    main .subCtn p {
+        font-family: 'Montserrat', sans-serif !important;
+        font-weight: 300;
+        width: 80%;
+    }
+
+    main .subCtn button {
+        margin-bottom: 20px;
+    }
 }