body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; font-family: "Arial Rounded MT Bold", serif; } .main { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 10px; width: fit-content; /* Adjust the width to fit the content */ text-align: center; } p { padding: 0px; margin: 0px 2px 0px 0px; font-size: 14px; } * { font-family: 'JetBrains Mono', serif; } label { display: flex; align-items: center; /* Align label text with checkbox */ position: relative; cursor: pointer; margin-left: auto; margin-right: auto; padding: 5px; } /* Adjust the spacing specifically for the first label */ label:first-child { width: 80%; } input[type="text"] { margin-bottom: 10px; /* Adds margin below the text input */ width: 100%; /* Full width of its parent */ box-sizing: border-box; /* Include padding and border in the element's total width */ } /* Styling for links */ a { color: blue; text-decoration: none; } a:hover { text-decoration: underline; } /* General button styling */ button { padding: 10px 20px; font-size: 16px; color: white; background-color: #007bff; border: none; border-radius: 5px; cursor: pointer; outline: none; transition: background-color 0.3s ease; } button:hover { background-color: #0056b3; } button:active { box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24); transform: translateY(4px); /* Moving button 4px to y-axis */ } /* Class to center the button in the container */ .centered-button { display: block; margin: 20px auto; /* Adds 20px space above and centers horizontally */ width: fit-content; /* Auto width to fit the button's content */ }