:root {
  --text: #f1d4cf;
  --link-background: #00000030;
  --link-background-hover: #c1b0ab0d;

  --accent: #ce7961;
  --accent-active: #e3beb3;

  --background: #181a1b;
}
::selection {
  background-color: var(--accent-active);
  color: var(--background);
}

@font-face {
  font-family: "lato";
  src: url(asset-font-Lato-400.woff2);
}
@font-face {
  font-family: "lato-bold";
  src: url(asset-font-Lato-900.woff2);
}
@font-face {
  font-family: "barcode";
  src: url(asset-font-LibreBarcode.woff2);
}
@font-face {
  font-family: "code";
  src: url(asset-font-SourceCodePro.woff2);
}

* {
  box-sizing: border-box;
}

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

h1,
h2 {
  text-align: center;
}
h1 {
  color: var(--text);
  text-transform: uppercase;
  font-size: 65px;
  font-weight: normal;
  margin: 50px 0 0 0;
  opacity: 0.8;

  font-family: "barcode";
}
h2,
input {
  font-family: "code";
}
h2 {
  color: var(--text);
  font-size: 12px;
  margin: 0;
  opacity: 0.4;
}
form {
  margin: 80px auto;
  width: 80%;
}
input {
  width: 100%;
  text-align: center;
  color: var(--text);

  padding: 0.3rem;
  opacity: 0.5;

  background-color: unset;
  border-style: hidden;
  border-bottom-style: solid;
  border-bottom-color: var(--accent);
  outline: none;
}
input:focus {
  border-bottom-color: var(--accent-active);
  opacity: 1;
}

ul {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  max-width: clamp(200px, 700px, 95%);
  margin: 10px auto;

  list-style: none;
  padding: 0;

  font-family: "lato";
}
li {
  color: var(--text);
  font-size: 15px;
  width: calc(100% / 4);
  text-align: center;
}
li:first-child,
li:last-child {
  font-family: "lato-bold";
  width: calc(100% / 12);
}

a {
  color: var(--accent);
  text-decoration: none;
  padding: 0 30px;
  background-color: var(--accent);

  text-transform: lowercase;

  transition-duration: 100ms;
}
a:hover,
a:focus {
  text-decoration: line-through;
  background-color: var(--link-background-hover);
  animation: shake 2s linear alternate infinite;
}

@keyframes shake {
  0% {
    text-shadow: #7eddcda5 1px 1px 1px, #d6d6d6a5 1px -1px;
    color: #d6d6d645;
  }
  13% {
    text-shadow: #7eddcda5 1px -1px 1px, #d6d6d6a5 -1px 1px;
    color: #d6d6d6a5;
  }
  15% {
    text-shadow: #7eddcda5 -1px 1px 1px, #d6d6d6a5 1px -1px;
    color: #d6d6d675;
  }
  38% {
    text-shadow: #7eddcda5 1px -1px 1px, #d6d6d6a5 -1px 1px;
    color: #d6d6d6f5;
  }
  50% {
    text-shadow: #7eddcda5 -1px -1px 1px, #d6d6d6a5 -1px 1px;
    color: #d6d6d685;
  }
  63% {
    text-shadow: #7eddcda5 1px 1px 1px, #d6d6d6a5 1px -1px;
    color: #d6d6d6a5;
  }
  75% {
    text-shadow: #7eddcda5 -1px -1px 1px, #d6d6d6a5 1px 0px;
    color: #d6d6d6e5;
  }
  88% {
    text-shadow: #7eddcda5 1px 1px 1px, #d6d6d6a5 -1px 1px;
    color: #d6d6d665;
  }
  100% {
    text-shadow: #7eddcda5 -1px 1px 1px, #d6d6d6a5 0px 1px;
    color: #d6d6d6d5;
  }
}