@import url("https://use.typekit.net/csa5hex.css");

@font-face {
    font-family: "Share Tech Mono";
    src: url("ShareTechMono.woff2") format("woff2"),
         url("ShareTechMono.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

:root {
  --background: #070809;
  --body: #4b6c2b;
  --box: #1e2025;
  --code: #97c56b;
  --hover: #b0ff64;
}

body {
  background-color: var(--background);
  color: var(--body);

  font-size: 1.5vw;
  font-family: "Share Tech Mono";
}

h1, h2 {
  margin: 0vw;
}

h1 {
  font-size: 6vw;
}

h2 {
  font-size: 4vw;
}

a {
  color: var(--code);

  margin: 2vw;
}

a:hover {
  color: var(--hover);
}

input {
  background: var(--box);
  border: 0.2vw solid var(--code);
  color: var(--code);

  font-size: 2vw;
  font-family: "Share Tech Mono";

  padding: 1vw;
}

button {
  border: none;
  background: none;

  margin-left: 2vw;
}

img {
  width: 3.5vw;
}

.flexcolumn {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.flexrow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.flexrow_wrap {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.dotLines, .one_dots {
  user-select: none;
}

.characters {
  width: 60vw;

  text-align: center;
  font-size: 5vw;
}

.qrs {
  width: 20vw;
  margin: 1vw;
}

.pigpens {
  width: 3vw;
  height: 3vw;

  padding: 1vw;
}

.binary_column {
  font-size: 1.2vw;
  margin-top: 2.2vw;
  margin-right: 1vw;
}

#box {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 4vw;

  background: var(--box);
  color: var(--code);
  border-top: 1vw solid var(--code);

  font-family: lores-12, sans-serif;
  font-weight: 400;
  font-style: normal;
  
  font-size: 3vw;

  width: 80vw;
  margin: 2vw;
}

#hint {
  color: var(--body);
  font-size: 1.5vw;

  position: fixed;
  z-index: -1;
}

#hintRequest {
  color: var(--code);
  font-size: 2vw;
  font-family: "Share Tech Mono";
  text-decoration: underline;
}

#hintRequest:hover {
  color: var(--hover);
}