body { font-family: monospace; background-color: #f0f2f5; } .nav-wrapper { background-color: blue; padding: 15px; } .nav-wrapper a { color: #fff; text-decoration: none; margin-left: 15px; margin-right: 15px; font-size: 1rem; font-weight: bold; } .nav-wrapper a:hover { cursor: pointer; text-decoration: underline; } .login-wrapper { position: relative; left: 50vw; top: 5vh; width: 400px; border: 1px solid lightgrey; border-radius: 5px; background-color: #fff; box-shadow: 8px 8px 8px lightgrey; padding: 15px 10px; } .username { position: relative; display: flex; margin-left: auto; margin-right: auto; width: 90%; border: 1px solid lightgrey; border-radius: 5px; padding: 15px; font-size: 1.1rem; } .password { position: relative; display: flex; margin-left: auto; margin-right: auto; width: 90%; border: 1px solid lightgrey; border-radius: 5px; padding: 15px; font-size: 1.1rem; } .loggin-submit { position: relative; display: flex; margin-left: auto; margin-right: auto; width: 90%; border: 1px solid lightgrey; border-radius: 5px; padding: 15px; font-size: 1.1rem; background-color: blue; color: #fff; font-weight: bold; } .signup-button { position: relative; display: flex; margin-left: auto; margin-right: auto; justify-content: center; width: 90%; border: 1px solid lightgrey; border-radius: 5px; font-size: 1.1rem; background-color: #4af626; font-weight: bold; } .signup-link { text-decoration: none; color: #111; width: 100%; height: 100%; padding: 15px; } .signup-button:hover { cursor: pointer; top: -15px; box-shadow: 2px 2px 2px blue; } .signup-link:hover { cursor: pointer; } .loggin-submit:hover { cursor: pointer; top: -15px; box-shadow: 2px 2px 2px #4af626; } .title-wrapper { position: relative; display: flex; top: 22vh; left: 8vw; } .subtitle-wrapper { position: relative; display: flex; top: 22vh; left: 14vw; }