:root, [data-theme='light'] {

  /****** colours ******/
    --foreground:#2f2831;
    --foreground-dark: #201b21;
    --cute-accent: #3c4940;
    --background:#fefbf6;
    --background-dark: #fcf3e5;
    --light-background-dark: #fcf3e5;
    --background-darker: #eddfca;

    --arrow: url("/assets/images/index/arrow-lightmode.png");

    --achiborder: var(--foreground);
    --achishadow: #00000040;

    --primary:#4ac7e370; 
    --secondary: #385a2a;
    --tertiary: #5e4555;
    --boldital: #1b6461;
    --error: #a80000;

    --active: #ccedf1;
    --active-text:#4f5f1c;

    --button-primary: #dcf1f3;
    --button-primary-dark: #afe4ee;
    --button-hover: #e0e9b9;
    --button-hover-dark: #c2d879;
    --button-inv: #eec9de;
    --button-inv-dark: #b69bac;
    --button-inv-tt: var(--foreground);
    --button-clicked: var(--button-hover-dark);
    --button-clicked-dark: #90a34e;
    --button-primary-clicked: var(--button-primary-dark);
    --button-primary-clicked-dark: #93d8e6;
    --click-color: var(--foreground);
    --darktthoverdark: var(--foreground);

    --apphl: #c2d87990;
    --apphl2: #c2d87910;

    --button-color: var(--foreground);

    --input-background: white;
    --input-color: black;
    --input-border: gray;

    --link-primary: #295570;
    --link-accent:#385a2a;

    --selection-background: var(--foreground);
    --selection-color: var(--button-primary);

    --cloud-color: var(--background);
    --cloud-text:  var(--foreground);
    --cloud-border: var(--foreground);

    --logo-line: var(--foreground);
    --desktop-taskbar: #dcf1f3;
    --bar-light: #ffffff;
    --bulb-glow: transparent;

    /****** images ******/
    --bullet-point: url(/assets/images/misc/lightbulletpoint.png);
    --sky: url(/assets/images/index/day.png);
    --cloudy: url(/assets/images/index/cloudy.png);    
    --bulb:url(/assets/images/index/darkbulb.webp);

  /****** sizing ******/
  --cloudsize: 30px;
  --cloudround: 30;
}

  
[data-theme='dark'] {

  /****** colours ******/
    --foreground:#fefbf6;
    --foreground-dark: #fcf3e5;
    --cute-accent: #f6fef6;
    --background:#2f2831;
    --background-dark: #201b21;
    --light-background-dark: #eddfca;
    --background-darker: #140f14;

    --arrow: url("/assets/images/index/arrow-darkmode.png");

    --achiborder: var(--background);
    --achishadow: #ffffff40;
    
    --primary:#4ac7e370;
    --secondary:#eec9de;
    --tertiary:#c2d879;
    --boldital: #f8b4c9;
    --error: #e7acac;

    --active: #2f4855;
    --active-text:#f2d9e7;

    --button-primary: #3d6f81;
    --button-primary-dark: #344553;
    --button-hover: #eec9de;
    --button-hover-dark: #b69bac;
    --button-inv: #598f43;
    --button-inv-dark: #385a2a;
    --button-inv-tt: var(--foreground);
    --button-color: var(--background);
    --button-clicked: var(--button-hover-dark);
    --button-clicked-dark: #8a677d;
    --button-primary-clicked: var(--button-primary-dark);
    --button-primary-clicked-dark: #1f2c37;
    --click-color: var(--foreground);
    --darktthoverdark: var(--background);

    --apphl: #b69bac70;
    --apphl2: #b69bac20;

    --cloud-color: var(--background);
    --cloud-text:  var(--foreground);
    --cloud-border: var(--foreground);

    --link-primary:#83b3d0;
    --link-accent:#eec9de;
    
    --selection-background: var(--foreground);
    --selection-color: #2b4d5a;
    
    --logo-line: var(--foreground);
    --desktop-taskbar: var(--button-primary);
    --bar-light: #ffffff90;
    --bulb-glow: var(--foreground);

    /****** images ******/
    --bullet-point: url(/assets/images/misc/darkbulletpoint.png);
    --sky: url(/assets/images/index/night.png);
    --cloudy: url(/assets/images/index/cloudydark.png);
    --bulb:url(/assets/images/index/lightbulb.webp);
    
  /****** sizing ******/
  --cloudsize: 30px;
  --cloudround: 30;
  --sidebar: 280px;
}


