From 7fe6b4b288edea766267bd87de953caa89dc7978 Mon Sep 17 00:00:00 2001
From: ErikrafT <139592038+erikraft@users.noreply.github.com>
Date: Tue, 6 May 2025 19:38:46 -0300
Subject: [PATCH] Update 404.css

---
 Website About/NEW/css/404.css | 125 ++++++++++++++++++----------------
 1 file changed, 65 insertions(+), 60 deletions(-)

diff --git a/Website About/NEW/css/404.css b/Website About/NEW/css/404.css
index cddc04a..7c800b5 100644
--- a/Website About/NEW/css/404.css	
+++ b/Website About/NEW/css/404.css	
@@ -1,7 +1,7 @@
 body {
     font-family: Arial, sans-serif;
     background-image: url('/images/Gato-Comeu-Pagina-HTML.png');
-    background-size: contain;
+    background-size: cover;
     background-position: center center;
     background-attachment: fixed;
     background-color: var(--background-color);
@@ -27,8 +27,8 @@ body::before {
 
 main {
     text-align: center;
-    padding: 50px 20px;
-    max-width: 800px;
+    padding: 40px 16px;
+    max-width: 600px;
     margin: 0 auto;
     min-height: 100vh;
     display: flex;
@@ -37,74 +37,82 @@ main {
     align-items: center;
     position: relative;
     z-index: 1;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 20px;
-    backdrop-filter: blur(5px);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    background: rgba(0, 0, 0, 0.45);
+    border-radius: 18px;
+    backdrop-filter: blur(4px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
 }
 
-img {
-    max-width: 100%;
-    height: auto;
-    margin-bottom: 30px;
+.img-container {
+    width: 100%;
+    max-width: 500px;
+    aspect-ratio: 16 / 9;
+    margin-bottom: 24px;
     border-radius: 10px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.img-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    border-radius: 10px;
+    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4));
 }
 
 h1 {
-    font-family: Arial, sans-serif;
-    font-size: 4rem;
-    margin-bottom: 10px;
-    color: #ffffff;
+    font-size: 5rem; /* Aumenta o tamanho do texto 404 */
+    margin-bottom: 8px;
+    color: #fff;
     font-weight: bold;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 h2 {
-    font-family: Arial, sans-serif;
-    font-size: 2rem;
-    margin-bottom: 15px;
-    color: #ffffff;
+    font-size: 1.5rem;
+    margin-bottom: 12px;
+    color: #fff;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 strong {
-    font-family: Arial, sans-serif;
     display: block;
-    font-size: 1.3rem;
-    margin-bottom: 15px;
-    color: #ffffff;
+    font-size: 1.1rem;
+    margin-bottom: 12px;
+    color: #fff;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
 }
 
 p {
-    font-family: Arial, sans-serif;
-    font-size: 1.2rem;
-    margin-bottom: 30px;
-    line-height: 1.6;
-    color: #ffffff;
-    max-width: 600px;
+    font-size: 1.1rem;
+    margin-bottom: 24px;
+    line-height: 1.5;
+    color: #fff;
+    max-width: 480px;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
 }
 
 .btn-voltar {
-    font-family: Arial, sans-serif;
     display: inline-flex;
     align-items: center;
     gap: 10px;
-    padding: 15px 30px;
+    padding: 12px 26px;
     background: linear-gradient(145deg, #ffffff, #e6e6e6);
-    color: #000000;
+    color: #000;
     text-decoration: none;
     border-radius: 50px;
     transition: all 0.3s ease;
-    font-size: 1.2rem;
+    font-size: 1.1rem;
     border: none;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+    font-weight: bold;
     position: relative;
     overflow: hidden;
-    font-weight: bold;
 }
 
 .btn-voltar::before {
@@ -114,18 +122,13 @@ p {
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(
-        90deg,
-        transparent,
-        rgba(255, 255, 255, 0.4),
-        transparent
-    );
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
     transition: 0.5s;
 }
 
 .btn-voltar:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     background: linear-gradient(145deg, #ffffff, #cccccc);
 }
 
@@ -134,33 +137,35 @@ p {
 }
 
 .btn-voltar i {
-    font-size: 1.3rem;
+    font-size: 1.2rem;
     transition: transform 0.3s ease;
 }
 
 .btn-voltar:hover i {
-    transform: scale(1.2);
+    transform: scale(1.15);
 }
 
-@media (max-width: 768px) {
-    body {
-        background-size: 300px;
+@media (max-width: 600px) {
+    main {
+        padding: 18px 4px;
+        max-width: 98vw;
+        border-radius: 10px;
+    }
+    .img-container {
+        max-width: 98vw;
+        aspect-ratio: 16 / 10;
     }
-    
     h1 {
-        font-size: 3rem;
+        font-size: 2.2rem;
     }
-    
     h2 {
-        font-size: 1.5rem;
-    }
-    
-    p {
         font-size: 1.1rem;
-        padding: 0 20px;
     }
-    
+    p, strong {
+        font-size: 0.98rem;
+    }
     .btn-voltar {
-        padding: 10px 20px;
+        padding: 10px 16px;
+        font-size: 1rem;
     }
 }