:root {
  /* A la Flexoki */
  --bg: rgb(16, 15, 15);
  --tx: rgb(206, 205, 195);
  --bl-l: rgb(67, 133, 190);
  --bl-d: rgb(32, 94, 166);
}

body {
  font-family: sans-serif;
  color: var(--tx);
  background-color: var(--bg);
  overflow-x: hidden;
}

h1 {
  font-size: 3.2rem;
  max-width: 60ch;
  line-height: 1.1;
}

p {
  font-size: 1.2rem;
  line-height: 1.4;
  max-width: 60ch;
}

main {
  padding: 2rem;
  min-height: 100vh;
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.center > div {
  margin: 2rem auto;
}

button {
  padding: 0.4rem 0.8rem;
  border: none;
  background-color: var(--tx);
  color: var(--bg);
  margin: 0.4rem;
  transition:
    box-shadow 0.1s linear,
    transform 0.1s linear;
  transform: translate(3px, 3px);
  &:hover {
    box-shadow: 3px 3px 0px var(--bl-l);
    transform: translate(0px, 0px);
    cursor: pointer;
  }
  &:active {
    box-shadow: 0px 0px 0px var(--bl-d);
    transform: translate(3px, 6px);
  }
}

input[type="text"] {
  padding: 0.2rem 0.4rem;
  background-color: var(--tx);
  color: var(--bg);
  margin: 0.2rem;
}

a {
  color: var(--bl-l);
  &:visited {
    color: var(--bl-d);
  }
}