Update test style

DevFalconsz · Sep 30, 2023 · 0a57b24 · 0a57b24 · vercel · Sep 30, 2023
1 parent 3de5036
commit 0a57b24
Showing 1 changed file with 142 additions and 70 deletions.
diff --git a/public/levels/nivel2/style.css b/public/levels/nivel2/style.css
@@ -10,88 +10,160 @@
 }
 
 main {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background-image: url('img/bg.jpg');
-  background-size: cover;
-  align-items: center;
-  justify-content: center;
-  padding: 20px; 
-}
-
-header {
-  display: flex;
-  flex-direction: column; 
-  align-items: center;
-  justify-content: space-between;
-  background-color: rgba(255, 255, 255, 0.8);
-  font-size: 1em; 
-  width: 100%;
-  max-width: 800px;
-  padding: 15px; 
-  margin: 0 0 20px; 
-  border-radius: 5px;
-}
-
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px; 
-  width: 100%;
-  max-width: 600px; 
-  margin: 0 auto;
-}
-
-.card {
-  aspect-ratio: 3/4;
-  width: min(80px, 100%);
-  border-radius: 5px;
-  position: relative;
-  transition: all 400ms ease;
-  transform-style: preserve-3d;
-  background-color: #ccc;
-}
-
-.face {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background-size: cover;
-  background-position: center;
-  border: 2px solid #39813a;
-  border-radius: 5px;
-  transition: all 400ms ease;
-}
-
-.front {
-  transform: rotateY(180deg);
-}
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-image: url('img/bg.jpg');
+    background-size: cover;
+    height: 100dvh;
+    align-items: center;
+    justify-content: center;
+    padding: 50px 20px;
+  }
 
-.back {
-  background-image: url('img/back.png');
-  backface-visibility: hidden;
-}
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: rgba(255, 255, 255, 0.8);
+    font-size: 1.2em;
+    width: 100%;
+    max-width: 800px;
+    padding: 30px;
+    margin: 0 0 30px;
+    border-radius: 5px;
+  }
 
-.reveal-card {
-  transform: rotateY(180deg);
-}
+  .grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    width: 30rem;
+    /*max-width: 800px;*/
+    margin: 0 auto;
+  }
 
-.disabled-card {
-  filter: saturate(0);
-  opacity: 0.5;
-}
+  .card {
+    aspect-ratio: 3/4;
+    width: min(5rem, 100%);
+    border-radius: 5px;
+    position: relative;
+    transition: all 400ms ease;
+    transform-style: preserve-3d;
+    background-color: #ccc;
+  }
+
+  .face {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-size: cover;
+    background-position: center;
+    border: 2px solid #39813a;
+    border-radius: 5px;
+    transition: all 400ms ease;
+  }
+
+  .front {
+    transform: rotateY(180deg);
+  }
+
+  .back {
+    background-image: url('img/back.png');
+    backface-visibility: hidden;
+  }
+
+  .reveal-card {
+    transform: rotateY(180deg);
+  }
+
+  .disabled-card {
+    filter: saturate(0);
+    opacity: 0.5;
+  }
 
 @media only screen and (max-width: 600px) {
+  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    list-style: none;
+    border: none;
+    font-family: 'Press Start 2P', cursive;
+  }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-image: url('img/bg.jpg');
+    background-size: cover;
+    align-items: center;
+    justify-content: center;
+    padding: 20px; 
+  }
+
   header {
+    display: flex;
+    flex-direction: column; 
+    align-items: center;
+    justify-content: space-between;
+    background-color: rgba(255, 255, 255, 0.8);
+    font-size: 1em; 
+    width: 100%;
+    max-width: 800px;
     padding: 10px;
+    margin: 0 0 20px; 
+    border-radius: 5px;
   }
-
+  
   .grid {
+    display: flex;
+    flex-wrap: wrap;
     gap: 5px; 
+    width: 100%;
+    max-width: 600px; 
+    margin: 0 auto;
   }
-
+  
   .card {
+    aspect-ratio: 3/4;
     width: min(60px, 100%); 
+    border-radius: 5px;
+    position: relative;
+    transition: all 400ms ease;
+    transform-style: preserve-3d;
+    background-color: #ccc;
+  }
+
+  .face {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-size: cover;
+    background-position: center;
+    border: 2px solid #39813a;
+    border-radius: 5px;
+    transition: all 400ms ease;
+  }
+
+  .front {
+    transform: rotateY(180deg);
+  }
+
+  .back {
+    background-image: url('img/back.png');
+    backface-visibility: hidden;
+  }
+
+  .reveal-card {
+    transform: rotateY(180deg);
+  }
+
+  .disabled-card {
+    filter: saturate(0);
+    opacity: 0.5;
   }
 }