*,
*:after,
*:before {
  box-sizing: border-box;
}

//body {
//  font-family: "Inter", sans-serif;
//  line-height: 1.5;
//  min-height: 100vh;
//  background-color: #f4f5f7;
//  padding-top: 10vh;
//  padding-bottom: 10vh;
//}


@media screen and (max-width: 900px){

  .dt-chat {

  display: none;
}}

strong {
  font-weight: 600;
}

article {
  width: 90%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.125rem;
  padding: 2rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 15px 20px -10px rgba(#000, 0.1);

  & > * + * {
    margin-top: 1em;
  }

  &:is(h1, h2, h3) + * {
    margin-top: 0.5em;
  }

  h1 {
    font-weight: 900;
    font-size: 2rem;
    line-height: 1.125;
  }

  code {
    background-color: #eee;
    font-weight: 600;
    font-family: monospace;
  }

  p {
  }

  ol {
    counter-reset: sickstuff;
    li {
      position: relative;
      padding-left: 32px;
      counter-increment: sickstuff;
      & + li {
        margin-top: 0.5em;
      }
      &:before {
        content: counter(sickstuff);
        width: 24px;
        height: 24px;
        position: absolute;
        left: 0;
        top: calc((1.125rem * 1.5) - 24px);
        font-size: 0.75em;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #e6d400;
        color: #5a4c40;
        font-weight: 600;
      }
    }
  }
}

details {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  margin-top: 2rem;
  color: #6b7280;
  display: flex;
  flex-direction: column;

  div {
    background-color: #1e1e27;
    box-shadow: 0 5px 10px rgba(#000, 0.15);
    padding: 1.25rem;
    border-radius: 8px;
    position: absolute;
    max-height: calc(100vh - 100px);
    width: 400px;
    max-width: calc(100vw - 2rem);
    bottom: calc(100% + 1rem);
    right: 0;
    overflow: auto;
    transform-origin: 100% 100%;
    color: #95a3b9;
    &::-webkit-scrollbar {
      width: 15px;
      background-color:#1e1e27;
    }

    &::-webkit-scrollbar-thumb {
      width: 5px;
      border-radius: 99em;
      background-color: #95a3b9;
      border: 5px solid #1e1e27;
    }
    & > * + * {
      margin-top: 0.75em;
    }

    p > code {
      font-size: 1rem;
      font-family: monospace;
    }

    pre {
      white-space: pre-line;
      // background-color: #2c2d38;
      border: 1px solid #95a3b9;
      border-radius: 6px;
      font-family: monospace;
      padding: 0.75em;
      font-size: 0.875rem;
      color: #5a4c40;
    }
  }

  &[open] div {
    animation: scale 0.55s ease;
  }
}

.modal-background {

  padding: 30px;
  background-color: #f2f2f2;
  color: #5a4c40;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

summary {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 600;
  padding: 0.75em 2em .75em 2em;
  border-radius: 99em;
  color: #5a4c40;
  background-color: #e6d400;
  box-shadow: 0 5px 15px rgba(#000, 0.1);
  list-style: none;
  text-align: center;
  cursor: pointer;
  transition: 0.15s ease;
  position: relative;
  &::-webkit-details-marker {
    display: none;
  }

  &:hover,
  &:focus {
    background-color: mix(#000, #185adb, 20%);
    // color: #6366f1;
  }

  svg {
    position: absolute;
    right: 1.25em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
  }
}

@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}