* { padding: 0; margin: 0; } p, h1, h2, h3 { color: black; margin: 0; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } label{ display: block; } body { height: 100vh; display: flex; justify-content: center; align-items: center; } @media (max-width: 768px) { body { padding-left: 20px; padding-right: 20px; justify-content: center; } } @media (max-width: 480px) { #log { width: 100% !important; max-width: 320px; } } #topo { width: 100%; height: 50px; background-color: #111; position: fixed; top: 0; left: 0; background: linear-gradient(to right, #C0392B 47%, #7A4951 73%, #114455 87%); display: flex; align-items: center; justify-content: flex-start; } #textotop { padding-left: 20px; font-size: 38px; margin: 0; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } #log { width: 350px; display: flex; flex-direction: column; gap: 15px; color: white; margin-top: 70px; /* Compensa a barra fixa do topo */ } #campo { display: flex; flex-direction: column; gap: 15px; align-self: center; } #menslog{ font-size: 20px; } #emailid, #senhaid { height: 50px; width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } label { display: block; margin-bottom: 5px; font-weight: bold; color: white; } form { display: flex; flex-direction: column; gap: 15px; width: 100%; } #logbtn { align-self: center; width: 50%; padding: 12px; font-size: 18px; font-weight: bold; background-color: #C0392B; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } #logbtn:hover { background-color: #A03224; } .mens { align-self: center; } #linkcada{ color: #111; text-decoration: none; }