body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  color: white;
  font-family: "Chakra Petch", sans-serif;
}

@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Chakra%20Petch.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jaro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Jaro.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Fira%20Code.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body:before {
  content: "";
  position: fixed;
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
  z-index: -1;
  background: #202020;
  background-image: radial-gradient(#262626 2px, transparent 0);
  background-size: 1.2rem 1.2rem;
  background-position: -0.6rem -0.6rem;
  transform: rotate(45deg);
}
div.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}
h1 {
  font-family: "Jaro", sans-serif;
  font-size: 6rem;
  font-weight: 400;
  margin: 0;
}
h1 .rotated {
  writing-mode: vertical-rl;
  color: #c4e9ef;
  font-size: 0.53ch;
}
p {
  margin: 0;
  color: #808080;
  margin-bottom: 3rem;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

form {
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 2rem 0.5rem #00000054;
}
.input-group {
  display: flex;
  justify-content: center;
  align-items: stretch;
  max-width: 80vw;
  width: 50rem;
}
.input-group > *:nth-child(1) {
  flex: 1 1 auto;
  width: 1%;
}
.input-group > *:nth-child(2) {
  display: flex;
}
form input {
  font-family: "Fira Code", sans-serif;
  font-size: 1.5rem;
  padding: 0.5rem;
  color: white;
  background-color: #202020;
  border: 1px solid #404040;
}
form button {
  background-color: #18182b;
  color: white;
  fill: #b5ddff;
  border: 1px solid #004f93;
  display: flex;
  justify-content: center;
  align-items: center;
}
form svg {
  width: 1.8rem;
  padding: 0 0.2rem;
}
form input:disabled,
form button:disabled {
  background-color: #404040;
  color: #808080;
  fill: #808080;
  border: 1px solid #606060;
  cursor: not-allowed;
}
form input:hover,
form button:disabled:hover {
  border: 1px solid #808080;
}
form button:hover {
  background-color: #20355b;
  border: 1px solid #b5ddff;
  cursor: pointer;
}
form input:focus,
form button:focus {
  outline: none;
  background-color: #202020 !important;
  border: 1px solid white !important;
}
input.valid-color:invalid {
  border: 1px solid #ff0000;
  background-color: #271e1e;
}
input.valid-color:valid {
  border: 1px solid #00ff00;
  background-color: #1f271f;
}