/* Picotron Colors */
/* names + hexcodes from https://picotron.fandom.com/wiki/Palette */
:root {
--black: #000000;
--dark-blue: #1D2B53;
--dark-purple: #7E2553;
--dark-green: #008751;
--brown: #AB5236;
--dark-grey: #5F574F;
--light-grey: #C2C3C7;
--white: #FFF1E8;
--red: #FF004D;
--orange: #FFA300;
--yellow: #FFEC27;
--green: #00E436;
--blue: #29ADFF;
--lavender: #83769C;
--pink: #FF77A8;
--light-peach: #FFCCAA;
--true-blue: #2463B0;
--teal: #00A5A1;
--purple: #654688;
--dark-teal: #125359;
--dark-brown: #742F29;
--darker-grey: #452D32;
--medium-grey: #A28879;
--light-pink: #FFACC5;
--dark-red: #B9003E;
--dark-orange: #E26B02;
--lime-green: #95F042;
--medium-green: #00B251;
--light-blue: #64DFF6;
--mauve: #BD9ADF;
--magenta: #E40DAB;
--peach: #FF8557;
}
html {
background: var(--white);
color: var(--black);
}
/* Inspired by "This Page is a truly naked, brutalist html quine" https://secretgeek.github.io/html_wysiwyg/html.html
with bonuses taken from https://startr.style/brutalism/
*/
/* Open the head for display, but only for title and meta */
head {display: block}
title, meta, link { display: block; }
meta[name="modified"]::before {
content: "" / '';
}
meta[name="revision"]::before {
content: "" / '';
}
meta[name="created"]::before {
content: "" / '';
}
link[href]::before {content: "" / '';}
link {overflow: auto;}
/* Sticky Nav Bar */
nav {
position: sticky;
top: 0;
background: var(--white);
padding: 0.2em;
text-align: center;
}
/* No long href in Nav bar */
nav a[href]::before {
content: '';
}
/* Cool down the noise of the structure tags */
*::before,*::after {
color:var(--light-peach);
font-weight:100;
font-size:1rem;
transition: all 0.3s ease;
}
*:hover::after, /* a::after, a::before */
*:hover::before {
color: var(--lavender);
}
/* Forgive me for the repatition */
/* add before and after tags for the listed eliments via tags */
/* the / '' as alt text should hopefully make this still screen reader friendly? */
a::before {content:'' / ''}
a::after {content:'' / ''}
abbr::before {content:'' / ''}
abbr::after {content:'' / ''}
address::before {content:'' / ''}
address::after {content:'' / ''}
article::before {content:'' / ''}
article::after {content:'' / ''}
aside::before {content:'' / ''}
blockquote::before {content:'' / ''}
blockquote::after {content:'
' / ''}
body::before {content:'' / ''}
body::after {content:'' / ''}
/* br */
cite::before {content:'' / ''}
cite::after {content:'' / ''}
code::before {content:'' / ''}
code::after {content:'' / ''}
details::before {content:'' / ''}
details::after {content:' ' / ''}
del::before {content:'' / ''}
del::after {content:'' / ''}
em::before {content:'' / ''}
em::after {content:'' / ''}
footer::before {content:'' / ''}
h1::before {content:'' / ''}
h1::after {content:'
' / ''}
h2::before {content:'' / ''}
h2::after {content:'
' / ''}
h3::before {content:'' / ''}
h3::after {content:'
' / ''}
h4::before {content:'' / ''}
h4::after {content:'
' / ''}
h5::before {content:'' / ''}
h5::after {content:'
' / ''}
h6::before {content:'' / ''}
h6::after {content:'
' / ''}
head::before {content:'' / ''}
head::after {content:'' / ''}
header::before {content:'' / ''}
header::after {content:'' / ''}
html::before {content:'' / ''}
html::after {content:'' / ''}
ins::before {content:'' / ''}
ins::after {content:'' / ''}
main::before {content:'' / ''}
main::after {content:'' / ''}
mark::before {content:'' / ''}
mark::after {content:'' / ''}
menu::before {content:'' / ''}
nav::before {content:'' / ''}
title::before {content:'' / ''}
title::after {content:'' / ''}
p::before {content:'' / ''}
p::after {content:'
' / ''}
pre::before {content:'' / ''}
pre::after {content:'' / ''}
q::before {content:'' / ''}
q::after {content:'
' / ''}
s::before {content:'' / ''}
s::after {content:'' / ''}
samp::before {content:'' / ''}
samp::after {content:'' / ''}
section::before {content:'' / ''}
section::after {content:'' / ''}
strong::before {content:'' / ''}
strong::after {content:'' / ''}
sub::before {content:'' / ''}
sub::after {content:'' / ''}
summary::before {content:'' / ''}
summary::after {content:'' / ''}
sup::before {content:'' / ''}
sup::after {content:'' / ''}
table::before {content:'' / ''}
table::after {content:'
' / ''}
time::before {content:'' / ''}
title::before {content:'' / ''}
title::after {content:'' / ''}
u::before {content:'' / ''}
u::after {content:'' / ''}
var::before {content:'' / ''}
var::after {content:'' / ''}
/* Links */
a[href]::before {content: "" / ''}