:root{
  --color-primary: #dddddd;
  --lightyellow: #eeeec5;
  --reddish-black: #1a1616;

  --dark-colour: rgba(0, 0, 0, 0.4);
  --dark-colour-0_8: rgba(0, 0, 0, 0.8);
  
  --light-colour-0_2: rgba(255, 255, 255, 0.2);
  --light-colour: rgba(255, 255, 255, 0.4);
  --light-colour-0_8: rgba(255, 255, 255, 0.8);
  --grey-middle: rgba(121, 121, 121, 1);

  --transparent: rgba(0, 0, 0, 0);

  --navLogoPink: #f48fb1;
  --navLogoRed: #ef3550;

  --full-black: black;

  --navBorderRed: #f28b82;
  --navBorderYellow: #d2db21;
  --navBorderGreen: #59db40;
  --navBorderBlue: #4dd2db;

  --hoverRed:    hsl(0, 60%, 25%);
  --hoverOrange: hsl(30, 60%, 25%);
  --hoverYellow: hsl(60, 60%, 25%);
  --hoverGreen:  hsl(120, 40%, 20%);
  --hoverBlue:   hsl(210, 40%, 20%);
  --hoverIndigo: hsl(275, 40%, 20%);
  --hoverViolet: hsl(320, 40%, 25%);
  --hoverMagenta: hsl(350, 40%, 25%);
  --rainbow-bkgrd: linear-gradient(
      45deg,
      var(--hoverRed),    /* pastel red */
      var(--hoverOrange),  /* pastel orange */
      var(--hoverYellow),  /* pastel yellow */
      var(--hoverGreen), /* pastel green */
      var(--hoverBlue), /* pastel blue */
      var(--hoverIndigo), /* pastel indigo */
      var(--hoverViolet), /* pastel violet */
      var(--hoverMagenta),
      var(--hoverRed)
    );

  --lightHoverRed:    hsl(0, 47%, 60%);
  --lightHoverOrange: hsl(25, 47%, 60%);
  --lightHoverYellow: hsl(50, 47%, 60%);
  --lightHoverGreen:  hsl(101, 47%, 60%);
  --lightHoverBlue:   hsl(173, 47%, 60%);
  --lightHoverIndigo: hsl(238, 47%, 60%);
  --lightHoverViolet: hsl(288, 47%, 60%);
  --lightHoverMagenta: hsl(317, 47%, 60%);
  --light-rainbow-bkgrd: linear-gradient(
      45deg,
      var(--lightHoverRed),    /* pastel red */
      var(--lightHoverOrange),  /* pastel orange */
      var(--lightHoverYellow),  /* pastel yellow */
      var(--lightHoverGreen), /* pastel green */
      var(--lightHoverBlue), /* pastel blue */
      var(--lightHoverIndigo), /* pastel indigo */
      var(--lightHoverViolet), /* pastel violet */
      var(--lightHoverMagenta),
      var(--lightHoverRed)
    );

  --hoverSlantThat: #78c9ff;

  --space-background-dark: url("/img/file-list-gallery/backgrounds/sparklyspace.gif");
  /*#dfdfdf*/

  --mikuFrameBorder: url("/img/misc-imgs/lightning lace4.png");

  --gapEquation: calc(1/3*100% - (1 - 1/3)*10px);
  --gapEquation2: calc(1/2*60% - (1 - 1/2)*10px);

  --siteCreditsLinkColour: lightskyblue;

  --block: block;
  --invert-0: invert(0%);

  --fbColor1: #111111;
  --fbColor2: #222222;
  --fbColor3: #010101;

  --fb-background:
    linear-gradient(
      90deg,
      var(--fbColor3) 0%,
      var(--dark-colour) 20%,
      var(--dark-colour) 80%,
      var(--fbColor3) 100%
      ),
    linear-gradient(
      135deg,
      var(--fbColor1) 0px,
      var(--fbColor2) 100px,
      var(--fbColor2) 120px,
      var(--fbColor1) 120px,
      var(--fbColor1) 155px,
      var(--fbColor2) 155px,
      var(--fbColor2) 195px,
      var(--fbColor1) 195px,
      var(--fbColor1) 235px,
      var(--fbColor2) 235px,
      var(--fbColor2) 500px,
      var(--fbColor1) 500px,
      var(--fbColor1) 611px,
      var(--fbColor2) 611px,
      var(--fbColor2) 959px,
      var(--fbColor1) 959px
      );

  --palette-space-333: #333333;
  --palette-space-121: #121212;
  --palette-space-aaa: #aaaaaa;

  --background-space-2:
  linear-gradient(
    170deg, 
    var(--transparent) 311px,
    var(--palette-space-121) calc(311px + 5px),
    var(--palette-space-121) 959px,
    var(--transparent) calc(959px + 5px)
    ), 
  linear-gradient(
    90deg, 
    var(--transparent) 155px,
    var(--palette-space-333) 155px,
    var(--palette-space-aaa) 155px,
    var(--palette-space-aaa) 175px,
    var(--palette-space-333) 175px,
    var(--palette-space-333) 215px,
    var(--palette-space-aaa) 215px,
    var(--palette-space-aaa) 235px,
    var(--palette-space-333) 235px,
    var(--palette-space-333) 500px,
    var(--transparent) 500px
    ), 
  var(--space-background-dark);

  --background-space-2-darker:
  linear-gradient(
    170deg, 
    var(--transparent) 311px,
    var(--palette-space-121) calc(311px + 5px),
    var(--palette-space-121) 959px,
    var(--transparent) calc(959px + 5px)
    ), 
  linear-gradient(
    90deg, 
    var(--transparent) 155px,
    var(--palette-space-333) 155px,
    var(--reddish-black) 155px,
    var(--reddish-black) 175px,
    var(--palette-space-333) 175px,
    var(--palette-space-333) 215px,
    var(--reddish-black) 215px,
    var(--reddish-black) 235px,
    var(--palette-space-333) 235px,
    var(--palette-space-333) 500px,
    var(--transparent) 500px
    ), 
  var(--space-background-dark);

  --background-space-3:
  linear-gradient(
    170deg, 
    var(--transparent) 23%,
    var(--palette-space-121) calc(23% + 5px),
    var(--palette-space-121) 69%,
    var(--transparent) calc(69% + 5px)
    ), 
  linear-gradient(
    180deg, 
    var(--transparent) 20%,
    var(--palette-space-121) 20%,
    var(--palette-space-121) 80%,
    var(--transparent) 80%
    ),
  var(--space-background-dark);

  --rgb-borders-2:
        linear-gradient(111deg, 
        var(--thatColor) 0%,
        var(--thatColor) 50%,
        var(--lightColor) 50%,
        var(--lightColor) 55%,
        var(--thatColor) 55%,
        var(--thatColor) 57%,
        var(--lightColor) 57%,
        var(--lightColor) 62%,
        var(--thatColor) 62%,
        var(--thatColor) 100%
      ) 0 0
  ;

  --trophyBorderColour: #917171;

  --thatColor: #5a6263;
  --lightColor: var(--lightyellow);

  --thatColorA: transparent;
  --lightColorB: #121222;

  --thatColor2: #5a6263;
  --lightColor2: var(--lightyellow);

  --font-size-default: 2rem;

  --bpsr-active-text-colour: #7CFC00;
  --bpsr-heart-hover-colour: #fc89c2;
  --bpsr-heart-active-colour: #ff4da6;
  --bpsr-mute-hover-colour: #ff6262;
  --bpsr-mute-active-colour: #ff0000;
  --bpsr-gradient-text-teal-colour: #62cffe;
  --bpsr-gradient-text-purple-colour: #b56bff;

  --bpsr-category-active: #7d003c;
  --bpsr-category-active-hover: #4f0026;

}


