@layer default, override;



/* ------ Default stylings ------*/

/*   These are base stylings for all elements.                                */



@layer default {
  * {
    box-sizing: border-box;
    font-family: Inter;
    margin: 0;
    padding: 0;
    color: #ffffff;
  }
}



/* ------ General element-selected stylings ------*/

/*   These are base stylings that are used for certain elements.              */



@layer default {
  html {
    font-size: 1px;
  }

  body {
    background-color: #101010;
    width: 100%;
  }
  
  li {
    font-size: inherit;
  }

  ul, ol, li {
    list-style-type: inherit;
  }

  .avi-pic {
    border-radius: 50%;
    border: 1px solid black;
  }

  a, p {
    font-size: 17rem;
    margin-bottom: 16rem;
  }

  h1 {
    font-size: 24rem;
  }

  a, a:visited {
    color: #00e92b;
  }

  s {
    color: inherit;
  }
}

@media (width < 600px) {
  html {
    font-size: .5px;
  }
}



/* ------ General class-selected stylings ------ */

/*   These are stylings that elements should be flexible with and aren't      */
/*   be tied to a nested template.                                            */

/*   Use this for magic values or things that make sense to template.         */
/*   Don't put in random atomic stuff.                                        */



@layer override {
    .single-column-flex-basis {
        flex-basis: 1500rem;
    }

    .single-column-main-container {
        background-color: #202020;
        border: dashed 1px white;
        padding: 50rem;
    }

    .sublevel-list {
        padding-left: 30rem;
    }
}