/* GNU General Public License v3.0
# Main HTML is an accessibility aware template putting users and web developers first, Copyright (C) 2025 Andy Futcher. See for more
# This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see .
## Main.HTML not modified from original. Date: 2025-07-23 ### --> */
/* Main HTML Theme Colours */
:root { /* Page Boundaries */
--page-width:1040px;
--page-margin:auto; /*auto*/
--page-left:0vw;
--border-width:1px;
--nav-height:80px;
--radiuses:.25rem;
--spacing:1rem;
--z-limit:10;
/* Dark Colours */
--header:#1e1e1e;--header-text:#ddd9d5;
--background:#212529;--text:#ddd9d5;--text-shadow:#000;
--primary:#0d6efd;--secondary:#64666c;--disabled:#242a2f;
--surface:#1e1e1e;--border:#333b42;--flex:#2c2c2c;
--link:#6ea8fe;--link-hover:#9ec5fe;
--footer:#1e1e1e;--footer-text:#e0e0e0;
--table-header:#343a40;--table-border:#495057;
--code:#343a40;--code-text:#f08080;
--button:var(--primary,#0d6efd);--button-text:#fff;--button-hover:#0b5ed7;
--input:#2c2c2c;--input-border:#495057;--input-focus-shadow:0 0 0.25rem 0.15rem #0d6efd80;
--highlight:#664d03;--highlight-text:#fff3cd;
--scrollbar:#495057;--scrollbar-track:#2c2c2c;
--blockquote-border:var(--primary,#007bff);
} body[class*="light"] {color-scheme:light; /* Light Mode */
--header:#d9d7d0;--header-text:#23272b;
--background:#fffcf7;--text:#343a40;--text-shadow:#fff;
--primary:#007bff;--secondary:#9ba2a6;--disabled:#d0cec6;
--surface:#f0eee8;--border:#d1cfc7;--flex:#fff;
--link:var(--primary,#007bff);--link-hover:#409eff;
--footer:#343a40;--footer-text:#f8f9fa;
--table-header:#c2b9af;--table-border:#887e74;
--code:#e2e1e4;--code-text:#c7254e;
--button:var(--primary,#007bff);--button-text:#fff;--button-hover:#0056b3;
--input:#fff;--input-border:#ced4da;--input-focus-shadow:0 0 0.25rem 0.15rem #0d6efd80;
--highlight:#fff3cd;--highlight-text:#664d03;
--scrollbar:#ced4da;--scrollbar-track:#fff;
--blockquote-border:var(--primary,#007bff);
}
/* Main HTML Special Effects */
:root {--rainbow-gradient:linear-gradient(90deg,rgb(229,0,0) 0px,rgb(230,142,0) 20%,rgb(230,214,0) 40%,rgb(0,128,0) 60%,rgb(0,76,255) 80%,rgb(118,1,136) 100%);
} .rainbow:not(.background),rainbow:not(.background) {background:var(--rainbow-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
} .rainbow.background,rainbow.background {padding-left:var(--radiuses,2px);padding-right:var(--radiuses,2px);color:var(--background,#fff);background-image:var(--rainbow-gradient);border-radius:var(--radiuses,.25rem);
} .color-pop {filter:contrast(2);
} body[class*="nocode"] *:not(pre)>code {display:none;
}
/* Main HTML Tooltips */
[role="tooltip"],.tooltip {position:absolute;inline-size:max-content;max-inline-size:320px;padding:1em 0.75em;margin:0;left:auto;color:black;font-size:1rem;font-weight:normal;line-height:normal;border-radius:5px;background:white;text-align:center;will-change:filter;opacity:0;white-space:break-spaces;transform:translateX(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));transition:opacity 200ms ease,transform 200ms ease;filter:drop-shadow(0 3px 3px hsl(0 0% 0% / 15%)) drop-shadow(0 12px 12px hsl(0 0% 0% / 15%));pointer-events:none;user-select:none;--tooltip-rtl:-1;inset-inline-start:50%;inset-block-end:calc(100% + 1em);--tooltip-x:calc(50% * var(--tooltip-rtl,1));text-shadow:none;
} [role="tooltip"]:dir(rtl),.tooltip:dir(rtl) {--tooltip-rtl:1;} :has(>[role="tooltip"],>.tooltip) {position:relative;cursor:pointer;
} [role="tooltip"]::after,.tooltip::after {content:'';background:white;position:absolute;z-index:-1;inset:0;mask:var(--tooltip);--tooltip:conic-gradient(from -30deg at bottom,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) bottom / 100% 50% no-repeat;inset-block-end:calc(10px * -1);border-block-end:10px solid transparent;
} @media (min-width:720px) {
[role="tooltip"][class*="right"],.tooltip.right {inset-inline-start:calc(100% + 1em);inset-block-end:50%;--tooltip-y:50%;--tooltip-x:calc(0% * var(--tooltip-rtl,1));text-align:start;
} [role="tooltip"][class*="right"]::after,.tooltip.right::after {--tooltip:conic-gradient(from 60deg at left,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) left / 50% 100% no-repeat;inset-block-end:0px;inset-inline-start:calc(10px * -1);border-inline-start:10px solid transparent;
} [role="tooltip"][class*="right"]:dir(rtl)::after,.tooltip.right:dir(rtl)::after {--tooltip:conic-gradient(from -120deg at right,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) right / 50% 100% no-repeat;
}
} [role="tooltip"][class*="bottom"],.tooltip.bottom {inset-inline-start:50%;inset-block-start:calc(100% + 1em);--tooltip-x:calc(50% * var(--tooltip-rtl,1));inset-block-end:auto;
} [role="tooltip"][class*="bottom"]::after,.tooltip.bottom::after {--tooltip:conic-gradient(from 150deg at top,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) top / 100% 50% no-repeat;inset-block-start:calc(10px * -1);border-block-start:10px solid transparent;
} :has(>[role="tooltip"]):is(:hover,:focus-visible,:active)>[role="tooltip"],:has(>.tooltip):is(:hover,:focus-visible,:active)>.tooltip {opacity:1;transition-delay:200ms;
} .icon [role="tooltip"],.icon .tooltip,icon [role="tooltip"],icon .tooltip {filter:invert(1);
}
/* Main HTML Dialog: Alert */
dialog.alertdialog #consent-dialog .toggle,dialog[role="alertdialog"] #consent-dialog .toggle {float:right;margin:1em;
} /* Main HTML Dialog: Notifications */
dialog.notification .warning,dialog[role="status"] .warning,dialog.noscript>div {color:#fff;background-color:darkred;
} dialog.notification .amber,dialog[role="status"] .amber,dialog.notification .gold,dialog[role="status"] .gold {color:#000;background-color:goldenrod;
} dialog.notification .blue,dialog[role="status"] .blue {color:#fff;background:#0d6efd;
} dialog.notification .primary,dialog[role="status"] .primary {color:var(--button-text);background:var(--button);
} dialog.notification .highlight,dialog[role="status"] .highlight {color:var(--highlight-text);background:var(--highlight);
} dialog.notification div>p,dialog[role="status"] div>p {padding:0.5em;
} dialog.notification div>p>*,dialog[role="status"] div>p>* {padding:0 0.5em;vertical-align:baseline;
} dialog.notification div>p>button:empty,dialog[role="status"] div>p>button:empty {display:block;position:relative;margin:0.3em 1em;float:right;font-family:sans-serif;color:inherit;transform:scale(2);background:transparent;border:none;outline:none;box-shadow:none !important;cursor:pointer;
} dialog.notification #notification-dismiss:empty::before,dialog[role="status"] #notification-dismiss:empty::before {content:'×';
}
/* Main HTML Navigation */
body>nav,body>[role="navigation"] {display:block;
} /* Main HTML Footer */
footer>div .links,[role="contentinfo"]>.links {width:100%;align-items:stretch;gap:0;
} footer>div .links>*,[role="contentinfo"]>.links>* {align-items:flex-start;width:auto;
} footer>div .links ul,[role="contentinfo"]>.links ul {list-style-type:none;padding-inline-start:1em;border-left:3px double var(--link);border-left:3px double color-mix(in srgb,var(--link) 50%, transparent);
} footer>div .links ul li,[role="contentinfo"]>.links ul li {line-height:2;
} footer>div .links ul li:first-child,[role="contentinfo"]>.links ul li:first-child {margin-bottom:0.5em;
} footer>div .links a,[role="contentinfo"]>.links a {color:inherit;white-space:nowrap;
} footer>div .social,[role="contentinfo"]>.social {font-size:0px;float:right;margin-left:var(--spacing,1rem);
} footer>div .social>* {display:inline-block !important;margin-left:0.3rem;text-indent:3rem;width:2.5rem;height:2.5rem;overflow:hidden;vertical-align:bottom;background-size:2.5rem 2.5rem;
} footer>div .social>*.youtube {width:3rem;height:2.5rem;background-size:3rem 2.5rem;
} footer>div .social>*.whatsapp {background-size:3rem 3rem;background-position:-0.25rem -0.25rem;
} footer>div .accessibility,[role="contentinfo"]>.accessibility {width:100%;
} footer>div .accessibility>*,[role="contentinfo"]>.accessibility>* {display:block;margin:calc(var(--spacing,1rem) * 0.5);color:var(--text);float:right;
} /* Main HTML Footer Tools */
#consent-manage::before,.consent-manage::before {content:'✅ Consent';
} body[class*="consented"] #consent-manage::before,body[class*="consented"] .consent-manage::before {content:'🍪 Preferences';
} #color-scheme::before,.color-scheme::before {content:'☀️ Light Mode';
} body[class*="light"] #color-scheme::before,body[class*="light"] .color-scheme::before {content:'🌠 Dark Mode' !important;
} #reader-scheme::before,.reader-scheme::before {content:'🅰 Reader Font';
} body[class*="reader"] #reader-scheme::before,body[class*="reader"] .reader-scheme::before {content:'🇧 Theme Font' !important;
} #nocode-mode::before,.nocode-mode::before {content:'🆓 No Code';
} body[class*="nocode"] #nocode-mode::before,body[class*="nocode"] .nocode-mode::before {content:'🆔 Show Code';
} /* Main HTML Social Icons */
.icon.linkedin,icon.linkedin {background-image:url('data:image/svg+xml,');
} .icon.youtube,icon.youtube {width:1.25em;height:1em;background-size:1.25em 1em;background-image:url('data:image/svg+xml,');
} .icon.facebook,icon.facebook {background-image:url('data:image/svg+xml,');
} .icon.instagram,icon.instagram {background-image:url('data:image/svg+xml,');
} .icon.whatsapp,icon.whatsapp {background-size:1.3em 1.3em;background-position:-0.1em -0.1em;background-image:url('data:image/svg+xml,');
} .icon.github,icon.github {background-image:url('data:image/svg+xml,');
} .icon.bsky,icon.bsky {background-image:url('data:image/svg+xml,');
} .icon.discord,icon.discord {background-image:url('data:image/svg+xml,');
} .icon.main,icon.main {width:2.842em;height:1.1em;background-size:2.842em 1.2em;background-image:url('data:image/svg+xml,');
} .icon.mainjs,icon.mainjs {width:3.315em;height:1em;background-size:3.315em 1.025em;background-image:url('data:image/svg+xml,');
} .icon.mainicon,icon.mainicon {width:1.684em;height:1em;background-size:1.684em 1.025em;background-image:url('data:image/svg+xml,');
}
/* Main HTML Code: CSS */
code.text {color:var(--text);
} code .element,code.element {color:grey;
} code .html,code.html {color:dodgerblue;
} code .attr,code.attr {color:lightskyblue;
} code .selector {color:gold;
} code .rule {color:lightskyblue;
} code .value {color:indianred;
} code .string {color:greenyellow;
} body[class*="light"] code.text {color:var(--text);
} body[class*="light"] code .element,body[class*="light"] code.element {color:grey;
} body[class*="light"] code .html,body[class*="light"] code.html {color:dodgerblue;
} body[class*="light"] code .attr,body[class*="light"] code.attr {color:deepskyblue;
} body[class*="light"] code .selector {color:darkgoldenrod;
} body[class*="light"] code .rule {color:deepskyblue;
} body[class*="light"] code .value {color:indianred;
} body[class*="light"] code .string {color:limegreen;
}
/* Main HTML Containers: Slideshow */
.container.slideshow,container.slideshow {background-color:var(--header);box-shadow:0 0 1rem rgba(0,0,0,0.2);
} .container.slideshow>img,container.slideshow>img {opacity:0;transition:opacity 1s ease-in-out,z-index 1s ease-in-out;animation:fadeAnimation 15s infinite; /* Total duration:15s (5s per image, 3 images) */
} @keyframes fadeAnimation {
0% { opacity:0;z-index:calc(var(--z-limit,10) - 6); }
6.66% { opacity:1;z-index:calc(var(--z-limit,10) - 5); } /* Fade in (1s of 15s cycle) */
26.66% { opacity:1;z-index:calc(var(--z-limit,10) - 5); } /* Stay visible (3s of 15s cycle) */
33.33% { opacity:0;z-index:calc(var(--z-limit,10) - 6); } /* Fade out (1s of 15s cycle) */
100% { opacity:0;z-index:calc(var(--z-limit,10) - 6); } /* Remain hidden until next cycle */
} .container.slideshow>img:nth-child(1),container.slideshow>img:nth-child(1) {animation-delay:0s;
} .container.slideshow>img:nth-child(2),container.slideshow>img:nth-child(2) {animation-delay:5s; /* Delay by one image's duration (5s) */
} .container.slideshow>img:nth-child(3),container.slideshow>img:nth-child(3) {animation-delay:10s; /* Delay by two images' duration (10s) */
} /* Add more .slideshow-image:nth-child() rules and adjust delays for more images */