.container-base {
  display: flex;
  align-items: center;
  justify-content: center;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin: 0;
}
a {
  color: #0000ff;
  text-decoration: none;
}
a:hover {
  color: #000099;
  text-decoration: underline;
}
a:focus {
  color: #000033;
  text-decoration: underline;
}
.container-main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65rem;
}
@media (min-width: 480px) {
  .container-main {
    height: 55rem;
  }
}
@media (min-width: 768px) {
  .container-main {
    height: 45rem;
  }
}
.container-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30rem;
}
.container-signup {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35rem;
}
.container-userstats {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40rem;
}
.container-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}
.container-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
.container-content {
  background-color: rgba(51, 153, 153, 0.75);
  max-width: 75%;
}
@media (min-width: 480px) {
  .container-content {
    max-width: 62.5%;
  }
}
@media (min-width: 1024px) {
  .container-content {
    max-width: 50%;
  }
}
@media (min-width: 1280px) {
  .container-content {
    max-width: 35%;
  }
}
.page-title {
  padding: 2rem 4rem;
  background-color: rgba(25, 179, 179, 0.75);
}
.page-title h1 {
  margin: 0;
  text-align: center;
}
.page-content {
  margin: 1rem;
}
.form-item {
  margin: 1rem 0;
}
.form-item input {
  box-sizing: border-box;
}
.form-item input[type="text"],
.form-item input[type="password"] {
  background-color: rgba(25, 25, 77, 0.9);
  padding: 0.65rem;
  width: 100%;
}
.form-item input[type="submit"] {
  width: 100%;
}
.form-item label {
  font-weight: bold;
}
.form-item label input[type="checkbox"] {
  position: relative;
  vertical-align: middle;
  bottom: 1px;
}
.button {
  background-color: rgba(64, 64, 191, 0.9);
  padding: 1rem;
  border: 0.15rem rgba(38, 38, 115, 0.9) solid;
  border-radius: 0;
  transition: 0.3s;
}
.button:hover {
  background-color: rgba(38, 38, 115, 0.9);
}
.button:focus {
  background-color: rgba(25, 25, 77, 0.9);
}
.help-url {
  margin: 1rem 0;
}
.help-url a {
  color: black;
  font-size: 0.9rem;
  padding: 0 0.2rem;
  text-decoration: none;
}
.help-url a:hover {
  text-decoration: underline;
}
.main-url-container {
  display: inline-block;
  width: 100%;
}
.main-url {
  display: block;
  float: left;
  width: 50%;
}
.main-url a {
  color: #f2f2f2;
  box-sizing: border-box;
  display: inline-block;
  font-size: 1rem;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  width: 100%;
}
.disclaimer h4 {
  margin: 0;
}
.disclaimer p {
  font-size: 0.9rem;
  margin: 0;
  margin-bottom: 0.25rem;
}