@font-face {
    font-family: 'calligraffitiregular';
    src: url('/fonts/Calligraffiti-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 
Yes there's an error trianlge in the Neocities editor that says the syntax is wrong BUT
note that fontsquirrel says:
WOFF - Recommended, works in all modern browsers [and this is the only file they provide!]
TTF - Not recommended, replaced by WOFF
EOT - Not recommended, only necessary for IE older than IE9
SVG - No longer supported or required for any browser
*/
/* start with variables, make light default just because. And yes the Neocities editor has a yield sign each time I use it, ignore them, lol */
:root {
    --ink: rgb(20, 20, 20); 
    --paper: rgb(243, 243, 243); 
    --bg2: rgb(240, 241, 244);
    --bg1: rgb(220, 225, 238);
    --border1: rgb(150, 186, 219);
    --border2: rgb(0, 192, 0);
    /* I added in stuff from another file and didn't notice it was HSL instead of RGB. I might go all HSL later if it's not too bothersome */
    --banner: hsl(165, 100%, 72%);
    --border3: hsl(39, 100%, 70%);

    --font-sans: Cantarell, 'Noto Sans', 'Open Sans', sans-serif;
    --font-serif: 'IBM Plex Serif', 'Source Serif 4', serif;
    --font-mono: 'Fira Code', monospace; 
    --font-script: 'calligraffitiregular', script;

    --percent1: 12.5%;
    --percent2: 25%; 

    --size: 32px; 
}

/* and then dark mode default- even tho we're letting users pick color palette, default to one that suits each mode. */

@media (prefers-color-scheme: dark) {
    :root {
      --ink: rgb(245, 244, 244);
      --paper: rgb(24, 20, 20);
      --bg1: rgb(20, 17, 17);
      --bg2: rgb(30, 28, 28);
      --border1: rgb(38, 38, 59);
      --border2: rgb(74, 139, 74);
      --banner: hsl(166, 100%, 6%);
      --border3: hsl(39, 74%, 72%);
    }
}

/* now the different color palettes. After testing, giving each a default light/dark is most practical and pleasing way to handle it. */

:root:has(#light:checked) {
    color-scheme: light;
    --ink: rgb(20, 20, 20); 
    --paper: rgb(243, 247, 248); 
    --bg2: rgb(240, 240, 248);
    --bg1: rgb(220, 226, 228); /* oops, it looks more consistent to keep the dark parts the same in all color themes */
    --border1: rgb(155, 186, 219);
    --border2: rgb(0, 192, 0);
    --banner: hsl(165, 100%, 72%);
    --border3: hsl(39, 100%, 70%);
    /* this is just the default light scheme lol */
}

:root:has(#fire:checked) {
    color-scheme: light;
    --ink: rgb(20, 20, 20); 
    --paper: rgb(243, 243, 243); 
    --bg1: rgb(255, 61, 47);
    --bg2: rgb(253, 116, 53);
    --border1: rgb(241, 173, 44);
    --border2: rgb(119, 207, 79);
}

:root:has(#sage:checked) {
    color-scheme: light;
    --ink: rgb(20, 20, 20); 
    --paper: rgb(243, 243, 243); 
    --bg1: rgb(159, 197, 159);
    --bg2: rgb(192, 214, 194);
    --border1: rgb(191, 233, 182);
    --border2: rgb(39, 172, 94);
}

:root:has(#sky:checked) {
    color-scheme: light;
    --ink: rgb(20, 20, 20); 
    --paper: rgb(243, 243, 243); 
    --bg1: rgb(54, 131, 185);
    --bg2: rgb(153, 191, 224);
    --border1: rgb(108, 190, 253);
    --border2: rgb(24, 206, 78);
}

:root:has(#amethyst:checked) {
    color-scheme: dark; 
    --ink: rgb(245, 244, 244);
    --paper: rgb(22, 13, 22);
    --bg1: rgb(48, 22, 58);
    --bg2: rgb(80, 27, 95);
    --border1: rgb(120, 37, 156);
    --border2: rgb(74, 139, 74);
}

:root:has(#obsidian:checked) {
    color-scheme: dark; 
    --ink: rgb(245, 244, 244);
    --paper: rgb(24, 20, 20);
    --bg1: rgb(20, 17, 17);
    --bg2: rgb(30, 28, 28);
    --border1: rgb(38, 38, 59);
    --border2: rgb(74, 139, 74);
}

/* background patterns determined by conic radient percents */

:root:has(#pa:checked) {
    --percent1: 12.5%;
    --percent2: 25%; 
}

:root:has(#pb:checked) {
    --percent1: 6.25%;
    --percent2: 12.5%; 
}

:root:has(#pc:checked) {
    --percent1: 3%;
    --percent2: 6.25%; 
}

/* size */

:root:has(#size8:checked) {
    --size: 8px;
}

:root:has(#size16:checked) {
    --size: 16px;
}

:root:has(#size32:checked) {
    --size: 32px;
}

:root:has(#size48:checked) {
    --size: 48px;
}

:root:has(#size64:checked) {
    --size: 64px;
}

:root:has(#size98:checked) {
    --size: 98px;
}

/* Angles can use a variable as well but this is probably enough! */


/* --------------------------------------------------------------------- */

html {
    color: var(--ink);
  	font-size: 1rem;
    font-family: var(--font-sans);
    line-height: 1.5; 
    color-scheme: dark light;
}

body {
    background-color: var(--bg1);
    margin: 0; 
}

.checkers {
    background-image: linear-gradient(90deg, var(--bg2) 50%, transparent 50%), linear-gradient(var(--bg2) 50%, transparent 50%);
    background-size: var(--size) var(--size);
}
.checkersmall {
    background-image: linear-gradient(90deg, var(--bg2) 50%, transparent 50%), linear-gradient(var(--bg2) 50%, transparent 50%);
    background-size: 8px 8px;
}

.kaleido {
    background-image: repeating-conic-gradient(var(--bg1) 0 var(--percent1), var(--bg2) 0 var(--percent2));
    background-size: var(--size) var(--size);
}

/* the others I made playing around with tutorials but this one I yanked from css-pattern.com to edit */
.stars {
    --d: calc(var(--size)/10);  /* control the gap between stars */
    --_g: var(--bg2) 36deg, #0000 0;
    background:
      conic-gradient(from 162deg at calc(var(--size) * .5)  calc(var(--size) * .68), var(--_g)),
      conic-gradient(from 18deg  at calc(var(--size) * .19) calc(var(--size) * .59), var(--_g)),
      conic-gradient(from 306deg at calc(var(--size) * .81) calc(var(--size) * .59), var(--_g)),
      var(--bg1);
    background-position: 0 calc(var(--size) * 0.35);
    background-size: calc(var(--size) + var(--d)) calc(var(--size) + var(--d));
}

.cubes {
    background:
        repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--bg2) 0 50%) calc(var(--size)/2) calc(var(--size)*tan(30deg)/2),
        repeating-conic-gradient(from 30deg,var(--bg1) 0 60deg,var(--border1) 0 120deg,var(--bg2) 0 50%);
    background-size: var(--size) calc(var(--size)*tan(30deg));
}

