:root {
  --grey33: #555555;
  --grey50: #808080;
  --grey66: #a8a8a8;
  --grey83: #d4d4d4;
  --grey92: #eaeaea;
  --magenta33: #770077;
  --magenta50: #b500b5;
  --magenta66: #f300f3;
  --magenta83: #ffa2ff;
  --magenta92: #ffd7ff;

  --rose33: #8e0047;
  --rose50: #d6006b;
  --rose66: #ff51a8;
  --rose83: #ffb5da;
  --rose92: #ffdeee;

  --rose33-sat33: #723a56;
  --rose50-sat33: #ab5982;
  --rose66-sat33: #c892ad;
  --rose83-sat33: #e4c9d7;
  --rose92-sat33: #f2e6ec;

  --red17: #550000;
  --red33: #a00000;
  --red50: #ee0000;
  --red66: #ff7878;
  --red83: #ffc0c0;
  --red92: #ffe2e2;

  --red17-sat33: #3f2020;
  --red33-sat33: #7a3e3e;
  --red50-sat33: #b16464;
  --red66-sat33: #cb9898;
  --red83-sat33: #e5cccc;
  --red92-sat33: #f3e7e7;

  --orange33: #834100;
  --orange50: #c66200;
  --orange66: #ff850b;
  --orange83: #ffca94;

  --orange33-sat33: #694f35;
  --orange50-sat33: #9f7850;
  --orange66-sat33: #c1a385;
  --orange83-sat33: #e0d1c2;
  --orange92-sat33: #f1ebe4;

  --yellow33: #5b5b00;
  --yellow50: #898900;
  --yellow66: #b7b700;
  --yellow83: #e2e200;
  --yellow92: #fbfb00;

  --yellow33-sat33: #59592d;
  --yellow50-sat33: #868644;
  --yellow66-sat33: #b0b062;
  --yellow83-sat33: #d8d8b2;
  --yellow92-sat33: #ededdb;

  --green33: #006d00;
  --green50: #00a300;
  --green66: #00d500;
  --green83: #66ff66;
  --green92: #c4ffc4;

  --viridian33: #006a35;
  --viridian50: #009e4f;
  --viridian66: #00cf68;
  --viridian83: #33ff99;
  --viridian92: #b7ffdb;

  --viridian33-sat33: #32624a;
  --viridian50-sat33: #49926e;
  --viridian66-sat33: #77bb99;
  --viridian83-sat33: #bbddcc;
  --viridian92-sat33: #e0f0e8;

  --cyan17: #003434;
  --cyan33: #006262;
  --cyan50: #009393;
  --cyan66: #00c4c4;
  --cyan83: #00f2f2;
  --cyan92: #9dffff;

  --cyan17-sat50: #113232;
  --cyan33-sat50: #206060;
  --cyan50-sat50: #309191;
  --cyan66-sat50: #40bfbf;
  --cyan83-sat50: #a7e2e2;
  --cyan92-sat50: #d5f1f1;

  --cyan17-sat33: #183131;
  --cyan33-sat33: #305f5f;
  --cyan50-sat33: #488e8e;
  --cyan66-sat33: #71b7b7;
  --cyan83-sat33: #b8dbdb;
  --cyan92-sat33: #ddeeee;

  --cyan17-sat20: #1f2e2e;
  --cyan33-sat20: #3d5c5c;
  --cyan50-sat20: #5c8a8a;
  --cyan66-sat20: #8bb1b1;
  --cyan83-sat20: #c5d8d8;
  --cyan92-sat20: #e3eded;

  --blue33: #0000c0;
  --blue50: #4343ff;
  --blue66: #8c8cff;
  --blue83: #c8c8ff;
  --blue92: #e6e6ff;

  --violet33: #5100a3;
  --violet50: #7c00f8;
  --violet66: #b66eff;
  --violet83: #ddbcff;
  --violet92: #f0e0ff;

  --violet33-sat33: #593c77;
  --violet50-sat33: #8760af;
  --violet66-sat33: #b096ca;
  --violet83-sat33: #d9cce5;
  --violet92-sat33: #ede7f3;

  --text-cyan17: #00343480;
  --text-cyan33: #00626280;
  --text-cyan50: #00939380;
  --text-cyan66: #00c4c480;
  --text-cyan83: #00f2f280;

  --text-cyan17-sat50: #11323280;
  --text-cyan33-sat50: #20606080;
  --text-cyan50-sat50: #30919180;
  --text-cyan66-sat50: #40bfbf80;
  --text-cyan83-sat50: #a7e2e280;
  --text-cyan92-sat50: #d5f1f180;

  --text-cyan17-sat33: #18313180;
  --text-cyan33-sat33: #305f5f80;
  --text-cyan50-sat33: #488e8e80;
  --text-cyan66-sat33: #71b7b780;
  --text-cyan83-sat33: #b8dbdb80;
  --text-cyan92-sat33: #ddeeee80;

  --text-cyan17-sat20: #1f2e2e80;
  --text-cyan33-sat20: #3d5c5c80;
  --text-cyan50-sat20: #5c8a8a80;
  --text-cyan66-sat20: #8bb1b180;
  --text-cyan83-sat20: #c5d8d880;
  --text-cyan92-sat20: #e3eded80;

  --text-rose33: #8e004780;
  --text-rose50: #d6006b80;
  --text-rose66: #ff51a880;
  --text-rose83: #ffb5da80;
  --text-rose92: #ffdeee80;

  --text-rose33-sat33: #723a5680;
  --text-rose50-sat33: #ab598280;
  --text-rose66-sat33: #c892ad80;
  --text-rose83-sat33: #e4c9d780;
  --text-rose92-sat33: #f2e6ec80;

  --text-red17: #55000080;
  --text-red33: #a0000080;
  --text-red50: #ee000080;
  --text-red66: #ff787880;
  --text-red83: #ffc0c080;
  --text-red92: #ffe2e280;

  --text-red17-sat33: #3f202080;
  --text-red33-sat33: #7a3e3e80;
  --text-red50-sat33: #b1646480;
  --text-red66-sat33: #cb989880;
  --text-red83-sat33: #e5cccc80;
  --text-red92-sat33: #f3e7e780;

  --text-orange33: #83410080;
  --text-orange50: #c6620080;
  --text-orange66: #ff850b80;
  --text-orange83: #ffca9480;

  --text-orange33-sat33: #694f3580;
  --text-orange50-sat33: #9f785080;
  --text-orange66-sat33: #c1a38580;
  --text-orange83-sat33: #e0d1c280;
  --text-orange92-sat33: #f1ebe480;

  --text-yellow33: #5b5b0080;
  --text-yellow50: #89890080;
  --text-yellow66: #b7b70080;
  --text-yellow83: #e2e20080;
  --text-yellow92: #fbfb0080;

  --text-yellow33-sat33: #59592d80;
  --text-yellow50-sat33: #86864480;
  --text-yellow66-sat33: #b0b06280;
  --text-yellow83-sat33: #d8d8b280;
  --text-yellow92-sat33: #ededdb80;

  --text-green33: #006d0080;
  --text-green50: #00a30080;
  --text-green66: #00d50080;
  --text-green83: #66ff6680;
  --text-viridian33: #006a3580;
  --text-viridian50: #009e4f80;
  --text-viridian66: #00cf6880;
  --text-viridian83: #33ff9980;
  --text-viridian92: #b7ffdb80;
  --text-viridian33-sat33: #32624a80;
  --text-viridian50-sat33: #49926e80;
  --text-viridian66-sat33: #77bb9980;
  --text-viridian83-sat33: #bbddcc80;
  --text-viridian92-sat33: #e0f0e880;

  --text-blue33: #0000c080;
  --text-blue50: #4343ff80;
  --text-blue66: #8c8cff80;
  --text-blue83: #c8c8ff80;

  --text-violet33: #5100a380;
  --text-violet50: #7c00f880;
  --text-violet66: #b66eff80;
  --text-violet83: #ddbcff80;
  --text-violet92: #f0e0ff80;

  --text-grey33: rgba(85, 85, 85, 0.5);
  --text-grey50: rgba(127, 127, 127, 0.5);
  --text-grey66: rgba(168, 168, 168, 0.5);
  --text-grey83: rgba(212, 212, 212, 0.5);

  --bg-dim: var(--cyan33-sat20);
  --bg-color: var(--cyan50-sat20);
  --bg-hover: var(--cyan66-sat20);
  --bg-active: var(--cyan83-sat20);
  --border-color: var(--orange66-sat33);
  --border-hover: var(--orange83-sat33);
  --border-active: var(--orange92-sat33);
  --border-decoration: var(--orange50-sat33);
  --text-color: var(--text-cyan33-sat20);
  --text-hover: var(--text-cyan50-sat20);
  --text-active: var(--text-cyan66-sat20);
  --shadow-color: var(--cyan66-sat20);
  --shadow-hover: var(--cyan83-sat20);
  --shadow-active: var(--cyan92-sat20);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  height: 50%;
  width: 50%;
  background-color: var(--bg-color);
  border-style: outset;
  border-width: 5px;
  border-color: var(--border-color);;
  text-align: center;
  color: lime;
  transition-property: all;
  transition-duration: 0.2s;
}
*:hover {
  /*background-color: var(--bg-hover);*/
  /*border-color: var(--border-hover);*/
  /*border-radius: 13px;*/
  color: blue;
  transition-property: all;
  transition-duration: 0.2s;
}
*:active {
  /*
  background-color: var(--bg-active);
  border-color: var(--border-active);
  */
  color: red;
}

