:root {
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  color: light-dark(#444, #bbb);

  background-color: light-dark(#ffffff, #000);

  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2em;

  margin: 0 auto;

  scroll-behavior: smooth;
}

body {
  padding: max(20px, 5vw) max(20px, 5vw) 60vh;
  position: relative;
}

ul,
ol {
  padding-inline-start: 20px;
  list-style-position: inside;
}

li {
  line-height: 2em;
}

img {
  width: 100%;
  border-radius: 8px;
}

:is(h1, h2, h3, h4, h5, h6) {
  color: light-dark(#000, #eee);
  line-height: 2em;

  &:not(:first-child) {
    margin-top: 1em;
  }
}

p {
  line-height: 2em;
}

table {
  text-align: left;

  @media screen and (width<=800px) {
    display: block;
    margin-top: 20px;

    thead {
      display: none;
    }

    tbody {
      display: flex;
      flex-direction: column;
      gap: 20px;

      tr {
        display: flex;
        flex-direction: column;
        gap: 10px;

        padding: 15px 20px;

        background-color: light-dark(#f4f4f4, #222);
        border-radius: 8px;

        td {
          &:nth-child(1) {
            font-weight: bold;
          }

          &:nth-child(3) {
            color: light-dark(#388f2b, #5dc54d);

            &:before {
              display: block;
              content: "REPLACED TYPE-UNSAFE PRACTICE:";
              font-size: 0.5em;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  @media screen and (800px<width) {
    width: 100%;
    border-collapse: collapse;
    margin-top: 50px;

    thead tr {
      border-bottom: 1px solid light-dark(#eee, #222);
    }

    tbody {
      display: table-row-group;

      tr:not(:last-child) {
        border-bottom: 1px solid light-dark(#eee, #222);
      }
    }

    tr {
      display: table-row;

      th,
      td {
        vertical-align: baseline;
        padding: 10px;
        width: 38%;

        &:first-child {
          padding-left: 0;
          width: 24%;
        }

        &:last-child {
          color: light-dark(#388f2b, #66be5a);
          padding-right: 0;
        }
      }
    }
  }
}

@media screen and (prefers-color-scheme: dark) {
  .only-light-mode {
    display: none;
  }
}

@media screen and (prefers-color-scheme: light) {
  .only-dark-mode {
    display: none;
  }
}