back_end e front_end, motoes de editar, tela de login e os caralho a4 '-'

rpg/css/style.css

@@ -12,9 +12,8 @@
     gap: 1vw;
 
     #hero {
-        width: 15%;
-        height: auto;
-        max-height: 30dvh;
+        width: 25dvh;
+        height: 25dvh;
         border: solid 3px var(--backredcolor);
         border-radius: 100dvh;
         object-fit: cover;
@@ -96,6 +95,12 @@
             border-radius: 1dvw;
 
             label {
+                a {
+                    display: flex;
+                    align-content: center;
+                    align-items: center;
+                }
+
                 padding-left: 1dvh;
                 display: flex;
                 align-items: center;
@@ -177,6 +182,7 @@
     #log {
         flex-grow: 1;
         overflow-y: auto;
+
         li {
             cursor: pointer;
             font-size: 1.5em;
@@ -212,6 +218,7 @@
             position: relative;
             cursor: pointer;
             cursor: pointer;
+
             a {
                 position: absolute;
                 right: 1dvh;
@@ -233,6 +240,7 @@
                 background-color: var(--backdarkredcolor);
             }
         }
+
         li:hover {
             background-color: var(--lines);
         }
@@ -330,6 +338,42 @@
     }
 }
 
+#box_2 {
+    h1 {
+        min-height: 4dvh;
+        width: 100%;
+        background: var(--btncolor);
+        font-family: "Share Tech Mono", monospace;
+        display: flex;
+        padding: 0 0 0 1vw;
+        align-items: center;
+    }
+    #text_lore {
+        ul {
+            position: relative;
+            #btn {
+                position: absolute;
+                top: 1dvh;
+                right: 1dvh;
+                width: 4dvh;
+                height: 4dvh;
+                background-color: var(--btncolor);
+                border-radius: 100vh;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+            }
+            p {
+                font-family: arial;
+                font-size: 1.5em;
+                padding: 1vw;
+                white-space: pre-wrap;
+            }
+        }
+    }
+}
+
 /* Responsividade */
 @media only screen and (max-width: 1080px) {
     #playerDATA {
@@ -338,8 +382,8 @@
         height: auto;
 
         #hero {
-            width: 40vw;
-            height: 40vw;
+            width: 40dvw;
+            height: 40dvw;
         }
 
         ul li {
@@ -349,15 +393,18 @@
 
     #box_1 {
         flex-direction: column;
+
         #dados,
         #status,
         #inv,
         #powers {
             width: 100%;
             min-height: 43vh;
+
             hgroup input[type="text"] {
                 width: 20dvw;
             }
+
             hgroup input[type="number"] {
                 width: 8dvw;
             }
@@ -366,13 +413,6 @@
         #status li {
             border-top-right-radius: 2dvh;
             border-bottom-right-radius: 2dvh;
-            label {
-                a {
-                    display: flex;
-                    align-content: center;
-                    align-items: center;
-                }
-            }
         }
 
         #dados #list {