@import url("reset.css");

:root {
  --background-color: 255, 255, 252;
  --color: 49, 49, 49;
  --code-background-color: 248, 248, 247;
  --code-border-color: 112, 112, 92;
  --table-background-color: 239, 249, 255;
  --table-color: 72, 75, 77;
  --error-color: 230, 0, 0;
  --error-background-color: 255, 242, 242;
  --border-radius: 0.25rem;
  --max-content-width: 80ch;
}

a {
  text-underline-offset: 2px;
}

html {
  background-color: rgb(var(--background-color));
  color: rgb(var(--color));
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

strong,
th {
  font-weight: 500;
}

body {
  font-family: "ABC ROM Mono", monospace;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  padding: 1rem 1rem;
  max-width: 100vw;
}

main {
  width: 100%;
  max-width: var(--max-content-width);

  & > * {
    margin-block-end: 1rem;
  }
}

.manuals-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
  gap: 1rem;
  list-style-type: none;
  padding-inline: 0;
  margin-block-start: 1.5rem;
}

.manuals-list li {
  padding: 0.25rem 0.5ch calc(0.25rem - 1px);
  background-color: rgb(var(--code-background-color));
  border: solid 1px rgb(var(--color));
  border-radius: var(--border-radius);
  height: fit-content;
  transform-origin: center bottom;
  transition:
    background-color 240ms cubic-bezier(0.15, 0.8, 0.45, 1),
    transform 240ms cubic-bezier(0.15, 0.8, 0.45, 1),
    color 240ms cubic-bezier(0.15, 0.8, 0.45, 1);

  &:hover {
    transition-duration: 120ms;
    transform: translateY(-0.25rem);
    color: rgb(var(--table-color));
    background-color: rgb(var(--table-background-color));
  }
  &:active {
    transition-duration: 120ms;
    transform: translateY(-0.25rem) scale(0.995);
  }
}

.manuals-list li a {
  position: relative;
  text-decoration: none;
  display: block;
  height: 100%;

  &::before {
    content: "";
    position: absolute;
    top: calc(-0.25rem - 1px);
    left: calc(-0.5ch - 1px);
    right: calc(-0.5ch - 1px);
    bottom: -0.25rem;
  }
}

.manuals-list li:hover a::before {
  bottom: -0.5rem;
}

.manuals-list li h2 {
  line-height: 1.125rem;
  text-transform: uppercase;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding-bottom: calc(0.25rem - 1px);
  margin-bottom: calc(0.25rem - 1px);

  &::after {
    content: "→";
    text-align: right;
    display: inline-block;
    font-feature-settings: "case" 1;
    width: 3ch;
    margin-left: 1ch;
    opacity: 0;
    transform: translateX(-1.5ch);

    transition:
      transform 120ms 120ms cubic-bezier(0.15, 0.8, 0.45, 1),
      opacity 120ms linear;
  }

  &::before {
    content: "";
    position: absolute;
    left: -0.5ch;
    right: -0.5ch;
    bottom: 0;
    border-bottom: solid 1px rgb(var(--color));
  }
}

.manuals-list li:hover h2::after {
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 120ms cubic-bezier(0.15, 0.8, 0.45, 1),
    opacity 80ms linear;
}

@media screen and (hover: none) {
  .manuals-list li {
    transform: none !important;
    color: rgb(var(--table-color));
    background-color: rgb(var(--table-background-color));

    & h2::after {
      transform: translateX(0);
      opacity: 1;
    }
  }
}