@font-face {
  font-family: "Stray";
  src: url("fonts/Stray.woff2") format("woff2"),
    url("fonts/Stray.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("fonts/Orbitron-Regular.woff2") format("woff2"),
    url("fonts/Orbitron-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*Thanks Josh Comeau for the CSS reset https://www.joshwcomeau.com/css/custom-css-reset/ */
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

* {
  --clr-text: #ffffff;
  --clr-surface: #271527;
  --bg-frame: rgba(9, 6, 6, 0.681);
  --pad-xs: 0.75em;
  --pad-s: 1em;
  --pad-m: 1.25em;
  --pad-l: 1.5em;
  --pad-xl: 2em;
}

.container {
  display: grid;
  grid: calc(100vh - (var(--pad-xl, 1.25em) * 2)) / minmax(500px, 1fr) minmax(
      300px,
      500px
    );

  padding: var(--pad-xl, 1em);
  gap: var(--pad-m, 1.25em);
}

.lgrid,
.sidepanel {
  border: 5px solid var(--clr-text, white);
  background-color: var(--bg-frame, black);
  color: var(--clr-text, white);
  padding: 1em;

  box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 2rem #bc13fe,
    0 0 0.8rem #bc13fe, 0 0 2.8rem #bc13fe, inset 0 0 1.3rem #bc13fe;
}

.lgrid {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  min-height: 100%;
  user-select: none;
}

.lgrid > * {
  font-family: "Stray";
}

.sidepanel {
  overflow-y: scroll;
}

.sidepanel > * {
  font-family: "Orbitron";
}

.legend-grid {
  display: grid;
  grid: 50px 50px 50px / repeat(auto-fit, minmax(60px, 1fr));
  grid-auto-rows: 50px;
  margin-top: var(--pad-xs, 24px);
  border: white solid 1px;
  background-image: url(images/unknownbg.svg);
}

.legend-grid-child {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  align-self: stretch;
  background-color: var(--clr-surface, #271527);
}

.legend-grid-child-unknown {
  padding: 6px;
  height: 100%;
  width: 100%;
  box-shadow: 0px 0px 0px 10px var(--clr-surface, #271527) inset;
  margin-bottom: 20px;
}

.unknown {
  font-family: "Stray";
}

body {
  background-image: url("images/bg-img.jpg");
  height: 100%;
  background-position: center;
  background-size: cover;
  backdrop-filter: blur(4px);
}

.colored {
  background-color: var(--bg-frame, #000000);
}
.empty {
  border: 5px white solid;
}

.datewrapergrid {
  display: grid;

  grid-template-columns: 50px 50px 20px 50px 50px 20px 50px 50px 50px 50px;
  grid-template-rows: 50px 60px 50px;
  justify-items: center;
  margin: var(--pad-l);
}
.skip1 {
  grid-column: 3;
  grid-row: 2 / 4;
}

.skip2 {
  grid-column: 6;
  grid-row: 2 / 4;
}

.nums {
  text-shadow: 0 0 7px #fff, 0 0 21px #bc13fe, 0 0 42px #bc13fe,
    0 0 82px #bc13fe;
}

.nums-container {
  margin: 4px;
  background-color: var(--clr-surface, #271527);
  border-radius: 4px;
  justify-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lock-icon {
  all: unset;
  cursor: pointer;
  width: 23px;
  height: 32px;
  background-image: url(images/lock-icon.svg);
  margin-top: 4px;
}
.lock-icon:focus {
  outline: revert;
}

.roll {
  all: unset;
  font-family: "Stray";
  color: #d4b9d4;
  border: #d4b9d4, solid;
  padding: var(--pad-xs) var(--pad-xl);
}
.roll:hover {
  cursor: pointer;
  color: #ffffff;
  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #bc13fe, 0 0 42px #bc13fe,
    0 0 82px #bc13fe, 0 0 92px #bc13fe, 0 0 102px #bc13fe, 0 0 151px #bc13fe;
  box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 2rem #bc13fe,
    0 0 0.8rem #bc13fe, 0 0 2.8rem #bc13fe, inset 0 0 1.3rem #bc13fe;
}
.roll:active {
  background-color: #271527;
  text-shadow: 0 0 7px #fff, 0 0 21px #bc13fe, 0 0 42px #bc13fe,
    0 0 82px #bc13fe;
  box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 0.8rem #bc13fe,
    inset 0 0 1.3rem #bc13fe;
}

.roll:focus {
  outline: revert;
}

.btn-wrap {
  display: flex;
  gap: var(--pad-l);
}

.notes {
  margin-top: var(--pad-l, 24px);
  margin-bottom: var(--pad-xs, 24px);
}

textarea {
  width: 100%;
  min-height: 150px;
  max-height: 5000px;
  resize: vertical;

  background-color: #271527;
  color: #fff;
}