:root.lightmode{
  --color-primary: #121212;
  --lightyellow: lightyellow;
  --reddish-black: #ffffff;
  --full-black: white;

  --dark-colour: rgba(255, 255, 255, 0.4);
  --dark-colour-0_8: rgba(255, 255, 255, 0.8);

  --light-colour-0_2: rgba(0, 0, 0, 0.1);
  --light-colour: rgba(0, 0, 0, 0.4);
  --light-colour-0_8: rgba(0, 0, 0, 0.8);
  --grey-middle: rgba(121, 121, 121, 1);

  --hoverRed:    hsl(0, 60%, 85%);
  --hoverOrange: hsl(30, 60%, 85%);
  --hoverYellow: hsl(60, 60%, 85%);
  --hoverGreen:  hsl(120, 40%, 80%);
  --hoverBlue:   hsl(210, 40%, 80%);
  --hoverIndigo: hsl(275, 40%, 80%);
  --hoverViolet: hsl(320, 40%, 85%);
  --hoverMagenta: hsl(350, 40%, 85%);

  --lightHoverRed:    hsl(0, 47%, 70%);
  --lightHoverOrange: hsl(25, 47%, 70%);
  --lightHoverYellow: hsl(50, 47%, 70%);
  --lightHoverGreen:  hsl(101, 47%, 70%);
  --lightHoverBlue:   hsl(173, 47%, 70%);
  --lightHoverIndigo: hsl(238, 47%, 70%);
  --lightHoverViolet: hsl(288, 47%, 70%);
  --lightHoverMagenta: hsl(317, 47%, 70%);

  --rgb-borders-2:
    linear-gradient(111deg, 
    var(--thatColor) 0%,
    var(--thatColor) 50%,
    var(--lightColor) 50%,
    var(--lightColor) 55%,
    var(--thatColor) 55%,
    var(--thatColor) 57%,
    var(--lightColor) 57%,
    var(--lightColor) 62%,
    var(--thatColor) 62%,
    var(--thatColor) 100%
  ) 0 0;
  
  --hoverSlantThat: #b2e0ff;

  --fbColor1: #efefef;
  --fbColor2: #ffffff;
  --fbColor3: #cecece;

  --trophyBorderColour: #daaaaa;

  --block: block;
  --invert-0: invert(100%);

  --thatColor: #667274;
  --lightColor: #dfdfdf;

  --thatColorA: transparent;
  --lightColorB: #b7b7ce;

  --siteCreditsLinkColour: #299be2;

  --palette-space-333: #dddddd;
  --palette-space-121: #eeeeee;
  --palette-space-aaa: #bfbfbf;

  --space-background-dark: url(/img/file-list-gallery/backgrounds/daysky-bg.gif);

  --mikuFrameBorder: url("/img/misc-imgs/lightning lace4-invert.png");

  --navBorderRed: #f8b4b4;
  --navBorderYellow: #fce7a2;
  --navBorderGreen: #b4f8c8;
  --navBorderBlue: #a2d2ff;

  --navLogoPink: #811e2c;
  --navLogoRed: #49dbe6;

  --bpsr-active-text-colour: #55b000;
  --bpsr-heart-hover-colour: #fc89c2;
  --bpsr-heart-active-colour: #ff4da6;
  --bpsr-mute-hover-colour: #ff6262;
  --bpsr-mute-active-colour: #ff0000;
  --bpsr-gradient-text-teal-colour: #62cffe;
  --bpsr-gradient-text-purple-colour: #b56bff;

}


