@font-face {
  font-family: "Sofia Pro Bold";
  src: url("https://cdn.krifix.pl/fonts/sofia_pro_bold.otf");
}
  
@font-face {
  font-family: "Sofia Pro Semi Bold";
  src: url("https://cdn.krifix.pl/fonts/sofia_pro_semi_bold.otf");
}
  
@font-face {
  font-family: "Sofia Pro Light";
  src: url("https://cdn.krifix.pl/fonts/sofia_pro_light.otf");
}

@font-face {
  font-family: "Proxima Nova Thin";
  src: url("https://cdn.krifix.pl/fonts/proxima_nova_thin.otf");
}

::selection {
  background: #7e8186;
}

body {
  padding: 0;
  margin: 0;

  background-color: #17161d;
  overflow: hidden;
}

.decorations {
  position: absolute;
  bottom: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  user-select: none;
}

.decorations img {
  position: absolute;

  background-repeat: no-repeat;
  transform-origin: bottom left;
  transform: scale(0.66);

  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;

  bottom: -30px;
  left: 0;

  width: 3440px;
}

.container {
  position: absolute;
  top: 0;

  width: 100%;
  height: 100%;
}

.login_container {
  position: absolute;
  z-index: 99;

  top: 40%;
  left: 50%;

  transform: translate(-50%, -50%);
}

.login_container h1 {
  font-family: "Sofia Pro Bold";
  color: #4d8cf4;

  margin: 0;
  padding: 0;
}

.login_container h2 {
    font-family: "Proxima Nova Thin";
    font-size: 17px;
    letter-spacing: -0.25px;
    color: #74777c;

    margin: 0;
    padding: 0;
}

.login_container .input {
  margin-top: 25px;
}

.login_container .header {
  margin-bottom: 25px;
}

.login_container .input h3 {
  font-family: "Proxima Nova Thin";
  font-size: 16px;
  letter-spacing: -0.25px;
  color: #74777c;

  margin: 0;
  padding: 0;

  margin-bottom: 7.5px;
}

.login_container .input input {
  width: 375px;
  height: 35px;

  outline: none;
  border: none;

  border-radius: 3.5px;

  background-color: #1f2329;
  border: 0.2px solid #3a3e44;

  font-family: "Proxima Nova Thin";
  letter-spacing: 0.35px;
  color: #c4c6c8;
  box-sizing: border-box;
  padding-left: 10px;

  transition: 0.1s border,background-color ease-in-out;
}

.login_container .input input:disabled {
  filter: brightness(0.85);
}

.login_container .input input:focus {
    border: 0.2px solid #56595d;
}

.login_container input.hidden {
  display: none;
}

.login_container button:not(.hidden) {
  font-family: "Sofia Pro Semi Bold";
  font-size: 17px;
  color: white;
  text-transform: uppercase;

  background-color: #5a96f9;
  border: none;
  outline: none;

  width: 100%;
  height: 50px;

  border-radius: 3.5px;

  margin-top: 45px;

  box-shadow: 0px 15px 31px -17px rgba(0, 0, 0, 1);
  transition: 0.1s filter ease-in-out;

  cursor: pointer;
  user-select: none;
}

.login_container button:not(.hidden):hover {
  filter: brightness(1.2);
}

.notification {
  display: none;
  overflow: hidden;

  width: 100%;
  height: 0px;

  font-family: "Sofia Pro Light";
  font-size: 13px;
  color: rgb(225, 225, 226);
  letter-spacing: 0.2px;

  margin-top: 25px;
  padding-left: 15px;
  border-radius: 3.5px;

  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */

  background-color: #251413;
  border: 0.1px solid #912e27;

  transition: 0.4s height;
}

.notification span {
  position: relative;
  user-select: none;

  top: 15px;
}

.notransition {
  transition: none !important;
}