@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Whisper&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Emilys+Candy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Guides:wght@467&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Honk:MORF,SHLN@9,53&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch+Pop&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Agu+Display:MORF@28&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');

.creepster-regular {
  font-family: "Creepster", system-ui;
  font-weight: 400;
  font-style: normal;
}
.cormorant-garamond-regular {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: normal;
}

.cormorant-garamond-bold {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-style: normal;
}

.cormorant-garamond-regular-italic {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: italic;
}
.whisper-regular {
	font-optical-sizing: auto;
	font-family: "Whisper", cursive;
	font-weight: 400;
	font-style: normal;
}
.emilys-candy-regular {
  font-family: "Emilys Candy", serif;
  font-weight: 400;
  font-style: normal;
}
.ubuntu-regular {
	font-optical-sizing: auto;
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-bold {
	font-optical-sizing: auto;
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-regular-italic {
	font-optical-sizing: auto;
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-bold-italic {
	font-optical-sizing: auto;
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
}
.pixelify-sans-regular {
  font-family: "Pixelify Sans", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.edu-au-vic-wa-nt-guides-moodydays {
  font-family: "Edu AU VIC WA NT Guides", cursive;
  font-optical-sizing: auto;
  font-weight: 467;
  font-style: normal;
}
.tiny5-regular {
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.honk-nightlife {
  font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 9,
    "SHLN" 53;
}
.rubik-glitch-pop-regular {
  font-family: "Rubik Glitch Pop", serif;
  font-weight: 400;
  font-style: normal;
}

.agu-display-fontthing {
  font-family: "Agu Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 30;
}
@font-face {
	font-family: "OpenDyslexic";
	src: url("media/OpenDyslexic-Regular.otf") format("opentype");
	size-adjust: 80%;
}

:root {
	--text-50: #efedf8;
	--text-100: #dfdaf1;
	--text-200: #bfb5e3;
	--text-300: #9f90d5;
	--text-400: #7f6bc7;
	--text-500: #5f46b9;
	--text-600: #4c3894;
	--text-700: #392a6f;
	--text-800: #261c4a;
	--text-900: #130e25;
	--text-950: #090712;

	--background-50: #efecf8;
	--background-100: #dfdaf1;
	--background-200: #bfb5e3;
	--background-300: #a08fd6;
	--background-400: #806ac8;
	--background-500: #6045ba;
	--background-600: #4d3795;
	--background-700: #3a2970;
	--background-800: #261c4a;
	--background-900: #130e25;
	--background-950: #0a0713;

	--primary-50: #f0edf8;
	--primary-100: #e1daf1;
	--primary-200: #c3b5e3;
	--primary-300: #a590d5;
	--primary-400: #876bc7;
	--primary-500: #6946b9;
	--primary-600: #543894;
	--primary-700: #3f2a6f;
	--primary-800: #2a1c4a;
	--primary-900: #150e25;
	--primary-950: #0a0712;

	--secondary-50: #f8f4ed;
	--secondary-100: #f1eada;
	--secondary-200: #e2d4b6;
	--secondary-300: #d4bf91;
	--secondary-400: #c6a96c;
	--secondary-500: #b89447;
	--secondary-600: #937639;
	--secondary-700: #6e592b;
	--secondary-800: #493b1d;
	--secondary-900: #251e0e;
	--secondary-950: #120f07;

	--accent-50: #f2f8ed;
	--accent-100: #e4f1da;
	--accent-200: #c9e2b6;
	--accent-300: #aed491;
	--accent-400: #93c66c;
	--accent-500: #78b847;
	--accent-600: #609339;
	--accent-700: #486e2b;
	--accent-800: #30491d;
	--accent-900: #18250e;
	--accent-950: #0c1207;

	--heading: Bahnschrift;
	color: var(--text-100);
	text-align: center;
	font-family: Ubuntu;
}
#loaddiv {
    height: 65em;
    position: relative;
}
#loading {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
}
body {
    margin: 1em auto;
    max-width: 70em;
    margin: auto;
	min-height: 1280px;
    background-image: linear-gradient(to top, var(--background-900), var(--background-800));
    text-align: -webkit-center;
	font-family: var(--font);
}
body[data-font="Ubuntu"] {
	--font: Ubuntu;
}
body[data-font="Arial"] {
	--font: Arial;
}
body[data-font="TimesNewRoman"] {
	--font: "Times New Roman";
}
body[data-font="OpenDyslexic"] {
	--font: "OpenDyslexic";
}
body[data-font="PixelifySans"] {
	--font: "Pixelify Sans";
}
body.purpleglow {
	--text-50: #efedf8;
	--text-100: #dfdaf1;
	--text-200: #bfb5e3;
	--text-300: #9f90d5;
	--text-400: #7f6bc7;
	--text-500: #5f46b9;
	--text-600: #4c3894;
	--text-700: #392a6f;
	--text-800: #261c4a;
	--text-900: #130e25;
	--text-950: #090712;

	--background-50: #efecf8;
	--background-100: #dfdaf1;
	--background-200: #bfb5e3;
	--background-300: #a08fd6;
	--background-400: #806ac8;
	--background-500: #6045ba;
	--background-600: #4d3795;
	--background-700: #3a2970;
	--background-800: #261c4a;
	--background-900: #130e25;
	--background-950: #0a0713;

	--primary-50: #f0edf8;
	--primary-100: #e1daf1;
	--primary-200: #c3b5e3;
	--primary-300: #a590d5;
	--primary-400: #876bc7;
	--primary-500: #6946b9;
	--primary-600: #543894;
	--primary-700: #3f2a6f;
	--primary-800: #2a1c4a;
	--primary-900: #150e25;
	--primary-950: #0a0712;

	--secondary-50: #f8f4ed;
	--secondary-100: #f1eada;
	--secondary-200: #e2d4b6;
	--secondary-300: #d4bf91;
	--secondary-400: #c6a96c;
	--secondary-500: #b89447;
	--secondary-600: #937639;
	--secondary-700: #6e592b;
	--secondary-800: #493b1d;
	--secondary-900: #251e0e;
	--secondary-950: #120f07;

	--accent-50: #f2f8ed;
	--accent-100: #e4f1da;
	--accent-200: #c9e2b6;
	--accent-300: #aed491;
	--accent-400: #93c66c;
	--accent-500: #78b847;
	--accent-600: #609339;
	--accent-700: #486e2b;
	--accent-800: #30491d;
	--accent-900: #18250e;
	--accent-950: #0c1207;
}
body.moodydays {
	--text-50: #f4f1f1;
	--text-100: #e9e4e2;
	--text-200: #d2c8c6;
	--text-300: #bcada9;
	--text-400: #a5928d;
	--text-500: #8f7670;
	--text-600: #725f5a;
	--text-700: #564743;
	--text-800: #392f2d;
	--text-900: #1d1816;
	--text-950: #0e0c0b;

	--background-50: #f4f1f1;
	--background-100: #e9e2e2;
	--background-200: #d2c6c6;
	--background-300: #bca9a9;
	--background-400: #a58d8d;
	--background-500: #8f7070;
	--background-600: #725a5a;
	--background-700: #564343;
	--background-800: #392d2d;
	--background-900: #1d1616;
	--background-950: #0e0b0b;

	--primary-50: #f4f1f1;
	--primary-100: #e8e4e3;
	--primary-200: #d2c8c6;
	--primary-300: #bbadaa;
	--primary-400: #a4928e;
	--primary-500: #8e7771;
	--primary-600: #715f5b;
	--primary-700: #554744;
	--primary-800: #392f2d;
	--primary-900: #1c1817;
	--primary-950: #0e0c0b;

	--secondary-50: #f2f4f1;
	--secondary-100: #e4e9e2;
	--secondary-200: #cad2c6;
	--secondary-300: #afbca9;
	--secondary-400: #94a58d;
	--secondary-500: #798f70;
	--secondary-600: #61725a;
	--secondary-700: #495643;
	--secondary-800: #31392d;
	--secondary-900: #181d16;
	--secondary-950: #0c0e0b;

	--accent-50: #f1f4f2;
	--accent-100: #e2e9e4;
	--accent-200: #c6d2ca;
	--accent-300: #a9bcaf;
	--accent-400: #8da595;
	--accent-500: #708f7a;
	--accent-600: #5a7262;
	--accent-700: #435649;
	--accent-800: #2d3931;
	--accent-900: #161d18;
	--accent-950: #0b0e0c;
	--heading: "Edu AU VIC WA NT Guides";
}
body.greenmatrix {
	--text-50: #f2f3f1;
	--text-100: #e6e7e4;
	--text-200: #cccfc9;
	--text-300: #b3b7ae;
	--text-400: #999f93;
	--text-500: #808778;
	--text-600: #666c60;
	--text-700: #4d5148;
	--text-800: #333630;
	--text-900: #1a1b18;
	--text-950: #0d0e0c;

	--background-50: #f2f6ef;
	--background-100: #e5ecdf;
	--background-200: #cad9bf;
	--background-300: #b0c69f;
	--background-400: #95b47e;
	--background-500: #7ba15e;
	--background-600: #62814b;
	--background-700: #4a6039;
	--background-800: #314026;
	--background-900: #192013;
	--background-950: #0c1009;

	--primary-50: #f2f8ed;
	--primary-100: #e4f0db;
	--primary-200: #c9e1b7;
	--primary-300: #aed392;
	--primary-400: #93c46e;
	--primary-500: #78b54a;
	--primary-600: #60913b;
	--primary-700: #486d2c;
	--primary-800: #30481e;
	--primary-900: #18240f;
	--primary-950: #0c1207;

	--secondary-50: #f1faeb;
	--secondary-100: #e3f5d6;
	--secondary-200: #c8ebad;
	--secondary-300: #ace085;
	--secondary-400: #91d65c;
	--secondary-500: #75cc33;
	--secondary-600: #5ea329;
	--secondary-700: #467a1f;
	--secondary-800: #2f5214;
	--secondary-900: #17290a;
	--secondary-950: #0c1405;

	--accent-50: #f1fce8;
	--accent-100: #e3f9d2;
	--accent-200: #c7f4a4;
	--accent-300: #abee77;
	--accent-400: #8ee949;
	--accent-500: #72e31c;
	--accent-600: #5bb616;
	--accent-700: #458811;
	--accent-800: #2e5b0b;
	--accent-900: #172d06;
	--accent-950: #0b1703;
	--heading: Tiny5;
}
body.gloomycandy {
	--text-50: #eff4f5;
	--text-100: #e0e8eb;
	--text-200: #c1d2d7;
	--text-300: #a2bbc3;
	--text-400: #83a4af;
	--text-500: #638e9c;
	--text-600: #50717c;
	--text-700: #3c555d;
	--text-800: #28393e;
	--text-900: #141c1f;
	--text-950: #0a0e10;

	--background-50: #f0f5f5;
	--background-100: #e0ebeb;
	--background-200: #c2d6d6;
	--background-300: #a3c2c2;
	--background-400: #85adad;
	--background-500: #669999;
	--background-600: #527a7a;
	--background-700: #3d5c5c;
	--background-800: #293d3d;
	--background-900: #141f1f;
	--background-950: #0a0f0f;

	--primary-50: #eff4f5;
	--primary-100: #dfe8ec;
	--primary-200: #bfd2d9;
	--primary-300: #9fbbc6;
	--primary-400: #80a4b3;
	--primary-500: #608d9f;
	--primary-600: #4d7180;
	--primary-700: #395560;
	--primary-800: #263940;
	--primary-900: #131c20;
	--primary-950: #0a0e10;

	--secondary-50: #f1eff5;
	--secondary-100: #e2dfec;
	--secondary-200: #c6bfd9;
	--secondary-300: #a99fc6;
	--secondary-400: #8c80b3;
	--secondary-500: #70609f;
	--secondary-600: #594d80;
	--secondary-700: #433960;
	--secondary-800: #2d2640;
	--secondary-900: #161320;
	--secondary-950: #0b0a10;

	--accent-50: #f3eff5;
	--accent-100: #e7dfec;
	--accent-200: #cebfd9;
	--accent-300: #b69fc6;
	--accent-400: #9d80b3;
	--accent-500: #85609f;
	--accent-600: #6a4d80;
	--accent-700: #503960;
	--accent-800: #352640;
	--accent-900: #1b1320;
	--accent-950: #0d0a10;
	--heading: "Emilys candy";
}
body.nightlife {
	--text-50: #e7f6fd;
	--text-100: #cfedfc;
	--text-200: #9fdbf9;
	--text-300: #6fc9f6;
	--text-400: #3fb7f3;
	--text-500: #0fa5f0;
	--text-600: #0c84c0;
	--text-700: #096390;
	--text-800: #064260;
	--text-900: #032130;
	--text-950: #021018;

	--background-50: #e7f8fe;
	--background-100: #cff1fc;
	--background-200: #9fe3f9;
	--background-300: #6ed5f7;
	--background-400: #3ec6f4;
	--background-500: #0eb8f1;
	--background-600: #0b93c1;
	--background-700: #086f91;
	--background-800: #064a60;
	--background-900: #032530;
	--background-950: #011218;

	--primary-50: #e7f7fd;
	--primary-100: #cfeffc;
	--primary-200: #a0dff8;
	--primary-300: #70cff5;
	--primary-400: #40bff2;
	--primary-500: #11b0ee;
	--primary-600: #0d8cbf;
	--primary-700: #0a698f;
	--primary-800: #07465f;
	--primary-900: #032330;
	--primary-950: #021218;

	--secondary-50: #f1e7fd;
	--secondary-100: #e3cffc;
	--secondary-200: #c8a0f8;
	--secondary-300: #ac70f5;
	--secondary-400: #9040f2;
	--secondary-500: #7411ee;
	--secondary-600: #5d0dbf;
	--secondary-700: #460a8f;
	--secondary-800: #2f075f;
	--secondary-900: #170330;
	--secondary-950: #0c0218;

	--accent-50: #f7e7fd;
	--accent-100: #f0cffc;
	--accent-200: #e1a0f8;
	--accent-300: #d270f5;
	--accent-400: #c240f2;
	--accent-500: #b311ee;
	--accent-600: #8f0dbf;
	--accent-700: #6c0a8f;
	--accent-800: #48075f;
	--accent-900: #240330;
	--accent-950: #120218;
	--heading: Honk;
}
body.glowingcrystals {
	--text-50: #e6f8fe;
	--text-100: #cef1fd;
	--text-200: #9de2fb;
	--text-300: #6bd4fa;
	--text-400: #3ac5f8;
	--text-500: #09b7f6;
	--text-600: #0792c5;
	--text-700: #056e94;
	--text-800: #044962;
	--text-900: #022531;
	--text-950: #011219;

	--background-50: #e7f6fd;
	--background-100: #cfecfc;
	--background-200: #9fd9f9;
	--background-300: #6fc7f6;
	--background-400: #3fb4f3;
	--background-500: #0fa1f0;
	--background-600: #0c81c0;
	--background-700: #096190;
	--background-800: #064060;
	--background-900: #032030;
	--background-950: #021018;

	--primary-50: #e6f7fe;
	--primary-100: #ceeffd;
	--primary-200: #9ddffb;
	--primary-300: #6bcffa;
	--primary-400: #3abff8;
	--primary-500: #09aff6;
	--primary-600: #078cc5;
	--primary-700: #056994;
	--primary-800: #044662;
	--primary-900: #022331;
	--primary-950: #011119;

	--secondary-50: #fee6fa;
	--secondary-100: #fdcef5;
	--secondary-200: #fb9dec;
	--secondary-300: #fa6be2;
	--secondary-400: #f83ad8;
	--secondary-500: #f609cf;
	--secondary-600: #c507a5;
	--secondary-700: #94057c;
	--secondary-800: #620453;
	--secondary-900: #310229;
	--secondary-950: #190115;

	--accent-50: #fee6e9;
	--accent-100: #fdced3;
	--accent-200: #fb9da6;
	--accent-300: #fa6b7a;
	--accent-400: #f83a4d;
	--accent-500: #f60921;
	--accent-600: #c5071a;
	--accent-700: #940514;
	--accent-800: #62040d;
	--accent-900: #310207;
	--accent-950: #190103;
	--heading: "Agu Display";
}
body.vampire {
	--text-50: #f5f0f0;
	--text-100: #ebe0e2;
	--text-200: #d7c1c5;
	--text-300: #c3a2a8;
	--text-400: #ae848b;
	--text-500: #9a656e;
	--text-600: #7b5158;
	--text-700: #5d3c42;
	--text-800: #3e282c;
	--text-900: #1f1416;
	--text-950: #0f0a0b;

	--background-50: #fbeaeb;
	--background-100: #f6d5d8;
	--background-200: #edabb0;
	--background-300: #e48189;
	--background-400: #db5762;
	--background-500: #d22d3a;
	--background-600: #a8242f;
	--background-700: #7e1b23;
	--background-800: #541217;
	--background-900: #2a090c;
	--background-950: #150406;

	--primary-50: #f9ebed;
	--primary-100: #f3d8da;
	--primary-200: #e7b1b5;
	--primary-300: #db8a91;
	--primary-400: #cf636c;
	--primary-500: #c33c47;
	--primary-600: #9c3039;
	--primary-700: #75242b;
	--primary-800: #4e181c;
	--primary-900: #270c0e;
	--primary-950: #140607;

	--secondary-50: #fbe9eb;
	--secondary-100: #f7d4d7;
	--secondary-200: #f0a8ae;
	--secondary-300: #e87d86;
	--secondary-400: #e0525d;
	--secondary-500: #d92635;
	--secondary-600: #ad1f2a;
	--secondary-700: #821720;
	--secondary-800: #570f15;
	--secondary-900: #2b080b;
	--secondary-950: #160405;

	--accent-50: #fde7e9;
	--accent-100: #fbd0d3;
	--accent-200: #f8a0a7;
	--accent-300: #f4717c;
	--accent-400: #f14150;
	--accent-500: #ed1224;
	--accent-600: #be0e1d;
	--accent-700: #8e0b16;
	--accent-800: #5f070e;
	--accent-900: #2f0407;
	--accent-950: #180204;
	--heading: Whisper;
}
body.murkywaters {
	--text-50: #f1f5ef;
	--text-100: #e3ebe0;
	--text-200: #c6d7c1;
	--text-300: #aac3a2;
	--text-400: #8eaf83;
	--text-500: #719c63;
	--text-600: #5b7c50;
	--text-700: #445d3c;
	--text-800: #2d3e28;
	--text-900: #171f14;
	--text-950: #0b100a;

	--background-50: #f0f4f0;
	--background-100: #e1eae1;
	--background-200: #c3d5c3;
	--background-300: #a5c0a5;
	--background-400: #88aa88;
	--background-500: #6a956a;
	--background-600: #557755;
	--background-700: #3f5a3f;
	--background-800: #2a3c2a;
	--background-900: #151e15;
	--background-950: #0b0f0b;

	--primary-50: #f1f5f0;
	--primary-100: #e3ebe0;
	--primary-200: #c6d6c2;
	--primary-300: #aac2a3;
	--primary-400: #8dad85;
	--primary-500: #719966;
	--primary-600: #5a7a52;
	--primary-700: #445c3d;
	--primary-800: #2d3d29;
	--primary-900: #171f14;
	--primary-950: #0b0f0a;

	--secondary-50: #f0f5f3;
	--secondary-100: #e0ebe7;
	--secondary-200: #c1d7cf;
	--secondary-300: #a2c3b7;
	--secondary-400: #84ae9f;
	--secondary-500: #659a87;
	--secondary-600: #517b6c;
	--secondary-700: #3c5d51;
	--secondary-800: #283e36;
	--secondary-900: #141f1b;
	--secondary-950: #0a0f0d;

	--accent-50: #f0f5f4;
	--accent-100: #e0ebe9;
	--accent-200: #c1d7d4;
	--accent-300: #a2c3be;
	--accent-400: #84aea9;
	--accent-500: #659a93;
	--accent-600: #517b76;
	--accent-700: #3c5d58;
	--accent-800: #283e3b;
	--accent-900: #141f1d;
	--accent-950: #0a0f0f;
	--heading: "Rubik Glitch Pop";
}
#menus {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
	align-items: center;
}
#thememenu {
	text-align: left;
}
#pagemenu {
	text-align: right;
}
select {
    margin: 2px;
    border-radius: 0px;
    padding: 0.3em;
    color: var(--text-100);
    background-image: linear-gradient(var(--primary-400), var(--primary-700));
    transition: box-shadow .5s;
    font-family: inherit;
	border-top: 2px solid var(--primary-300);
	border-left: 2px solid var(--primary-300);
	border-bottom: 2px solid var(--primary-800);
	border-right: 2px solid var(--primary-800);
	box-shadow: 1px 1px var(--primary-700);
}
select:hover {
	transition: box-shadow .5s;
    box-shadow: 0px 0px 4px 2px var(--accent-300);
}
select:focus-visible {
	transition: box-shadow .5s;
    box-shadow: 0px 0px 4px 2px var(--accent-300);
    outline: none;
}
option {
    padding: 0.3em;
    color: var(--text-100);
    background-color: var(--primary-600);
}
option:hover {
	background-color: var(--primary-500);
}
a#totop {
    cursor: pointer;
    transition: bottom .2s;
    position: fixed;
    float: right;
    right: 5%;
    bottom: 3%;
    width: fit-content;
    height: fit-content;
    padding: 1em;
    border-top: 2px solid var(--accent-400);
	border-left: 2px solid var(--accent-400);
	border-right: 2px solid var(--accent-800);
	border-bottom: 2px solid var(--accent-800);
    background-image: linear-gradient(var(--accent-500), var(--accent-700));
    color: var(
	--text-100);
    box-shadow: 4px 5px 3px 0px var(
	--background-950);
    text-decoration: none;
    font-weight: bold;
    font-family: system-ui;
}
a#totop:hover {
    bottom: 4%;
}
a.entry {
    transition: background-color 0.4s, transform .5s;
    box-shadow: 3px 4px rgba(0, 0, 0, 0.5);
    font-weight: bold;
    text-decoration: none;
    color: var(--background-900);
    background-image: linear-gradient(var(--text-100), var(--text-200));
    grid-template-columns: min-content auto;
    display: grid;
	height: 3.5em
    align-items: center;
    justify-items: start;
}
a.entry:nth-child(1) {
	border-bottom: none;
}
a.entry > div {
	object-fit: contain;
	height: 3.5em;
	width: 3.5em;
	border-top: 3px solid var(--secondary-300);
	border-left: 3px solid var(--secondary-300);
	border-right: 3px solid var(--secondary-700);
	border-bottom: 3px solid var(--secondary-700);
	align-content: center;
}
a.entry > div > img {
	object-fit: contain;
}
a.entry:nth-child(1) > img a.entry:nth-child(1) > span {
	border-bottom: none;
}
a.entry > span {
    align-content: center;
	width: -moz-available;
    width: -webkit-fill-available;
	height: 3.5em;
    border-top: 3px solid var(--secondary-300);
    border-right: 3px solid var(--secondary-700);
    border-bottom: 3px solid var(--secondary-700);
	padding: 0em 0.5em;
}
a.entry:hover {
	transform: translate(5px, 0px);
	transition: background-color 0.4s, transform .5s;
	color: var(--background-900);
	background-color: var(--text-50);
}
#TOC {
	overflow-wrap: anywhere;
    background-image: linear-gradient(var(--background-800), var(--background-900));
    width: fit-content;
    padding: 2em;
    border-left: 3px solid var(--primary-300);
    border-top: 3px solid var(--primary-300);
    border-right: 3px solid var(--primary-600);
    border-bottom: 3px solid var(--primary-600);
    box-shadow: 1px 1px 0px 0px var(--background-300);
}
#TOC > div {
    grid-auto-flow: column dense;
    text-align: left;
    display: grid;
    grid-template-columns: auto auto;
	grid-template-rows: auto;
    font-size: smaller;
}
#TOC > div > div {
    padding: 0.5em;
}
#TOC > div > div > a{
	display: list-item;
	cursor: pointer;
}
#TOC > div > div > a.one {
    transition: color .2s, text-decoration .2s;
    text-decoration: none;
    font-size: larger;
    color: var(--accent-300);
    list-style: inside square;
}
#TOC > div > div > a.one:hover {
	text-decoration: underline;
	color: var(--accent-200);
}
#TOC > div > div > a.two {
    text-decoration: none;
    transition: color .2s, text-decoration .2s;
    font-size: smaller;
    color: var(--secondary-400);
    margin-left: 2em;
    padding: 2px 20px 2px 2px;
    list-style: inside circle;
}
#TOC > div > div > a.two:hover {
	text-decoration: underline;
	color: var(--secondary-300);
}
#TOC > div > div > a.three {
	text-decoration: none;
	transition: color .2s, text-decoration .2s;
	font-size: smaller;
	color: var(--primary-400);
	margin-left: 4em;
	padding: 2px 20px 2px 2px;
	list-style: inside disc;
}
#TOC > div > div > a.three:hover {
	text-decoration: underline;
	color: var(--primary-300);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--heading);
}
h1[data-heading="true"], h2[data-heading="true"], h3[data-heading="true"], h4[data-heading="true"], h5[data-heading="true"], h6[data-heading="true"] {
	font-family: var(--font);
}
h1 {
	color: var(--accent-400);
	text-shadow: 0px 0px 5px var(--accent-500);
}
h3 {
	color: var(--secondary-400);
	text-shadow: 0px 0px 5px var(--secondary-500);
}
h2 {
	text-shadow: 0px 0px 5px var(--primary-500);
}
#container {
	display: none;
	opacity: 0;
	transition: opacity 5s;
    background-image: linear-gradient(to top, var(--background-950), var(--background-950), var(--background-900));
    box-shadow: 1px 1px 0px 0px var(--text-50);
    margin: 0.5em;
    padding: 2em;
    border-left: 3px solid var(--text-50);
    border-top: 3px solid var(--text-50);
    border-right: 3px solid var(--text-300);
    border-bottom: 3px solid var(--text-300);
    max-width: 70em;
    color: var(--text-100);
    text-align: -webkit-center;
}
a {
	color: var(--accent-500);
}
a:hover {
	transition: color .2s;
	color: var(--accent-400);
}
.orgrid {
	justify-content: center;
	max-width: 60em;
    display: flex;
    grid-gap: 2em;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}