:root.darkmode_clean{
  --color-primary: #dddddd;
  --lightyellow: rgba(170, 170, 170, 1);
  --reddish-black: #222222;

  --dark-colour: rgba(0, 0, 0, 0.4);
  --dark-colour-0_8: rgba(0, 0, 0, 0.8);

  --light-colour-0_2: rgba(255, 255, 255, 0.2);
  --light-colour: rgba(255, 255, 255, 0.4);
  --light-colour-0_8: rgba(255, 255, 255, 0.8);
  --grey-middle: rgba(121, 121, 121, 1);

  --transparent: rgba(0, 0, 0, 0);

  --navLogoPink: rgba(170, 170, 170, 0.7);
  --navLogoRed: rgba(170, 170, 170, 0.7);

  --full-black: black;

  --navBorderRed: #9c5a54;
  --navBorderYellow: #7f8238;
  --navBorderGreen: #356f2d;
  --navBorderBlue: #2c6467;

  --hoverRed:    hsl(0, 60%, 25%);
  --hoverOrange: hsl(30, 60%, 25%);
  --hoverYellow: hsl(60, 60%, 25%);
  --hoverGreen:  hsl(120, 40%, 20%);
  --hoverBlue:   hsl(210, 40%, 20%);
  --hoverIndigo: hsl(275, 40%, 20%);
  --hoverViolet: hsl(320, 40%, 25%);
  --hoverMagenta: hsl(350, 40%, 25%);

  --lightHoverRed:    hsl(0, 47%, 60%);
  --lightHoverOrange: hsl(25, 47%, 60%);
  --lightHoverYellow: hsl(50, 47%, 60%);
  --lightHoverGreen:  hsl(101, 47%, 60%);
  --lightHoverBlue:   hsl(173, 47%, 60%);
  --lightHoverIndigo: hsl(238, 47%, 60%);
  --lightHoverViolet: hsl(288, 47%, 60%);
  --lightHoverMagenta: hsl(317, 47%, 60%);

  --hoverSlantThat: #90b5cf;

  --rgb-borders-2: rgba(100, 100, 100, 1.0);

  --rainbow-bkgrd: rgba(50, 50, 50, 1.0);
  --light-rainbow-bkgrd: rgba(100, 100, 100, 1.0);

  /*--space-background-dark: url("/img/file-list-gallery/backgrounds/sparklyspace.gif");*/
  --space-background-dark: #1a1a1a;

  --mikuFrameBorder: url("/img/misc-imgs/lightning lace4.png");

  --siteCreditsLinkColour: lightskyblue;

  --block: none;
  --invert-0: invert(0%);

  --fbColor1: #111111;
  --fbColor2: #222222;
  --fbColor3: #010101;

  --palette-space-333: #333333;
  --palette-space-121: #121212;
  --palette-space-aaa: #7a7a7a;

  --trophyBorderColour: #919191;

  --thatColor: #5a6263;
  --lightColor: var(--lightyellow);

  --thatColorA: transparent;
  --lightColorB: #121222;

  --thatColor2: #5a6263;
  --lightColor2: var(--lightyellow);
}


