body { background-color: #ECECEC; padding: 0; margin: 0; font-family: "Montserrat", sans-serif; } body * { font-weight: bold; } .futura-font { font-family: Futura; } h2 { font-size: 2em; color: #212121; } fieldset { border: 0; } #login-container { background-color: #FFFFFF; border: 1px solid #ccc; border-radius: 10px; text-align: center; width: 25em; margin: auto; margin-top: 3em; margin-bottom: 3em; } #login-container input { width: calc(100% - 2em); } #login-container input[type=submit] { width: calc(100% - 0.7em); height: 34px; background-color: #303F9F; color: #FFFFFF; border: 1px solid #303F9F; border-radius: 5px; transition: 0.3s; cursor: pointer; } #login-container input[type=submit]:hover { background-color: #212c6f; border-color: #212c6f; } #login-container button { width: calc(100% - 0.7em); height: 34px; background-color: #C5CAE9; color: #212121; border: 1px solid #C5CAE9; border-radius: 5px; transition: 0.3s; cursor: pointer; } #login-container button:hover { background-color: #898da3; border-color: #898da3; } #login-or-signup { width: 100%; text-align: center; margin-top: 0; color: #757575; } #login-or-signup * { display: inline-block; } #login-or-signup p { margin: 0.5em; margin-left: 1em; margin-right: 1em; } #login-or-signup hr { margin-bottom: 0.2em; padding: 0; width: 5em; color: #757575; } .or-a button { width: calc(100% - 2em) !important; margin: 5.6px 12px; margin-bottom: 1em; } @media screen and (max-width: 500px) { #login-container { width: calc(100% - 4em); margin-left: 1em; margin-right: 1em; } #login-or-signup hr { display: none; } }