body { background-image: url(../images/ataxx.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } #welcomingDiv{ text-align: center; margin-bottom: 30px; } #welcomingTitle{ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; text-shadow: #fff; color: white; } #topLeftParagraph { position: absolute; /* Set the position property to absolute */ top: 0; /* Position from the top edge of the containing element (in this case, the or ) */ left: 0; /* Position from the left edge of the containing element */ margin: 10px; /* Optional: Add some margin for better visibility */ font-size: 20px; color: white; } * {box-sizing: border-box} /* Full-width input fields */ input[type=text], input[type=password] { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #f1f1f1; } input[type=text]:focus, input[type=password]:focus { background-color: #ddd; outline: none; } hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } .signUpLoginLabels{ text-align: center; } /* Set a style for all buttons */ button { background-color: #045aaa; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 50%; opacity: 0.9; } button:hover { opacity:1; } /* Extra styles for the cancel button */ .cancelbtn { padding: 14px 20px; background-color: rgb(20, 17, 17); } /* Float cancel and signup buttons and add an equal width */ .cancelbtn, .signupbtn { float: left; width: 50%; } /* Add padding to container elements */ .container { padding: 16px; color: white; } /* Clear floats */ .clearfix::after { content: ""; clear: both; display: table; } /* Change styles for cancel button and signup button on extra small screens */ @media screen and (max-width: 300px) { .cancelbtn, .signupbtn { width: 100%; } } #signInQuestion{ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; text-shadow: #fff; color: white; font-size: 30px; } #logInQuestion { font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; text-shadow: 2px 2px 2px #fff; /* Add offset values (horizontal, vertical, blur) */ color: white; font-size: 30px; } a{ color: white; font-size: 30px; }