:root.lightmode_clean{
  --color-primary: #121212;
  --lightyellow: #ffffe0;
  --reddish-black: #ffffff;
  --full-black: white;

  --dark-colour: rgba(255, 255, 255, 0.4);
  --dark-colour-0_8: rgba(255, 255, 255, 0.8);

  --light-colour-0_2: rgba(0, 0, 0, 0.1);
  --light-colour: rgba(0, 0, 0, 0.4);
  --light-colour-0_8: rgba(0, 0, 0, 0.8);
  --grey-middle: rgba(121, 121, 121, 1);

  --hoverRed:    hsl(0, 60%, 85%);
  --hoverOrange: hsl(30, 60%, 85%);
  --hoverYellow: hsl(60, 60%, 85%);
  --hoverGreen:  hsl(120, 40%, 80%);
  --hoverBlue:   hsl(210, 40%, 80%);
  --hoverIndigo: hsl(275, 40%, 80%);
  --hoverViolet: hsl(320, 40%, 85%);
  --hoverMagenta: hsl(350, 40%, 85%);

  --lightHoverRed:    hsl(0, 47%, 70%);
  --lightHoverOrange: hsl(25, 47%, 70%);
  --lightHoverYellow: hsl(50, 47%, 70%);
  --lightHoverGreen:  hsl(101, 47%, 70%);
  --lightHoverBlue:   hsl(173, 47%, 70%);
  --lightHoverIndigo: hsl(238, 47%, 70%);
  --lightHoverViolet: hsl(288, 47%, 70%);
  --lightHoverMagenta: hsl(317, 47%, 70%);

  --hoverSlantThat: #b2e0ff;

  --rgb-borders-2: rgba(100, 100, 100, 1.0);

  --rainbow-bkgrd: rgba(250, 250, 250, 1.0);
  --light-rainbow-bkgrd: rgba(150, 150, 150, 1.0);

  --fbColor1: #efefef;
  --fbColor2: #ffffff;
  --fbColor3: #cecece;

  --trophyBorderColour: #dacfcf;

  --block: none;
  --invert-0: invert(100%);

  --thatColor: #667274;
  --lightColor: #dfdfdf;

  --thatColorA: transparent;
  --lightColorB: #b7b7ce;

  --siteCreditsLinkColour: #299be2;

  --palette-space-333: #dddddd;
  --palette-space-121: #eeeeee;
  --palette-space-aaa: #bfbfbf;

  /*--space-background-dark: url(/img/file-list-gallery/backgrounds/daysky-bg.gif);*/
  --space-background-dark: #fff;

  --mikuFrameBorder: url("/img/misc-imgs/lightning lace4-invert.png");

  --navBorderRed: #f8b4b4;
  --navBorderYellow: #fce7a2;
  --navBorderGreen: #b4f8c8;
  --navBorderBlue: #a2d2ff;

  --navLogoPink: #eeeeee;
  --navLogoRed: #bfbfbf;
}