.rhombic {
    background:
    conic-gradient(from -45deg,var(--bg1) 90deg,#0000 0 180deg,var(--bg2) 0 270deg,#0000 0)
    0 calc(var(--size)/2)/var(--size) var(--size),
    conic-gradient(from 135deg at 50% 0,var(--bg1) 90deg,var(--bg2) 0)
    0 0/calc(2*var(--size)) var(--size);
}

/* a special 404 page */
.pagenotfound {
    background-color: rgb(255, 165, 0);
    margin: 0 auto;
    width: 50em;
}

/* and now the basic website stuff ------------------------------------- */
.page-header {
    background-color: var(--bg2);
    border-bottom: 3px solid var(--border1);
    padding: 1em 0;
    margin-bottom: 1em;
}

/* the h1 at the top of the page- */
.fancy-title {
    font-family: var(--font-script);
    text-align: center;
}

main {
    margin: 32px 18px 72px 18px;
    container-name: main;
    container-type: inline-size;
}

/* contents of the <main> when want lots of boxes; @media is awkward but best option ATM */
.grid-main {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(min(536px, 100%), 1fr));
    @media (width > 600px) {
        margin: 0 2em; /* need a little breathing room on the sides */
    }
}

/* this one is meant for TEXT in larger amounts */
.center-inline {
    width: min(70em, 100%);
    margin-inline: auto;
}

/* this one is meant for images mostly, specifically in the gallery; the widest should be 1280px */
.center-images {
    width: min(calc(1300px + 2em), 100%);
    margin-inline: auto;
}