@media (prefers-color-scheme: dark) {
  :root, [data-theme='dark'] {
  
    /****** colours ******/
      --foreground:#fefbf6;
      --foreground-dark: #fcf3e5;
      --cute-accent: #f6fef6;
      --background:#2f2831;
      --background-dark: #201b21;
      --light-background-dark: #eddfca;
      --background-darker: #140f14;      

    --arrow: url("/assets/images/index/arrow-darkmode.png");

      --achiborder: var(--background);
      --achishadow: #ffffff40;
  
      --primary:#4ac7e370;
      --secondary:#eec9de;
      --tertiary:#c2d879;
      --boldital: #f8b4c9;
      --error: #e7acac;
  
      --active: #2f4855;
      --active-text:#f2d9e7;
  
      --button-primary: #3d6f81;
      --button-primary-dark: #344553;
      --button-hover: #eec9de;
      --button-hover-dark: #b69bac;
    --button-inv: #598f43;
    --button-inv-dark: #385a2a;
    --button-inv-tt: var(--foreground);
      --button-color: var(--background);
      --button-clicked: var(--button-hover-dark);
      --button-clicked-dark: #8a677d;
      --button-primary-clicked: var(--button-primary-dark);
      --button-primary-clicked-dark: #1f2c37;
      --click-color: var(--foreground);
      --darktthoverdark: var(--background);

      --apphl: #b69bac70;
      --apphl2: #b69bac20;
  
      --cloud-color: var(--background);
      --cloud-text:  var(--foreground);
      --cloud-border: var(--foreground);
  
      --link-primary:#83b3d0;
      --link-accent:#eec9de;
      
      --selection-background: var(--foreground);
      --selection-color: #2b4d5a;
      
      --logo-line: var(--foreground);
      --desktop-taskbar: var(--button-primary);
      --bar-light: #ffffff90;
      --bulb-glow: var(--foreground);
  
    /****** images ******/
    --bullet-point: url(/assets/images/misc/darkbulletpoint.png);
    --sky: url(/assets/images/index/night.png);
    --cloudy: url(/assets/images/index/cloudydark.png);
    --bulb:url(/assets/images/index/lightbulb.webp);
      
    /****** sizing ******/
    --cloudsize: 30px;
    --cloudround: 30;
    --sidebar: 280px;
  }
  
  [data-theme='light'] {

    /****** colours ******/
      --foreground:#2f2831;
      --foreground-dark: #201b21;
      --cute-accent: #3c4940;
      --background:#fefbf6;
      --background-dark: #fcf3e5;
      --light-background-dark: #fcf3e5;
      --background-darker: #eddfca;
      
    --arrow: url("/assets/images/index/arrow-lightmode.png");
  
      --achiborder: var(--foreground);
      --achishadow: #00000040;

      --primary:#4ac7e370; 
      --secondary: #385a2a;
      --tertiary: #5e4555;
      --boldital: #1b6461;
      --error: #a80000;
  
      --active: #ccedf1;
      --active-text:#4f5f1c;
  
      --button-primary: #dcf1f3;
      --button-primary-dark: #afe4ee;
      --button-hover: #e0e9b9;
      --button-hover-dark: #c2d879;
      --button-inv: #eec9de;
      --button-inv-dark: #b69bac;
      --button-inv-tt: var(--foreground);
      --button-clicked: var(--button-hover-dark);
      --button-clicked-dark: #90a34e;
      --button-primary-clicked: var(--button-primary-dark);
      --button-primary-clicked-dark: #93d8e6;
      --click-color: var(--foreground);
      --darktthoverdark: var(--foreground);

      --apphl: #c2d87990;
      --apphl2: #c2d87910;
  
      --button-color: var(--foreground);
  
      --input-background: white;
      --input-color: black;
      --input-border: gray;
  
      --link-primary: #295570;
      --link-accent:#385a2a;
  
      --selection-background: var(--foreground);
      --selection-color: var(--button-primary);
  
      --cloud-color: var(--background);
      --cloud-text:  var(--foreground);
      --cloud-border: var(--foreground);
  
      --logo-line: var(--foreground);
      --desktop-taskbar: #dcf1f3;
      --bar-light: #ffffff;
      --bulb-glow: transparent;
  
    /****** images ******/
    --bullet-point: url(/assets/images/misc/darkbulletpoint.png);
    --sky: url(/assets/images/index/day.png);
    --cloudy: url(/assets/images/index/cloudy.png);
    --bulb:url(/assets/images/index/lightbulb.webp);
  
    /****** sizing ******/
    --cloudsize: 30px;
    --cloudround: 30;
    }
}

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