:root.lightmode svg:not(.theme-btn):not(.theme-btn svg),
:root.lightmode_clean svg:not(.theme-btn):not(.theme-btn svg){
  fill: var(--color-primary);
}

:root.lightmode .individualWavy span {
  animation: wavy 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
:root.darkmode_clean .individualWavy span { animation: none; }
:root.lightmode_clean .individualWavy span { animation: none; }

:root.lightmode .aboutMe .rgbBorders2 img { opacity: 90%; }
:root.darkmode_clean .aboutMe .rgbBorders2 img { opacity: 100%; }
:root.lightmode_clean .aboutMe .rgbBorders2 img { opacity: 100%; }

:root.lightmode_clean .star1, :root.lightmode_clean .star2, 
:root.lightmode_clean .star3, :root.lightmode_clean #layerNeko0, 
:root.lightmode_clean hr, :root.lightmode_clean hr.thunder,
:root.lightmode_clean .x, :root.lightmode_clean .y, 
:root.lightmode_clean .a, :root.lightmode_clean .b, 
:root.lightmode_clean .trophyContainerLeft, 
:root.lightmode_clean .trophyContainerRight, 
:root.darkmode_clean .star1, :root.darkmode_clean .star2, 
:root.darkmode_clean .star3, :root.darkmode_clean #layerNeko0, 
:root.darkmode_clean hr, :root.lightmode_clean hr.thunder,
:root.darkmode_clean .x, :root.darkmode_clean .y, 
:root.darkmode_clean .a, :root.darkmode_clean .b, 
:root.darkmode_clean .trophyContainerLeft, 
:root.darkmode_clean .trophyContainerRight {
  display: none;
}

:root.lightmode_clean .hidden, :root.lightmode_clean .hiddenNegX, 
:root.lightmode_clean .showNegX, :root.lightmode_clean .sideNav, 
:root.lightmode_clean hr, :root.lightmode_clean hr.thunder,
:root.lightmode_clean .slantThat:hover, 
:root.lightmode_clean .borderedText:hover,
:root.darkmode_clean .hidden, :root.darkmode_clean .hiddenNegX, 
:root.darkmode_clean .showNegX, :root.darkmode_clean .sideNav, 
:root.darkmode_clean hr, :root.darkmode_clean hr.thunder,
:root.darkmode_clean .slantThat:hover, 
:root.darkmode_clean .borderedText:hover{
  transition: none;
}

:root.lightmode #chatBox,
:root.lightmode_clean #chatBox{
  border: 4px solid var(--lightyellow);
}

:root.lightmode .cardOfGallery,
:root.lightmode_clean .cardOfGallery {
  background: repeating-linear-gradient(
    45deg,
    var(--dark-colour-0_8) 0,
    var(--dark-colour-0_8) 5rem,
    transparent 5rem,
    transparent 10rem
  );
}

:root.lightmode .frontPage,
:root.lightmode_clean .frontPage{
  filter: invert(100%);
}

:root.lightmode .mikuSideLeft, 
:root.lightmode .mikuSideRight,
:root.lightmode_clean .mikuSideLeft, 
:root.lightmode_clean .mikuSideRight{
  filter: hue-rotate(200deg) brightness(1.1);
}

:root.lightmode .flameStandLeft, 
:root.lightmode .flameStandRight,
:root.lightmode_clean .flameStandLeft, 
:root.lightmode_clean .flameStandRight{
  filter: hue-rotate(160deg) brightness(1);
}

/*:root.lightmode .dot-button,
:root.lightmode_clean .dot-button {
  background-color: var(--light-colour);
}*/

:root.lightmode .active, 
:root.lightmode .dot-button:hover,
:root.lightmode_clean .active, 
:root.lightmode_clean .dot-button:hover {
  background-color: var(--light-colour-0_8);
}


:root.lightmode_clean .quoteContainer {
  background: none;
}

:root.lightmode hr{
  border-right-color: rgba(0, 0, 0, 0.7);
}

:root.darkmode_clean #sideWindow img, 
:root.darkmode_clean #sideWindow2 img{
  filter: grayscale(100%);
}

:root.darkmode_clean .quoteContainer {
  background: none;
}