body {
  background: #3B3F4F !important;
}

mark {
  font-size: 12.5px;
  text-align: center;
  line-height: 16px;
  letter-spacing: 0.1px;
  padding: 13px 12px 15px;
  display: block;
  position: relative;
  z-index: 1;
  animation-duration: 0.5s;
  animation-name: mark-slide;
}

mark.information {
  background-color: #FFEA00;
  color: #000000;
}

mark.notice {
  background-color: #F37C00;
  color: #FFFFFF;
}

mark.success {
  background-color: #04BB00;
  color: #FFFFFF;
}

mark.failure {
  background-color: #E10000;
  color: #FFFFFF;
}

main {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 0.5s;
  animation-name: main-appear;
}

main .logo {
  text-align: center;
  margin-bottom: 34px;
  display: block;
}

main .logo .logo-inner {
  display: inline-block;
}

main .logo img,
main .logo .logo-label {
  vertical-align: middle;
  display: inline-block;
}

main .logo img {
  height: 30px;
  max-width: 200px;
}

main .logo .logo-label {
  color: rgba(255, 255, 255, 0.80);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 15.5px;
  text-transform: lowercase;
  line-height: 24px;
  letter-spacing: -0.15px;
  margin-top: -2px;
  margin-left: 11px;
  padding-left: 14px;
}

main .error {
  background-color: #E10000;
  color: #FFFFFF;
  font-size: 12px;
  text-align: center;
  line-height: 12px;
  letter-spacing: 0.1px;
  margin-top: -12px;
  margin-bottom: 20px;
  padding: 14px 10px;
  display: block;
  border-radius: 2px;
}

main form label input,
main form button {
  width: 100%;
  display: block;
}

main form label input {
  background: #FFFFFF;
  border: 0 none;
  font-size: 13.5px;
  letter-spacing: 0.1px;
  text-indent: 30px;
  outline: none;
  height: 51px;
  margin: 0 0 12px;
  padding: 0;
  box-shadow: 0 2px 3px 0 rgba(6, 15, 34, 0.12);
  border-radius: 2px;
  transition: box-shadow 0.2s linear;
}

main form label input:focus {
  box-shadow: 0 3px 8px 0 rgba(15, 31, 64, 0.15);
}

main form label input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.65);
}

main form label input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.65);
}

main form label input:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.65);
}

main form label input:-moz-placeholder {
  color: rgba(0, 0, 0, 0.65);
}

main form button {
  margin-top: 22px;
}

main form button.button {
  box-shadow: 0 2px 3px 0 rgba(6, 15, 34, 0.12);
}

main form button.button:hover {
  box-shadow: 0 3px 8px 0 rgba(6, 15, 34, 0.175);
}

main nav {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 42px;
}

main nav ul {
  list-style-type: none;
  padding-top: 10px;
}

main nav ul li:nth-of-type(1) {
  float: left;
}

main nav ul li:nth-of-type(2) {
  float: right;
}

main nav ul li a {
  font-size: 12.5px;
  letter-spacing: -0.18px;
}

main nav ul li a:hover {
  text-decoration: underline;
}

main nav ul li:nth-of-type(1) a {
  color: #FFFFFF;
}

main nav ul li:nth-of-type(2) a {
  color: rgba(255, 255, 255, 0.75);
}

@keyframes mark-slide {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes main-appear {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  main {
    max-width: calc(100% - 30px);
    margin-top: 60px;
    position: static;
    transform: none;
  }

  /* The card already scrolls at this width, so the footer must scroll with it instead of staying
     fixed over the bottom of the form. */
  body > footer.brand-footer {
    position: static;
    margin-top: 26px;
    padding-bottom: 26px;
  }
}

/* Short windows. The card is absolutely centred and the brand footer is fixed to the bottom, so under
   about 500px of viewport height the two overlapped and the privacy and terms links sat behind the form.
   Below this height the page scrolls normally and the footer follows the card. */
@media (max-height: 620px) {
  main {
    position: static;
    transform: none;
    margin: 34px auto 0;
  }

  body > footer.brand-footer {
    position: static;
    margin-top: 26px;
    padding-bottom: 26px;
  }
}