* {
	scrollbar-width: auto;
	scrollbar-color: var(--foreground) var(--background);
}

*::-webkit-scrollbar {
	width: 16px;
}

*::-webkit-scrollbar-track {
	background: var(--background);
}

*::-webkit-scrollbar-thumb {
	background-color: var(--foreground);
	border: 3px solid var(--background);
}

.outlink::after { content: " \2197"; }
.return::before { content:'\2190 \A0' }

::selection {
  background:var(--selection-background);
  color: var(--selection-color);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: var(--background);
  background-image:var(--sky);
  background-size: cover;
  background-attachment:fixed;
  color: var(--foreground);
  font-size: 1.125rem;
  font-family: "Huninn", sans-serif;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6,
.fakeh1, .fakeh2, .fakeh3 {
  overflow-wrap: break-word;
}

.fakeh3 {
  width: 100%;
  text-align: center;
  display: block;
}


h1, .fakeh1 { font-size: 2.8rem; }
h2, .fakeh2 { font-size: 2.5rem; }
h3, .fakeh3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.3rem; }
h6 { font-size: 1rem; }

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6,
.fakeh1, .fakeh2, .fakeh3 {
  text-wrap: balance;  
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  text-shadow: none;
}

#root, #__next {
  isolation: isolate;
}


.tippy-box[data-theme~='layercake'] {
  background-color: var(--background-dark);
  color: var(--foreground);
  text-align: center;
  font-size: inherit;
  border-radius: 0;
  padding: 2px;
  max-width: 300px;
  filter: drop-shadow(0px -1px 0 var(--foreground)) drop-shadow(1px 0px 0 var(--foreground))
  drop-shadow(0px 1px 0 var(--foreground)) drop-shadow(-1px 0px 0 var(--foreground))   
  drop-shadow(3px 3px 0 var(--button-hover-dark));
  position:relative;  
}

.tippy-box[data-theme~='layercake'] > .tippy-arrow {
  color: var(--background-dark);
}

.flex, .mainfle, .nomflex { display:flex; }
.col { flex-direction: column;}
.gap, .mainfle {gap: 10px;}
.overflow { overflow: hidden;}
.yourusername {
  text-decoration: wavy underline;
  text-underline-offset: 4px;
  color:var(--secondary);
  font-weight: bold;
}


.mainbutton {
  box-sizing: border-box;
  color: var(--foreground);
  background: linear-gradient( to bottom, var(--button-primary) 0 50%, var(--button-primary-dark) 50% 100%, var(--button-primary));
  box-shadow: 0 6px 6px -2px #ffffff90 inset, 0 -2px 6px -2px #00000090 inset;
  font-weight:bold;
  padding: 0.25rem 0.5rem;
  font: inherit;
  border: 1px solid var(--foreground);
  border-radius: 10px;
}

.mainbutton:hover {  
  color: var(--button-color);
  box-shadow: 0 6px 6px -2px #ffffff90 inset, 0 -2px 6px -2px #00000090 inset;
  background: linear-gradient( to bottom, var(--button-hover) 0 50%, var(--button-hover-dark) 50% 100%, var(--button-hover));
}


.mainbutton:active {
  background: linear-gradient( to bottom, var(--button-clicked) 0 50%, var(--button-clicked-dark) 50% 100%, var(--button-clicked));
  color: var(--click-color);
}

.centerbutton { display:block; margin: 0 auto;}

#main {
  display: flex;
}

