🌶💘 Checkpoint

./views/index.html:1954897/21064
./public/styles.css:1954897/522

public/styles.css

@@ -37,7 +37,7 @@ code { font-size: 87.5%; }
  */
 :root {
   --accent: #79B791;
-  --anim-curve: 
+  --gray: rgba(255,255,255, .24);
 }
 
 html, body {height: 100%;}
@@ -83,6 +83,23 @@ body {
   background: rgba(255,255,255, 0.12)
 }
 
+
+input {
+  display: block;
+  margin-bottom: 1em;
+  background: 0;
+  border: 0;
+  padding: .2em 0;
+  color: inherit;
+  font: inherit;
+  border-bottom: 2px solid var(--gray);
+  width: 100%;
+}
+input:focus {
+  border-bottom-color: var(--accent);
+}
+
+.right {float: right;}
 .flex {
   display: flex;
   flex-direction: row;
@@ -90,10 +107,9 @@ body {
 }
 .flex * {
   flex: 1;
-  margin: .5em;
   min-width: 200px;
+  margin: .5em;
 }
-
 .warn {
   padding: 1rem;
   border: 1px solid red;

views/index.html

@@ -22,7 +22,7 @@
         </style>
     </head>
     <body>
-        <div class="container middle" id="main">
+        <div class="container middle" id="main" hidden>
             <div class="lead">
                 <h1>Tabú</h1>
                 <p>
@@ -45,14 +45,19 @@
             </p>
             <button class="btn" data-open="prev">Entendido</button>
         </div>
-        <div class="container" id="view1" hidden>
+        <div class="container middle" id="view1" hidden>
-            <h1 class="h4">Dale el celular a la persona a tu izquierda.</h1>
+            <h1 class="h4 center">Dale el celular a la persona a tu izquierda.</h1>
-            <button class="btn" data-open="view2">¡Listo!</button>
+            <button class="btn right" data-open="view2">¡Listo!</button>
         </div>
-        <div class="container" id="view2" hidden>
+        <div class="container" id="view2" >
             <h1 class="h4">Escribe una palabra</h1>
-            <input type="text" name="" value="">
+            <p>
-            <button class="btn" data-open="view3">¡Listo!</button>
+                Escribe una palabra o frase. Acuértate que solo puede ser
+                sustantivo, verbo, adjetivo, adverbio o frase común.
+                No se permiten artículos, pronombres, conjunciones ni exclamaciones.
+            </p>
+            <input type="text" placeholder="p. ej., ">
+            <button class="btn right" data-open="view3">¡Listo!</button>
         </div>
     </body>
     <script src="./script.js" charset="utf-8"></script>