Se han corregido errores de estilo y añadido botones al menú

webapp/src/App.css

@@ -64,3 +64,12 @@ a:hover {
   -webkit-box-shadow: 0 0 0 0 #000, 0 0 0 2px var(--shadow);
   box-shadow: 0 0 0 0 #000, 0 0 0 2px var(--shadow);
 }
+
+.logo {
+  font-family: oswald, sans-serif;
+  width: 100%;
+  font-size: 3rem;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 4px 4px 0 var(--shadow);
+}

webapp/src/components/Login/Login.css

@@ -1,3 +1,7 @@
+.main .logo{
+    margin-top: 3rem;
+}
+
 .login-container {
     display: grid;
     grid-template-columns: 1fr;

webapp/src/components/Login/Login.js

@@ -42,13 +42,15 @@ const Login = () => {
         ) : (
           <>
             <h1 className="login-header">Identifícate</h1>
+            <label for="login-username">Introduce tu nombre:</label>
             <input
               className="login-input"
               type="text"
               placeholder="Username"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
             />
+            <label for="login-password">Introduce tu contraseña:</label>
             <input
               className="login-input"
               type="password"

webapp/src/components/Nav/Nav.css

@@ -1,10 +1,5 @@
-.logo {
-  font-family: oswald, sans-serif;
-  width: 100%;
-  font-size: 3rem;
-  font-weight: 700;
-  margin: 0;
-  text-shadow: 4px 4px 0 var(--shadow);
+nav .logo{
+  margin-left: 3rem;
 }
 
 nav {

webapp/src/components/Nav/Nav.js

@@ -28,6 +28,7 @@ const Nav = () => {
         <Link to="/home">Home</Link>
         <Link to="/sobre">Sobre nosotros</Link>
         <Link to="/stats">Stats</Link>
+        <Link to="/ranking">Ránking</Link>
       </div>
       <div className="rightItems">
         <input
@@ -39,6 +40,9 @@ const Nav = () => {
         <button className="profile">
           Perfil
         </button>
+        <button className="profile">
+          Opciones
+        </button>
         <button className="disconnect" onClick={() => Logout()}>
           Desconectarse
         </button>

webapp/src/pages/WrongRoute/WrongRoute.css

@@ -41,7 +41,7 @@
     transform: translateY(50%);
     height: 160px;
     width: 10rem;
-    background-color: orange
+    background-color: var(--shadow)
 }
 
 @keyframes drop {
@@ -92,7 +92,7 @@
     font-size: 188px;
     font-weight: 700;
     margin: 0;
-    text-shadow: 4px 4px 0 orange;
+    text-shadow: 4px 4px 0 var(--shadow);
 }
 
 .notfound h2 {
@@ -117,17 +117,17 @@
     display: inline-block;
     font-weight: 400;
     text-transform: uppercase;
-    -webkit-box-shadow: 0 0 0 2px #000,2px 2px 0 2px orange;
-    box-shadow: 0 0 0 2px #000,2px 2px 0 2px orange;
+    -webkit-box-shadow: 0 0 0 2px #000,2px 2px 0 2px var(--shadow);
+    box-shadow: 0 0 0 2px #000,2px 2px 0 2px var(--shadow);
     text-decoration: none;
     -webkit-transition: .2s all;
     transition: .2s all
 }
 
 .notfound a:hover {
-    background-color: orange;
-    -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
-    box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
+    background-color: var(--shadow);
+    -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px var(--shadow);
+    box-shadow: 0 0 0 0 #000,0 0 0 2px var(--shadow);
 }
 
 .notfound-social {
@@ -143,9 +143,9 @@
 }
 
 .notfound-social>a:hover {
-    background-color: orange;
-    -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
-    box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
+    background-color: var(--shadow);
+    -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px var(--shadow);
+    box-shadow: 0 0 0 0 #000,0 0 0 2px var(--shadow);
 }
 
 @media only screen and (max-width: 480px) {

webapp/src/pages/WrongRoute/WrongRoute.js

@@ -19,7 +19,7 @@ const WrongRoute = () => {
         <p>
           La página que estabas buscando no está disponible
         </p>
-        <Link to="/login">Página principal</Link>
+        <Link to="/home">Página principal</Link>
       </div>
     </div>
   );