/* public/css/login.css */ :root { /* make the backend contents as wide as the browser window */ --body-max-width: 100%; /* change the background color of the */ --body-bg: #f5f5f5; /* make the base font size smaller */ --font-size-base: 13px; /* remove all border radius to make corners straight */ --border-radius: 0px; } body { background-color: #004b87; display: flex; justify-content: center; align-items: center; flex: 1; height: 94vh; } #login { display: flex; justify-content: center; background-color: #fff; border-radius: 0; padding: 0; border: 0; } #login .header { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; padding: 2rem; } #login .header img { display: flex; max-width: 200px; margin-top: -2rem; } #login form { justify-content: space-around; display: flex; width: 100%; min-width: 320px; flex-direction: column; max-width: 100%; box-sizing: border-box; padding: 0; } #login h1 { margin: 0 0 1rem 0; font-size: 1.2rem; color: #777; } #login input, #login button { line-height: 2rem; font-size: 1rem; margin: 1rem auto; color: #555; border-radius: 10px; border: 0; outline: none; width: 100%; } #login input { max-width: 680px; border-radius: 0; border: 1px solid #ccc; padding: 0.4rem 0.8rem; } #login button { color: #fff; cursor: pointer; margin: 2.5rem 0 0; border-radius: 0; border: 0; background-color: #f1263f; font-weight: 500; font-size: 115%; padding: 1rem; } footer p { display: flex; justify-content: center; color: #bbb; font-size: 0.75rem; }