body{
  background-color: #444;
}

.login-wrap{
  width: 100%;
  height: calc(100vh - 50px);
  position: relative;
  top: 50px;
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  align-content: center;
  background-color: #0d0a22;
}

.login-frm{
  width: 50%;
  background-color: #5158BB;
  box-sizing: border-box;
  padding: .5em 1.5em;
  height: 300px;
  border-bottom: 6px solid #eee;
}

.login-frm > h2{
  color: #eee;
  font-size: 20pt;
  font-family: "Lexend", "Noto Sans", sans-serif;
  margin-bottom: .75em;
}

#login-error{
  position: fixed;
  top: calc(50vh - 200px);
  left: 25%;
  color: #222;
  background-color: #faa;
  width: 50%;
  padding: .5em 1.5em;
  box-sizing: border-box;
  font-family: "Overpass", "Noto Sans", sans-serif;
  font-weight: bold;
  border-bottom: 6px solid #f55;
}

#register-form{
  height: 400px;
}

.frm-itm-wrapper{
  width: 100%;
  margin-bottom: .5em;
  height: 32px;
  font-family: "Overpass", "Noto Sans", sans-serif;
  color: #eee;
}

.frm-itm-wrapper > input[type="text"], input[type="email"]{
  width: calc(100% - 36px);
  height: 32px;
  display: inline-block;
  float: left;
  padding: 0;
  background-color: #222;
  color: #eee;
  border: none;
  border-bottom: 1px solid #eee;
  outline: none;
  font-size: 12pt;
  transition: all .5s;
  box-sizing: border-box;
  padding-left: .25em;
  font-family: "Overpass", "Noto Sans", sans-serif;
}

.frm-itm-wrapper > input[type="text"]::placeholder, input[type="email"]::placeholder{
  color: #bbe;

}

.frm-itm-wrapper > input[type="password"]::placeholder{
  color: #bbe;

}

.frm-itm-wrapper > input[type="password"]{
  width: calc(100% - 36px);
  height: 32px;
  display: inline-block;
  float: left;
  padding: 0;
  background-color: #222;
  color: #eee;
  outline: none;
  border: none;
  border-bottom: 1px solid #eee;
  font-size: 12pt;
  transition: all .5s;
  box-sizing: border-box;
  padding-left: .25em;
  font-family: "Overpass", "Noto Sans", sans-serif;
}

.frm-itm-wrapper > input[type="password"]:focus{
  border-bottom: 4px solid #eee;
  background-color: #222;

}

.frm-itm-wrapper > input[type="text"]:focus, input[type="text"]:focus{
  border-bottom: 4px solid #eee;
  background-color: #222;

}

.login-frm > input[type="button"]{
  all: unset;
  border-bottom: 2px solid #eee;
  background-color: #222;
  color: #eee;
  padding: .25em;
  position: relative;
  float: right;
  right: 4px;
  cursor: pointer;
  font-family: "Overpass", "Noto Sans", sans-serif;
}

.login-frm > input[type="button"]:hover{
  background-color: #eee;
  color: #222;
}

.login-frm > input[type="submit"]{
  all: unset;
  border-bottom: 2px solid #eee;
  background-color: #222;
  color: #eee;
  padding: .25em;
  position: relative;
  float: right;
  right: 4px;
  cursor: pointer;
  font-family: "Overpass", "Noto Sans", sans-serif;
}

.login-frm > input[type="submit"]:hover{
  background-color: #eee;
  color: #222;
}

.frm-itm-wrapper > i {
  display: inline-block;
  font-size: 24px;
  padding-top: 4px;
  padding-left: 4px;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  background-color: #222;
  float: left;
  user-select: none;
  color: #eee;
  border-bottom: 1px solid #eee;
}

.sw-frm-text{
  font-family: "Overpass", "Noto Sans", sans-serif;
  position: relative;
  left: 0px;
  color: #eee;
}

.sw-frm-text > a{
  color: #aff;
}

.r-botcode{
  color: #eee;
  font-family: "Lexend", sans-serif;
  user-select: none;
}

.r-invisible{
  display: none;
}

#warn-box{
  width: 300px;
  height: 100px;
  background-color: #522;
  border-bottom: 6px solid #fcc;
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 100;
  padding: .5em 1.5em;
}

#warn-box > p{
  color: #eee;
  font-family: "Lexend", "Noto Sans", sans-serif;
  font-size: 12pt;
  text-align: center;
}

#cl-label{
  color: #eee;
  font-family: "Overpass", "Noto Sans", sans-serif;
  font-size: 12pt;
}

#cookie-login{
  position: relative;
  all: unset;
  width: 10pt;
  height: 10pt;
  margin: 0 .25em;
  padding: 0;
  background-color: #5158BB;
  border: 2px solid #eee;
  transition: all .5s;
  font-size: 8pt;
  color: #222;
}

#cookie-login::after{
  position: relative;
  text-align: center;
  font-family: "NerdFont";
  font-weight: bold;
  content: "\f012c";
  font-size: 10pt;
  left: 2px;
  top: 0px;
  color: transparent;
}

#cookie-login:checked::after{
  position: relative;
  text-align: center;
  font-family: "NerdFont";
  font-weight: bold;
  content: "\f012c";
  font-size: 10pt;
  left: 2px;
  top: 0px;
  color: #222;
}

#cookie-login:checked{
  background-color: #eee;
  border: 2px solid #eee;
}

@media only screen and (max-width: 800px) {
  .login-frm{
    width: 90%;
  }

  .login-frm > .frm-itm-wrapper {
    margin-bottom: .125em;
  }

  .login-frm > .frm-itm-wrapper > i {
    font-size: 11pt;
    height: 28px;
  }

  .login-frm > .frm-itm-wrapper > input[type="text"], .login-frm > .frm-itm-wrapper > input[type="email"]{
    font-size: 10pt;
    height: 28px;
  }

  .login-frm > .frm-itm-wrapper > input[type="password"]{
    font-size: 10pt;
    height: 28px;
  }
}