body { font-family: Arial, sans-serif; background-color: #1e1e1e; color: #f5f5f5; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; } div { background-color: #2b2b2b; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; width: 300px; text-align: center; } .full_form { background-color: #2b2b2b; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; width: 300px; text-align: center; } .button_form { margin-left: auto; align-self: center; } input[type="text"], input[type="password"] { background-color: #333; border: 1px solid #555; padding: 10px; border-radius: 5px; color: #fff; margin-bottom: 15px; } input:focus { outline: none; border-color: #4CAF50; } button { background-color: #4CAF50; border: none; padding: 10px; border-radius: 5px; color: white; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #359039; } h1 { color: #f5f5f5; margin-bottom: 20px; text-align: center; } a { color: #f5f5f5; text-decoration: none; display: inline-block; padding: 10px; } a:hover { text-decoration: underline; } label { padding: 10px; } ul { list-style-type: none; padding: 0; width: 100%; max-width: 60vw; } li { background-color: #2b2b2b; padding: 15px; margin-bottom: 10px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: background-color 0.3s ease; display: flex; } li:hover { background-color: #333; }