/* the html document root */
html {
  height: 100%; /* note that this will never be taller than 100% of the view */
  width: 100%;  /* note that this will never be wider than 100% of the view */
  background-color: black;
  border-style: none;
}
html:hover {
  background-color: #800080;
}
html:active {
  background-color: #808000;
}
  body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: absolute;
    width: auto;
    height: auto;
    min-height: 100%;
    min-width: 100%;
    border-style: inset;
    border-top: none;
    border-bottom: none;
    padding-left: 13px;
    padding-right: 13px;
    /*background-color: var(--bg-color);*/
    /* sky azure fade
    background-image: linear-gradient(to bottom, #347fff, #347fff, #ffe1c2);
    */
    background-image: linear-gradient(to bottom, #323295, #c65353, #ffffb7);
  }
  body:hover {
    border-radius: 0px;
    background-color: var(--bg-hover);
  }
  body:active {
    border-radius: 0px;
    background-color: var(--bg-active);
  }
    .hdivider {
      display: flex;
      width: 100%;
      flex: none;
      border-radius: 8px;
    }
    #foot-hdiv {
      width: 99%;
    }
    #last-hdiv {
      width: 98%;
    }
      .hnone {
        width: 100%;
        height: 10px;
        border-style: none;
      }
      .hdots {
        width: 100%;
        height: 0;
        border-top: dotted;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-width: 13px;
        border-color: var(--border-decoration);
      }
      .hdashes {
        width: 100%;
        height: 0;
        border-top: dashed;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-width: 13px;
        border-color: var(--border-decoration);
      }
      .hlines {
        width: 100%;
        height: 0;
        border-top: double;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-width: 13px;
        border-color: var(--border-decoration);
      }
    header {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: flex-start;
      width: 99%;
      border-style: inset outset inset outset;
      flex: 1;
    }
    header:hover > * {
      border-color: var(--border-hover);
    }
    header:active > * {
      border-color: var(--border-active);
    }
    header h1 {
      height: auto;
      width: auto;
      margin-left: 13px;
      top: 0px;
      background-color: transparent;
      border-style: none;
      font-family: sans-serif;
      color: var(--text-color);
      text-shadow: 1px 1px 0px var(--shadow-color);
    }
    header:hover h1 {
      color: var(--text-hover);
      text-shadow: 1px 1px 0px var(--shadow-hover);
    }
    header:active h1 {
      color: var(--text-active);
      text-shadow: 1px 1px 0px var(--shadow-active);
    }
    header h1:hover {
      color: var(--text-rose33);
      text-shadow: 1px 1px 0px var(--shadow-hover);
    }
    header h1:active {
      color: var(--text-rose50);
      text-shadow: 1px 1px 0px var(--shadow-active);
    }
      .lion-row {
        width: 98%;
        height: 36px;
        margin: 13px;
        flex: none;
        border-style: none;
        background-color: transparent;
        background-image: url("https://i.ibb.co/BrLHCcN/lion-shadow64-20.png");
        background-repeat: repeat-x;
      }
      .palm-row {
        width: 98%;
        height: 80px;
        flex: none;
        margin: 13px;
        border-style: none;
        background-color: transparent;
        background-image: url("https://i.ibb.co/3r1J2X2/palm-shadow80-20.png");
        background-repeat: repeat-x;
      }
    #wrapper {
      display: flex;
      width: 98%;
      min-height: 256px;
      height: auto;
      padding: 0 13px 0 13px;
      border-style: inset outset inset outset;
      flex-basis: content;
      overflow: hidden;
    }
    /* NOTE: this will override if the > selector is not used, so we explicitly
     * give each level up to 3 levels deep
     */
    /*
    #wrapper:hover > * {
      border-color: var(--border-hover);
      color: var(--text-hover);
      text-shadow: 1px 1px 0px var(--shadow-hover);
    }
    #wrapper:active > * {
      border-color: var(--border-active);
      color: var(--text-active);
      text-shadow: 1px 1px 0px var(--shadow-active);
    }
    #wrapper:hover > * > * {
      border-color: var(--border-hover);
      color: var(--text-hover);
      text-shadow: 1px 1px 0px var(--shadow-hover);
    }
    #wrapper:active > * > * {
      border-color: var(--border-active);
      color: var(--text-active);
      text-shadow: 1px 1px 0px var(--shadow-active);
    }
    #wrapper:hover > * > * > * {
      border-color: var(--border-hover);
      color: var(--text-hover);
      text-shadow: 1px 1px 0px var(--shadow-hover);
    }
    #wrapper:active > * > * > * {
      border-color: var(--border-active);
      color: var(--text-active);
      text-shadow: 1px 1px 0px var(--shadow-active);
    }
    #wrapper:hover #shelf {
      background-color: var(--viridian33);
    }
    #wrapper:active #shelf {
      background-color: var(--viridian50);
    }
    */
      .vdivider {
        display: flex;
        height: auto;
        width: auto;
        flex: none;
        background-color: var(--border-color);
        border-style: inset inset inset inset;
        border-top: none;
      }
        .vnone {
          height: 100%;
          width: 26px;
          background-color: transparent;
          background-image: url("https://i.ibb.co/NTPMvQZ/vtile-shadow26-20.png");
          background-repeat: repeat-y;
          border-style: none;
        }
        .vdots {
          height: 100%;
          width: 0;
          border-top: none;
          border-left: dotted;
          border-right: none;
          border-bottom: none;
          border-width: 13px;
          border-color: var(--border-decoration);
        }
        .vdashes {
          height: 100%;
          width: 0;
          border-top: none;
          border-left: dashed;
          border-right: none;
          border-bottom: none;
          border-width: 13px;
          border-color: var(--border-decoration);
        }
        .vlines {
          height: 100%;
          width: 0;
          border-top: none;
          border-left: double;
          border-right: none;
          border-bottom: none;
          border-width: 13px;
          border-color: var(--border-decoration);
        }
      nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        margin: 13px 8px 13px 8px;
        padding: 8px;
        flex: 1;
        background-color: transparent;
        border-style: outset;
        border-radius: 8px;
      }
      /*
      nav:hover * {
        background-color: var(--bg-hover);
        border-color: var(--border-hover);
      }
      */
      nav > h2 {
        width: 100%;
        height: auto;
        font-family: sans-serif;
        padding: 5px;
        background-color: transparent;
        border-style: none none groove none;
        border-width: 5px;
        border-color: var(--border-color);;
        color: var(--text-color);
        text-shadow: 1px 1px 0px var(--shadow-color);
      }
      nav > h2:hover {
        border-radius: 0px;
      }
      nav > h2:active {
        border-radius: 0px;
      }
      #games {
        border-style: none;
        background-color: transparent;
        color: var(--text-color);
        text-shadow: 1px 1px 0px var(--shadow-color);
      }
      #games:hover {
        color: var(--text-rose33);
        /*text-shadow: 1px 1px 0px var(--shadow-hover);*/
      }
      #games:active {
        color: var(--text-rose50);
        /*text-shadow: 1px 1px 0px var(--shadow-active);*/
      }
      nav > ul {
        width: auto;
        height: auto;
        padding: 13px;
        margin: 13px;
        /*background-color: var(--bg-hover);*/
        /*border-color: var(--border-hover);*/
        border-style: inset;
        border-width: 4px;
        border-radius: 48px;
        list-style-position: inside;
      }
      nav > ul:hover {
        background-color: var(--bg-hover);
        border-color: var(--border-hover);
      }
        nav > ul > li {
          text-align: left;
          width: 100%;
          height: auto;
          padding-left: 13px;
          background-color: transparent;
          border-style: none;
          font-family: sans-serif;
          white-space: nowrap;
          color: var(--text-color);
          text-shadow: 1px 1px 0px var(--shadow-color);
        }
        nav > ul:hover > li {
          color: var(--text-hover);
          text-shadow: 1px 1px 0px var(--shadow-hover);
        }
        nav > ul > li:active {
          color: var(--text-active);
          text-shadow: 1px 1px 0px var(--shadow-active);
        }
        nav > ul > li > a {
          position: relative;
          background-color: transparent;
          border-style: none;
          text-decoration: none;
          white-space: nowrap;
          color: var(--text-color);
          text-shadow: 1px 1px 0px var(--shadow-color);
        }
        nav > ul:hover > li > a {
          color: var(--text-hover);
          text-shadow: 1px 1px 0px var(--shadow-hover);
        }
        nav > ul > li > a:hover {
          color: var(--text-blue83);
          text-shadow: 1px 1px 2px var(--yellow83);
        }
        nav > ul > li > a:active {
          color: var(--text-green50);
          text-shadow: 1px 1px 4px var(--yellow92);
        }
        nav > ul > li > a > img {
          position: absolute;
          visibility: hidden;
          width: 0px;
          height: 0px;
        }
        nav > ul > li > a:hover > img {
          visibility: visible;
          width: 320px;
          height: 177px;
          top: -89px;
          margin-left: 44px;
          border-radius: 13px;
          border-color: var(--border-hover);
          box-shadow: 4px 4px 4px 4px #80000080;
        }
      main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex: 3;
        height: 100%;
        padding-left: 13px;
        padding-right: 13px;
        border-style: none;
        background-color: transparent;
      }
      /*
      main:hover * {
        background-color: var(--bg-hover);
        border-color: var(--border-hover);
      }
      */
        #arch {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          min-width: 256px;
          min-height: 200px;
          margin-left: 13px;
          margin-right: 13px;
          margin-top: 13px;
          border-radius: 50% 50% 0% 0% / 100% 100% 0% 0%;
          border-style: inset;
          border-width: 48px 48px 13px 48px;
          /*  sky azure fade
          background-image: linear-gradient(to bottom, #347fff, #347fff, #ffe1c2);
          */
          /*background-image: linear-gradient(to bottom, #323295, #c65353, #ffffb7);*/
          background-image: linear-gradient(to bottom, #c65353, #d98c74, #ecc696);
          overflow: hidden;
        }
        /*
        #arch:hover {
          border-radius: 50% 50% 0% 0% / 50% 50% 0% 0%;
        }
        #arch:active {
          border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
        }
        */
          #outside {
            width: 10vw;
            height: 10vw;
            min-width: 120px;
            min-height: 120px;
            border-style: none;
            /*background-color: #ff4000;*/
            background-color: #ff5d27;
            border-radius: 50%;
            transition-property: none;
            transform: translate(0, 8vh);
            mix-blend-mode: overlay;
          }
          /*
          #outside:hover {
            mix-blend-mode: color;
          }
          */
          #outside:active {
            transition-property: all;
            mix-blend-mode: exclusion;
          }
        .circle {
          border-radius: 50%;
          width: 50px;
          height: 50px;
          flex: none;
          border-style: inset;
          border-width: 4px;
          margin: 1px;
          /*background-color: #707070;*/
          background-image: radial-gradient(circle at 25% 25%,
            var(--cyan66-sat20) 0%, var(--cyan50-sat20) 33%, var(--cyan33-sat20) 66%, black 100%);
        }
        .circle:hover {
          border-width: 0px;
          background-image: radial-gradient(circle at 25% 25%,
            var(--cyan83-sat20) 0%, var(--cyan66-sat20) 33%, var(--cyan50-sat20) 66%, black 100%);
        }
        .circle:active {
          border-width: 8px;
        }
        /*
        #wrapper:hover .circle {
          background-image: radial-gradient(circle at 25% 25%,
            var(--cyan83-sat33) 0%, var(--cyan66-sat33) 33%, var(--cyan50-sat33) 66%, black 100%);
          transition-property: all;
          transition-duration: 0.2s;
        }
        */
        #wrapper #circle1:active {
          background-image: radial-gradient(circle at 25% 25%,
            var(--cyan92) 0%, var(--cyan83) 33%, var(--cyan66) 66%, black 100%);
        }
        #wrapper #circle2:active {
          background-image: radial-gradient(circle at 25% 25%,
            var(--yellow92) 0%, var(--yellow83) 33%, var(--yellow66) 66%, black 100%);
        }
        #wrapper #circle3:active {
          background-image: radial-gradient(circle at 25% 25%,
            var(--magenta92) 0%, var(--magenta83) 33%, var(--magenta66) 66%, black 100%);
        }
      aside {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        margin: 0px 13px 0px 13px;
        padding: 5px;
        background-color: transparent;
        border-style: outset inset outset inset;
        border-radius: 5px;
        flex: 1;
      }
      /*
      aside:hover * {
        background-color: var(--bg-hover);
        border-color: var(--border-hover);
      }
      */
      #shelf {
        height: 120px;
        width: 120px;
        margin: 21;
        border-style: inset;
        border-width: 13px;
        background-color: var(--bg-dim);
        flex: none;
      }
      #shelf:hover {
        transform: rotate(45deg);
        background-color: var(--viridian33);
        border-radius: 0px;
      }
      #shelf:active {
        background-color: var(--viridian50);
        border-radius: 50%;
      }
    footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 96%;
      border-style: inset outset inset outset;
      flex: auto;
    }
      footer a {
        color: var(--text-color);
        text-shadow: 1px 1px 0px var(--shadow-color);
        font-family: sans-serif;
        border-style: none;
        height: auto;
        width: auto;
        margin-bottom: 5px;
        background-color: transparent;
        text-decoration: none;
      }
      /*
      footer:hover a {
        color: var(--text-hover);
        text-shadow: 1px 1px 0px var(--shadow-hover);
      }
      footer:active a {
        color: var(--text-active);
        text-shadow: 1px 1px 0px var(--shadow-active);
      }
      footer:hover a i {
        color: var(--text-hover);
        text-shadow: 1px 1px 0px var(--shadow-hover);
      }
      footer:active a i {
        color: var(--text-active);
        text-shadow: 1px 1px 0px var(--shadow-active);
      }
      */
      footer a:hover {
        color: var(--text-violet33);
        /*text-shadow: 1px 1px 0px var(--shadow-hover);*/
      }
      footer a:active {
        color: var(--text-red33);
        /*text-shadow: 1px 1px 0px var(--shadow-active);*/
      }
      footer a i:hover {
        color: var(--text-blue33);
        /*text-shadow: 1px 1px 0px var(--shadow-hover);*/
      }
      footer a i:active {
        color: var(--text-red33);
        /*text-shadow: 1px 1px 0px var(--shadow-active);*/
      }
      #contacts {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        border-style: none;
        background-color: transparent;
      }
        #icons {
          border-style: none;
          background-color: transparent;
          height: auto;
        }
      i {
        color: var(--text-color);
        font-size: 20px;
        text-shadow: 1px 1px 0px var(--text-shadow);
        text-decoration: none;
        background-color: transparent;
        border-style: none;
      }
        i.cib-twitter:hover {
          color: #1da1f2cc;
        }
        i.cib-itch-io:hover {
          color: #fa5c5ccc;
        }
        i.cib-jekyll:hover {
          color: #d70000cc;
        }
        i.cib-discord:hover {
          color: #7289dacc;
        }