@media all {
    /** css reset **/
    *:where(:not(iframe, canvas, img, svg, video, table, th, td, ul, li, ol, h1, h2, h3):not(svg *)) {    
      all: unset;    
      display: revert;
    }
    /* Preferred box-sizing value */
    *,
    *::before,
    *::after {    
        box-sizing: border-box;
    }
    /* For images to not be able to exceed their container */
    img {    
      max-width: 100%;
    }
  
    /** layout settings **/
    html {
      line-height: 1.15;
    }
    
    header {
      padding: 0.5rem 0 1.5rem;
    }

    body {
      max-width: 100vw;
      max-height: 100vh;
      display: flex;
      flex-direction: column;
    }
  
    body > * {
      width: 98vw;
      margin: 0 auto;
    }
  
    nav {
      padding-bottom: 0.5rem;
    }
    
    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content: flex-end;
    }
  
    nav ul li {
      padding: 0 0.5rem;
    }
  
    main {
      flex: 1 0 0;
      line-height: 1.5;
      font-size: 1.2rem;
    }
  
    article {
      margin: 0.5rem 0;
      padding: 0.5rem;
    }
  
    main h1 {
      margin-bottom: 1rem;
    }
  
    article aside {
      margin: 0.5rem 0;
      font-size: 0.95rem;
    }
  
    .hidden {
      display: none;
      visibility: hidden;
    }
  
    footer {
      margin-top: 2.5rem;
    }
    
    article {
      margin: 0.5rem 0;
      padding: 1rem 0;
    }
  
    a {
      text-decoration: none;
    }
  
    a.external {
      text-decoration: underline;
      color: blue;
    }
  
    footer {
      display: flex;
      padding: 0 0 2rem;
    }
  
    footer .copyright {
      flex: 3;
    }

    .tldr {
      padding: 1rem 0;
    }
  
    #content > h1, #content > h2, #content > h3 {
      font-weight: bold;
    }
  
    #content > p {
      padding-top: 1rem;
    }
    .padding-top {
      padding-top: 2rem;
    }
    .underline {
      text-decoration: underline;
    }
    table, th, td {
      border: 1px solid;
    }
    table {
      border-collapse: collapse;
      
    }
    .highlight-orange {
      background-color: orange;
    }
    .highlight-yellow {
      background-color: yellow;
    }
    .highlight-green {
      background-color: green;
    }
    .highlight-red {
      background-color: red;
    }
  }
  
  @media screen {
    body {
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
    a {
      cursor: pointer;
    }
    .relative-nav {
      display: flex
    }
    .relative-nav > *{
      margin:0 10px;
    }
  }
  
  @media screen and (max-width: 960px) {
    footer {
      display: block;
    }
    footer .designed-to-last {
      padding-top: 0.5rem;
    }
  }