*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  font-family: jbm; /* Main font */
  font-weight: 600;
  color: var(--c-4);
}

button {
  background-color: transparent;
  border: none;
  outline: none;
  width: unset;
  height: unset;
  display: unset;
}

b,
strong {
  font-weight: bolder;
}

img {
  border-style: none;
}

template {
  display: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

html {
  background-color: var(--c-0);
}

@font-face {
  font-family: jbm;
  src: url("../fonts/JetBrainsMono.ttf");
}

/* html:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
      to bottom,
      rgba(18, 16, 16, 0) 50%,
      rgba(0, 0, 0, 0.1) 50%
  );
  background-size: 100% 4px;
  z-index: 2;
  pointer-events: none;
} */

html::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  opacity: 0.5;
}

.scanline {
  width: 100%;
  height: 100px;
  z-index: 8;
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(255, 255, 255, 0.15) 20%,
      rgba(255, 255, 255, 0.1) 100%
  );
  opacity: 0.1;
  position: absolute;
  bottom: 100%;
  animation: scanline 8s linear infinite;
}

@keyframes scanline {
  0% {
      bottom: 100%;
  }
  50% {
      bottom: 100%;
  }
  100% {
      bottom: 0%;
  }
}

/* -------------------------------------------------------------------------- */

body > div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
}

#logo {
  color: var(--c-4);
  margin: 16px;
}

.stripes {
  background: repeating-linear-gradient(
    45deg,
    var(--c-0),
    var(--c-0) 10px,
    var(--c-1) 10px,
    var(--c-1) 20px
  );
}

#titletext {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 16px;
  letter-spacing: 8px;
}

body > div > input {
  background-color: var(--c-0);
  border: 4px solid var(--c-1);
  color: var(--c-4);
  padding: 16px;

}

body > div > input:focus {
  background-color: var(--c-0);
  border: 4px solid var(--c-4);
  color: var(--c-4);
  padding: 16px;
  outline: none;
}

.button-0 {
  padding: 16px;
  cursor: pointer;
  position: relative;
  color: var(--c-0);
  background-color: var(--c-4);
}

.button-0:hover, .button-0:focus {
  background-color: var(--c-0);
  color: var(--c-4);
}

.button-0:hover::before, .button-0:focus::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 4px solid var(--c-4);
}

#warning {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(34, 0, 0, 0.829);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: red;
  font-size: 42px;
}

.stripes-warning {
  width: 80%;
  height: 32px;
  margin: 16px 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    red 10px,
    red 20px
  );
}