.cloudyborder {
  width:fit-content;
  min-width: var(--cloudsize);
  border: var(--cloudsize) solid transparent;
  box-sizing: border-box;
  border-width: 0 var(--cloudsize) 0 0;
  border-image: var(--cloudy) var(--cloudround) round;
  filter: drop-shadow(var(--cloud-border) 1px 0 0px);
  left: -2px;
}

.sidebar {
  background-image:linear-gradient(to right, var(--cloud-color) 90%, transparent 90%);
  width: var(--sidebar);
  display:flex;
  position: relative;
  z-index: 100;
}

.sidecontent {
  width: calc(280px - var(--cloudsize));
  background:var(--cloud-color);
  color: var(--cloud-text);
  padding: 5px 15px 0 10px;
  overflow-y:auto;
  scrollbar-color: var(--foreground) var(--background);
}

.sidebar, .sidecontent {
  height: 100vh;
}

.bottombar {
  position:fixed;
  bottom:0;
  background:var(--desktop-taskbar);
  box-shadow: 0 4px 4px -2px var(--bar-light) inset, 0 -12px 12px -6px #00000090 inset;  
  border-top: 1px solid var(--foreground);
  width: calc(100% - 220px);
  right: 0px;
  padding: 0 0 0 30px;
  height: 30px;
  text-align: right;
}

.baradj {
  display: block;
  height:35px;
}

#time {
  width: fit-content;
  float:right;
  height: 30px;
  padding: 0 10px;
  min-width: 200px;
}

#content {
  width: calc(100% - 280px);
  padding: 10px;
  height: calc(100vh - 35px);
}

.centercontent {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin:0 auto;
}

ul {
  text-align: left;
  list-style:none;
  padding:0;
  margin:0;
}

li, .swirl {
  margin:0 10px;
}

.swirl { font-weight: bold;}

.swirl::before {
  content: '';
  display: inline-block;
  height: 15px;
  width: 15px;
  background-image: url(/assets/images/index/swirl.gif);
  background-size:contain;
  position:relative;
  top: 2px;
  margin-right: 10px;
}

.check a, .fakecheck a {
  text-decoration: double 0.25px underline;
  text-underline-offset: 4px;
  color:var(--link-primary);
  display: block;
}

.navul .check:hover:not(.navActive), .fakecheck:hover { 
  color:var(--link-accent);
  padding-left: 5px
}

.navActive {
  padding-left: 10px;
  background:linear-gradient(to right, var(--active), transparent);
  box-shadow: 0 0 10px var(--background) inset, 0 0 10px var(--background) inset,
  0 0 10px var(--background) inset, 0 0 10px var(--background) inset;
  font-weight: bold;
  display: inline-flex;
  width: calc(100% - 40px);
}

.navActive::before {
  content: '';
  display: inline-block;
  margin: 2px 8px 0 0;
  width: 22px;
  height: 22px;
  background: var(--arrow) no-repeat center/contain;

}


.check.navActive a {
  color:var(--active-text);
  display: block;
}

.navul .check.navActive:hover {
  color:var(--link-accent);
  font-weight: bolder;
  margin:0;
}
details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

summary { 
  display: block;
  cursor: pointer;
  position: relative;
}

.summary::before {
  content: "";
  position: absolute;
  inset: 0; /* full coverage */
}

summary:after {
  content: '\002B';
  color: var(--accordion-symbol);
  font-weight: bold;
  float: right;
  margin: 0 5px;
}

details[open] > summary:after {
  content: "\2212";
  color: var(--accordion-symbol);
  font-weight: bold;
  float: right;
  margin: 0 5px;
}

details {
  height:0;
  transition: max-height 0.4s ease-out;
}

details[open] {
  height:fit-content;
}

details {
  margin-bottom: 20px;
}

details:not([open]) {
  height: auto;
}


.mobile { display:none; }

.window {
  margin: 0 auto;
  border: 1px solid var(--foreground);
  background: var(--background);
  height:fit-content;
}

.winscr {
  overflow-y: auto;
}
.statwindow {  
  background: var(--button-primary-dark);
  border: 1px solid var(--foreground);
  box-shadow: 0 6px 6px -2px #ffffff90 inset, 0 -2px 6px -2px #00000090 inset;
  padding: 12px;
  padding-top: 6px;
  text-align: center;
  margin:0 auto;
}