div.orgrid > div {
    flex: 1 0 20em;
}
.grid, .text, .links {
	overflow-x: auto;
	width: -moz-available;
	width: -webkit-fill-available;
    border-left: 3px solid var(--primary-300);
    border-top: 3px solid var(--primary-300);
    border-right: 3px solid var(--primary-600);
    border-bottom: 3px solid var(--primary-600);
    box-shadow: 1px 1px 0px 0px var(--background-300);
}
.grid {
	padding: 2px;
    background-color: var(--background-900);
    display: grid;
    grid-gap: 2px;
    max-width: 50em;
}
.grid:has(> .cell.good.cat) > .cell:hover:nth-child(odd) {
    transition: color .2s;
    color: #4CAF50;
}
.grid:has(> .cell.bad.cat) > .cell:hover:nth-child(even) {
    transition: color .2s;
    color: #E91E63;
}
.grid.twocol {
	grid-template-columns: auto auto;
}
.grid.threecol {
	grid-template-columns: auto auto auto;
}
.grid.fourcol {
	grid-template-columns: auto auto auto auto;
}
.grid.fivecol {
	grid-template-columns: auto auto auto auto auto;
}
.grid.eightcol {
	grid-template-columns: auto auto auto auto auto auto auto auto;
}
.grid.ninecol {
	grid-template-columns: auto auto auto auto auto auto auto auto auto;
}
.text {
	font-size: smaller;
	background-image: linear-gradient(var(--background-800), var(--background-900));
	max-width: 50em;
	padding: 2em;
}
div.text > div > ol > li {
    text-align: left;
    padding-bottom: 1em;
}
div.text > div > ol > li:last-child {
    text-align: left;
    padding-bottom: 0em;
}
div.text > div > ol > li:hover {
	transition: color .2s;
    color: yellow;
}
.links {
    align-content: center;
    display: grid;
    grid-template-rows: auto;
    background-image: linear-gradient(var(--background-800), var(--background-900));
    max-width: 25em;
    padding: 2em;
}
.links > a {
	padding: 5px;
}
.links > a:hover > img {
	transition: filter .2s;
	filter: brightness(1.3);
}
div:has(> .grid) {
	width: -moz-available;
	width: -webkit-fill-available;
}
.cell {
	width: -moz-available;
    width: -webkit-fill-available;
    align-content: center;
    background-image: linear-gradient(var(--primary-700), var(--primary-800));
    padding: 0.5em;
    font-size: small;
}
.cell:hover {
	transition: color .2s;
	color: yellow;
}
.cell.cat {
	font-family: var(--heading);
    background-image: linear-gradient(var(--secondary-500), var(--secondary-600));
    color: var(--text-50);
}
.cell.good {
    background-image: linear-gradient(#8BC34A, #009688);
}
.cell.bad {
    background-image: linear-gradient(#F44336, #9C27B0);
}
.orgrid:has(> div > #backupstrats) > .links {
	grid-row-start: 2;
	grid-column-start: 2;
	max-width: 50em;
}
span.lc {
    -webkit-animation: flicker 1s infinite alternate;
    display: inline-block;
    color: #F44336;
    font-family: Creepster;
    text-shadow: 0px 0px 5px #E91E63;
}
span.lc:hover {
	-webkit-animation: jitter 1.3s infinite, flicker 1s infinite alternate;
}
@-webkit-keyframes flicker
{
	0% {opacity:1;}
	13% {opacity:0.6;}
	27% {opacity:0.8;}
	33% {opacity:0.6;}
	56% {opacity: 1;}
}
@-webkit-keyframes jitter {
	100% {transform: translateX(-0.5px);}
	87% {transform: translateX(-0.2px);}
	42% {transform: translateX(0.3px);}
	26% {transform: translateX(-0.4px);}
	0% {transform: translateX(0px);}
}
@-webkit-keyframes jitter {
	0% { transform: skewX(-15deg); }
	5% { transform: skewX(15deg); }
	10% { transform: skewX(-15deg); }
	5% { transform: skewX(15deg); }
	20% { transform: skewX(0deg); }
	100% { transform: skewX(0deg); }
}
#todo > ul > li {
    list-style: inside circle;
    text-align: justify;
}
code {
    display: inline-block;
    width: fit-content;
    background-color: var(--background-950);
    font-family: Courier New;
}
img.cell {
    overflow: auto;
    height: 10em;
    object-fit: fill;
}