<style>

  :root {
    background-image: url("https://robotlongmaprincess.neocities.org/images/bgs/mlp_pink.png");
    background-size: 300px;
    margin: 0;
    /*text*/
    color: #e30d75;
    padding-top: 25px;
    height: 98%;
    font-family: "Strawberry Muffins Demo";
    font-size: 20px;
    background-repeat: repeat;
    padding: 1px;

    main {
    background-color: #ffabe7;
    flex: 1;
    padding: 20px;
  }

  #navbar {
      height: 50px;
      background-color: #3c56cb;
      /* navbar color */
      width: 100%;
   }
  }

  :root.dark {
    background-image: url("https://robotlongmaprincess.neocities.org/images/bgs/mlp_blue.png");
    background-size: 300px;
    margin: 0;
    /*text*/
    color: #b895ff;
    padding-top: 25px;
    height: 98%;
    font-family: "Strawberry Muffins Demo";
    font-size: 20px;
    background-repeat: repeat;
    padding: 1px;

    main {
    background-color: #13147a;
    flex: 1;
    padding: 20px;
  }

  #navbar {
      height: 50px;
      background-color: #4c0276;
      /* navbar color */
      width: 100%;
   }
    }

  #headerarea img {
    width: 100%;
    height: auto;
    border-radius: 1%;
    background-image: var(--header-image);
    background-size: 100%;
  }

  #container {
    max-width: 1000px;
    margin: 0 auto;
  }

  #flex {
    display: flex;
  }

   #navbar ul {
      display: flex;
      padding: 0;
      margin: 0;
      list-style-type: none;
      justify-content: space-evenly;
   }

   #navbar li {
      padding-top: 10px;
   }

   #navbar li a {
      color: #8feeff;
      /* navbar text color */
      font-weight: 800;
      text-decoration: none;
      /* this removes the underline */
   }

   #navbar li a:hover {
      color: #fbf9ff;
      text-decoration: none;
   }

   body {
    background: var(--background-image);
    color: var(--color);
    background-color: var(--background-color);
   }

</style>