/* Added from bootstrap login */
html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  font-weight: 300;
  /* background-color: #f5f5f5; */
}

.logo {
  max-width: 85px;
  padding-bottom: 1.2rem;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.login-error {
  margin-top: 1rem;
  color: red;
}

.identity-logout {
  /* font-size: 1.2rem; */
}

/* from tutorial https://medium.com/swlh/how-to-create-your-first-login-page-with-html-css-and-javascript-602dd71144f1 */
#login-error-msg-holder {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
}

#login-error-msg {
  text-align: center;
  font-size: 1rem;
  color: red;
  opacity: 0;
}

#error-msg-second-line {
  display: block;
}

/* my site styles */
body {
  font-family: 'Open Sans', sans-serif;
  margin-top: -1.6rem;
  font-size: 1.2rem;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.login-controls {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  list-style-position: inside;
}

.hidden {
  display: none;
}

.hero {
  padding: 3rem .5rem;
}

.title {
  font-family: 'Lato', sans-serif;
  font-size: 2rem;
  text-align: center;
  padding-bottom: .3rem;
}

.larger-font {
  /* font-size: 1.3rem; */
  max-width: 725px;
  margin-left: auto;
  margin-right: auto;
}

.hero-bullets {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-bullets li {
  padding-bottom: .8rem;
}

.hero p {
  text-align: center;
}

.ml-center {
  text-align: center;
}

.ml-btn {
  background-color: #3197e1;
  font-size: 1.1rem;
  padding: .5rem 1rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.profile-pic {
  max-width: 130px;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.profile-pic img {
  max-width: 100%;
  border-radius: 50%;
}