.statwindow:hover, .fakestatwindow:hover {
  background: var(--button-hover-dark);
  color: var(--button-color);
}

.statwindow:hover .statinner, .fakestatwindow:hover .statinner,
.fakestatwindow:hover .fakestatinner {
  color:var(--foreground)
}

.statinner {
  border: 1px solid var(--foreground);
  background: var(--background);
  padding: 3px;
}

a {
  color:var(--link-primary);
}

a:hover {
  color:var(--link-accent);
}

.stattitle {
  font-family: "Fredoka", sans-serif;
  margin-bottom: 5px;
}

.titlebar {
  background: linear-gradient( to bottom, var(--button-primary) 0 50%, var(--button-primary-dark) 50% 100%, var(--button-primary));
  border-bottom: 1px solid var(--foreground);
  box-shadow: 0 6px 6px -2px #ffffff90 inset, 0 -2px 6px -2px #00000090 inset;
  display: flex;
  justify-content: space-between;
  padding: 3px 9px;
}

.window:hover .titlebar {
  background: linear-gradient( to bottom, var(--button-hover) 0 50%, var(--button-hover-dark) 50% 100%, var(--button-hover));
  color: var(--button-color);
}

.window:hover .titlebar .desktopinfo, .window:hover .titlebar .mobileinfo {
  color: var(--button-color);
  font-style: italic;
}

.windowbody {
  padding: 6px;
  height: calc(100% - 54px);
}

.lightbody {
  height: calc(100% - 54px);
}

.windowbody p { margin: 12px 0; }
.windowbody p:first-of-type { margin-top:0;}
.windowbody p:last-of-type { margin-bottom:0;}

.windowgrad {
  background:linear-gradient( to bottom, transparent, var(--background-darker));
  min-height: 16px;
  max-height: 20px;
}

.lucide-x-icon {
  position:relative;
  top: 2px;
}

i, b, em, strong, #begin {
  color:var(--boldital);
}

.bodyscroll { overflow-y: auto;}

/* smaller screens */
@media only screen and (max-width: 920px) {    
  .mobile { display:block; }

    #main, .sidebar {
      flex-direction: column;
    }
    .flex {
      flex-direction: column;
    }

  .sidebar, .sidecontent {
    width:100%;
  }

  #content {
    width:100%;
    padding: 10px;
    height: fit-content;
  }

  .sidebar {
    position: relative;
    z-index: 100;
    background-image:linear-gradient(to bottom, var(--cloud-color) 90%, transparent 90%);
  }
  .cloudyborder {
    min-height: var(--cloudsize);
    width:100%;
    border: var(--cloudsize) solid transparent;
    box-sizing: border-box;
    border-width: 0 0 var(--cloudsize) 0;
    border-image: var(--cloudy) 35 round;
    position: relative;
    bottom: 1px;
    z-index: 100;
    filter: drop-shadow(var(--cloud-border) 0 1px 0px) drop-shadow(var(--cloud-border) 1px 0 0px)
    drop-shadow(var(--cloud-border) -1px 0 0px);
  }

  .sidebar, .sidecontent {
    height: fit-content;
  }

  .welcome, .statwindow {
    width: 100%;
  }  

  .bottombar {
    position:fixed;
    bottom:0;
    background:var(--desktop-taskbar);
    box-shadow: 0 4px 4px -2px #ffffff90 inset, 0 -12px 12px -6px #00000090 inset;
    border-top: 1px solid var(--foreground);
    width: 100%;
    right: 0;
    padding-left: 0;
    z-index: 5;
  }

  
summary:after {
content: '\002B';
color: var(--accordion-symbol);
font-weight: bold;
float: right;
margin: 0 15px;
}

details[open] > summary:after {
content: "\2212";
color: var(--accordion-symbol);
font-weight: bold;
float: right;
margin: 0 15px;
}

.centerbutton {
  margin-bottom: 20px;
}

}

  @media only screen and (max-width: 250px) {    
    summary:after, details[open] > summary:after {
      margin: 0 5px;
    }
}