* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: rgb(41, 41, 41);
}
::-webkit-scrollbar-thumb {
  background: #7f5af0;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#body.devices {
  background-color: #16161a;
  color: #94a1b2;
  font-size: 1.4em;

  // #sidenavbar {
  //   z-index: 1;
  //   margin-left: -8px;
  //   overflow: visible;
  //   background-color: #121629;
  //   position: fixed;
  //   bottom: 0;
  //   width: 100%;
  //   height: 50px;
  //   text-align: left;
  //   display: flex;
  //   justify-content: space-between;

  //   button {
  //     all: unset;
  //     margin: 5px auto;
  //     color: #eff0f3;
  //     padding-left: 10px;
  //     padding-right: 10px;
  //     text-decoration: none;
  //     font-size: 1.4em;
  //     border: none;

  //     &:hover {
  //       background: #eff0f3;
  //       color: #2a2a2a;
  //       cursor: pointer;
  //     }
  //   }
  // }

  .main {
    height: 100%;
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 2em;
  }

  h3 {
    font-size: 1.6em;
    margin-left: 140px;
  }

  p {
    text-align: justify;
    font-size: 0.875em;
  }

  header {
    text-align: center;
  }

  footer,
  aside,
  article {
    text-align: center;
  }

  img {
    width: 100%;
    max-width: max-content;
    padding: 16px;
    height: auto;

    display: block;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, auto);

    .span-2 {
      grid-column: span 2;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;

    td,
    th {
      border: 1px solid;
      padding: 0.25rem;
    }

    tbody td {
      text-align: left;
    }
  }

  @media only screen and (max-width: 767px) {
    // [class*="col-"] {
    //   width: 100%;
    // }
  }
}