@font-face {
  font-family: "Open Dyslexic";
  src: url("fonts/opendyslexic/compiled/OpenDyslexic-Regular.otf");
}

@font-face {
  font-family: "Open Dyslexic Mono";
  src: url("fonts/openDyslexicMono/OpenDyslexicMono-Regular.otf");
}

:root {
  --hue: 260;
  --dark-gray: hsl(var(--hue) 10% 10%);
  --darkest: hsl(var(--hue) 15% 10%);
  --darker: hsl(var(--hue) 20% 15%);
  --dark: hsl(var(--hue) 25% 20%);
  --medium: hsl(var(--hue) 25% 30%);
  --light: hsl(var(--hue) 25% 40%);
  --lighter: hsl(var(--hue) 50% 45%);
  --lightest: hsl(var(--hue) 30% 70%);
  --light-gray: hsl(var(--hue) 10% 90%);
}

* {
  box-sizing: border-box;
  font-family: "Open Dyslexic";
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--darkest);
  color: var(--light-gray);
  padding: 10px;
  margin: 0;
  height: 100vh;
}

h1,
h2,
h3,
h4,
h5 {
  text-align: center;
  margin: 2px;
}

h4 {
  font-size: 1.75rem;
}

h5 {
  font-size: 1.5rem;
}

h6 {
  font-size: 1.25rem;
}

main {
  display: grid;
  grid-template-columns: auto auto;
  height: 100%;

  h2 {
    grid-column-end: span 2;
  }

  nav {
    background-color: var(--darker);
    padding: 15px;
    border-radius: 20px;
    overflow: auto;

    a {
      display: block;
      color: var(--light-gray);
      margin-bottom: 10px;
      text-decoration: none;
    }

    a:visited {
      color: var(--lightest);
    }

    a:hover {
      background-color: var(--dark);
      text-decoration: underline;
    }

    li {
      display: block;
    }
  }

  .doc {
    overflow: auto;

    .item {
      margin-left: 20px;
      margin-bottom: 20px;
      background-color: var(--dark);
      border-radius: 20px;
      box-shadow: black 5px 5px;

      h3 {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--medium);
        font-size: 2rem;
        margin: 0;
        border-radius: 20px 20px 0 0;
      }

      .demo {
        position: sticky;
        height: 300px;
        top: 3.5rem;
        background-color: var(--dark);
        margin: 0 0 2.5% 0;
        padding: 2.5%;
        overflow: hidden;
        box-shadow: var(--dark-gray) 0 4px 4px;
        z-index: 2;

        pre {
          text-wrap: wrap;
        }

        code {
          max-width: 600px;

          * {
            font-family: "Open Dyslexic Mono", monospace;
          }
        }

        c2d-canvas {
          float: inline-start;
          margin-right: 15px;
        }

        button {
          background-color: var(--medium);
          color: var(--light-gray);
          border-color: var(--light-gray);
          border-radius: 5px;
        }
      }

      label {
        display: inline-block;
      }

      input {
        width: 100%;
      }

      table {
        display: table;
        box-shadow: var(--dark-gray) 5px 5px;
        border-collapse: collapse;
        margin: auto;
        border-radius: 0 0 20px 20px;
        width: 90%;

        caption {
          background-color: var(--medium);
          color: var(--light-gray);
          border-radius: 20px 20px 0 0;
          padding: 5px;
          box-shadow: var(--dark-gray) 5px 5px;
        }

        tbody {
          width: 100%;
        }

        td:last-child {
          width: 400px;
        }

        tr {
          width: 100%;
        }

        tr:first-child {
          position: sticky;
          top: 0;
          z-index: 1;
        }

        tr:last-child {
          border-radius: 20px 20px 0 0;

          td:first-child {
            border-radius: 0 0 0 20px;
          }

          td:last-child {
            border-radius: 0 0 20px 0;
          }
        }

        tr:nth-child(even) {
          th {
            background-color: var(--darker);
          }

          td {
            background-color: var(--darker);
          }
        }

        tr:nth-child(odd) {
          th {
            background-color: var(--darkest);
          }

          td {
            background-color: var(--dark);
          }
        }

        td,
        th {
          padding: 15px 5px 15px 5px;
        }

        td:first-child,
        th:first-child {
          padding-left: 20px;
        }

        td:last-child,
        th:last-child {
          padding-right: 20px;
        }
      }

      .method {
        h6,
        p {
          padding-left: 30px;
        }
      }
    }
  }
}