.center-narrow {
    max-width: 45em; /* em is eternal. CH only goes back to IE 11 but is basically 100% now */
    margin: auto; /* even IE6 can use it!?!?!?! */
}

.twocol {
    @media (width > 1100px) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
        max-inline-size: 1100px;
        margin-inline: auto;
    }
}

.twocol > div {
    display: flex;
    gap: 1em;
    flex-direction: column;
}

/* putting links here for long pages, also an excuse to play with this newer CSS */
.page-footer {
    background-color: var(--paper);
    border-top: 3px solid var(--border1);
    container-name: navbox;
    container-type: inline-size;
    margin-top: 4em;
    padding-bottom: 6em;
}

.bottomnav {
    display: flex;
    align-items: center; 
    gap: 12px;
    flex-direction: column; 
    @container navbox (width > 1200px) {
        flex-direction: row;
        justify-content: space-around;
    }
}

.statblock {
    background-color: var(--bg2);
    border: 2px dashed var(--border1);
    padding: 1em;
    margin: 2em;
    display: flex;
    gap: 12px;
    flex-direction: column;
}


/* This is all the basic vanilla content----------------------------- */
article {
    background-color: var(--paper);
    border: var(--border1) 2px solid;
    padding: 12px;
}

aside {
    padding: 0 1em;
    border-right: var(--border1) 4px dotted; 
}

blockquote {
    margin: 1em;
    padding: 1em;
    border: var(--border2) 1px solid;
}

code {
    font-family: var(--font-mono);
    font-size: inherit;
}

h1, 
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
    margin: 0;
    text-wrap: balance; 
}

ol, 
ul {
    padding: 0.5em;
    list-style-position: inside;
}

p {
    font-size: 1.1em;
    text-wrap: wrap;
}

img, 
picture, 
svg, 
video {
    max-width: 100%;
    object-fit: contain;
    aspect-ratio: 1;
}


/* Fancy stuff for the link page--------------------------------------- */

.section-title {
    background-color: var(--paper);
    padding: 8px; 
}

a:hover, 
a:focus-visible {
    text-decoration-color: var(--border2);
}

.littlelink {
    border: 2px solid var(--border1);
    border-radius: 8px;
    padding: .25em;
}
.littlelink:hover {
    border-color: var(--border2);
}


/* stuff for the charmander --------------------------------------------- */

.charmander {
    margin-bottom: 8em;
    text-align: center;
}
.charmander > p {
    max-width: 64ch;
    margin: auto;
}

.chara-banner {
    background-color: var(--banner);
    border: solid var(--border3) 2px;
    margin-bottom: 1em;
}

/* some fancy image stuff, best explained by using ---------------------- */

.clip-bottom-right {
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.clip-top-left {
    clip-path: polygon(100% 0, 0% 100%, 0 0);
}

.grid3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    justify-content: center;
}

.bordertest10 {
  border-image-slice: 7 7 7 7;
  border-image-width: 12px 12px 12px 12px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: round round;
  border-image-source: url("img/tile10.png");
  border-style: solid;
  padding: 36px;
}

/* Form related things ----------------------------------------------------- */

.formbox {
    container-name: formbox;
    container-type: inline-size;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.tamedots {
    display: flex;
    align-items: stretch; 
    justify-content: center;
    flex-wrap: wrap;
    gap: 2em;

    @container formbox (max-width: 750px){
        flex-direction: column;
        align-items: start;
    }
}

fieldset {
    border: 2px solid var(--border1);
}

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

button {
    border: none;
    border-radius: 1em;
    cursor: pointer;
    font-weight: 700;
    padding: 1em;
}

input[type="radio"] {
    appearance: none;
    margin: 0;
    color: currentColor;
    width: 1.5em;
    height: 1.5em;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: grid;
    place-content: center;
    cursor: pointer;
}

input[type="radio"]:checked,
input[type="radio"]:hover {
    color: var(--border2);
}

input[type="radio"]::before {
    content: "";
    width: .5em;
    height: .5em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--border2);
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

.shiny-button {
    background-color: var(--paper);
    border: var(--border2) 1px solid;
    border-radius: .5em;
    padding: .5em 1em;
}

.shiny-button:hover {
    box-shadow: 0 0 12px 0 var(--border2);
}

.shiny-button:active {
    box-shadow: 0 0 24px 0 var(--border2);
    transform: translateY(6px);
}