@font-face {
    font-family: 'calligraffitiregular';
    src: url('/fonts/Calligraffiti-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'journal';
    src: url('/fonts/journal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'profontwindowsregular';
    src: url('/fonts/ProFontWindows-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* start with variables, make light default just because. Change to HSL as default to make palette options easier. */
:root {
    --ink: hsl(0, 0%, 8%);
    --paper: hsl(240, 25%, 98%);
    --bg1: hsl(195, 33%, 88%); /* the DARKEST */
    --bg2: hsl(240, 36%, 96%);
    --border1: hsl(209, 49%, 72%);
    --border2: hsl(150, 90%, 33%);
    --banner: hsl(165, 100%, 72%);
    --border3: hsl(39, 100%, 70%);

    --burnt-umber: hsl(70, 69%, 5%);
    --amber: hsl(45, 100%, 40%);
    --lemon: hsl(48, 100%, 50%);
    --jade: hsl(129, 100%, 58%);
    --snow: hsl(0, 0%, 98%);
    --charcoal: hsl(105, 9%, 9%);
    --midnight-green:hsl(117, 100%, 4%);
    --xbox-green: hsl(107, 85%, 26%);
    --olive1: hsl(70, 100%, 33%);
    --yellow1: hsl(61, 97%, 65%);
    --shadow-dark1: hsl(118, 100%, 10%);
    --shadow-lite1: hsl(118, 46%, 44%);
    --leather: hsl(18, 30%, 33%);
    --main-line-color: hsl(234, 62%, 86%);
    --side-line-color: hsl(350, 100%, 91%);

    --font-sans: Cantarell, 'Noto Sans', 'Open Sans', sans-serif;
    --font-serif: 'IBM Plex Serif', 'Source Serif 4', Merriweather, serif;
    --font-mono: 'Fira Code', monospace;
    --font-script: Calligraffiti, cursive;
    --font-cursive: Journal, cursive;
    --font-xbox: 'profontwindowsregular', 'Fira Code', Consolas, monospace;

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

    --pattern-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. */

@media (prefers-color-scheme: dark) {
    :root {
        --ink: hsl(0, 5%, 96%);
        --paper: hsl(0, 9%, 9%);
        --bg1: hsl(0, 8%, 7%);
        --bg2: hsl(0, 3%, 11%);
        --border1: hsl(240, 22%, 19%);
        --border2: hsl(120, 31%, 42%);
        --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: hsl(0, 0%, 8%);
    --paper: hsl(0, 0%, 97%);
    --bg1: hsl(195, 33%, 88%); /* the DARKEST */
    --bg2: hsl(240, 36%, 96%);
    --border1: hsl(211, 47%, 73%);
    --border2: hsl(150, 90%, 33%);
    --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: hsl(0, 0%, 8%);
    --paper: hsl(0, 0%, 95%);
    --bg1: hsl(4, 90%, 60%);
    --bg2: hsl(19, 90%, 60%);
    --border1: hsl(39, 88%, 56%);
    --border2: hsl(79, 97%, 75%);
}

:root:has(#sage:checked) {
    color-scheme: light;
    --ink: hsl(0, 0%, 8%);
    --paper: hsl(0, 0%, 95%);
    --bg1: hsl(120, 25%, 70%);
    --bg2: hsl(125, 21%, 80%);
    --border1: hsl(129, 24%, 50%);
    --border2: hsl(155, 63%, 33%);
}

:root:has(#sky:checked) {
    color-scheme: light;
    --ink: hsl(0, 0%, 8%);
    --paper: hsl(0, 0%, 95%);
    --bg1: hsl(205, 55%, 55%);
    --bg2: hsl(208, 53%, 85%);
    --border1: hsl(217, 42%, 60%);
    --border2: hsl(68, 99%, 85%);
}

:root:has(#amethyst:checked) {
    color-scheme: dark;
    --ink: hsl(0, 5%, 96%);
    --paper: hsl(300, 26%, 7%);
    --bg1: hsl(283, 45%, 16%);
    --bg2: hsl(277, 56%, 24%);
    --border1: hsl(282, 62%, 38%);
    --border2: hsl(250, 71%, 72%);
}

:root:has(#obsidian:checked) {
    color-scheme: dark;
    --ink: hsl(0, 5%, 96%);
    --paper: hsl(0, 9%, 9%);
    --bg1: hsl(0, 8%, 7%);
    --bg2: hsl(0, 3%, 11%);
    --border1: hsl(240, 22%, 19%);
    --border2: hsl(120, 31%, 42%);
}

/* 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) {
    --pattern-size: 8px;
}

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

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

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

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

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

/* Angles can use a variable as well but this is probably enough! Probably TOO much lol */

/* animation! */

.fallingstars:has(#APS-on:checked) {
    animation-play-state: running;
}

.fallingstars:has(#APS-off:checked) {
    animation-play-state: paused;
}

/* LARGE to small --------------------------------------------------------------------- */

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

body {
    font-size: 1.1em;
    margin: 0;
}

/* various custom styles for the body ---------------------- */

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

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

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

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

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

.pronk-body {
    background-color: var(--burnt-umber);
    color: var(--snow);
    font-family: var(--font-mono);
    text-align: center;
    margin: 12px;
}
/* a bit messy but the rest I think will have its own section below */

.vanilla {
    background-color: var(--bg2);
}

.woven {
    background:
    conic-gradient(at 9px calc(100% - 9px),#0000 270deg,var(--woven1) 0) 18px 0,
    linear-gradient(var(--woven2) 9px,#0000 0) 0 9px,
    conic-gradient(at 9px calc(100% - 9px),#0000 90deg,var(--woven2) 0 180deg, var(--woven1) 0), var(--woven3);
    background-size: 36px 36px;
}


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

/* to put a fixed box for control buttons on desktop and scrolling long ways down */
.cornerbox {
    width: 100px;
    @media screen and (min-width: 1300px) {
        position: fixed;
        top: 8px;
        left: 8px;
    }
}

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

/* !! turn main into container -- change from having as default <main> style */
.page-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 obvious I hope */
.center-flex {
    width: min(70em, 100%);
    margin-inline: auto;
    display: flex;
    gap: 1em;
    flex-direction: column;
}

/* this one is meant for images mostly, specifically in the gallery; the widest should be 1280px. min() is 97%, aside from IE and very old Chrome */
.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. max-width is IE9. */
    margin: auto; /* even IE6 can use it!?!?!?! */
}
.center-70 {
    max-width: 70em;
    margin: auto;
}

/* I want a simple not too wide text container */
.center-inline {
    max-inline-size: 66em;
    margin-inline: auto;
}
.center-inline article {
    margin-bottom: 64px;
}

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

/* 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);
    margin-top: 4em;
    padding-bottom: 6em;
}

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

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

/* this is probably too specific BUT is to have an area with gaps have a paper background */

.wallpaper {
    background-color: var(--paper);
}


/* This is all the basic vanilla tags ----------------------------- - - - -- - - - - - -- - - - - -- - - - - - - - */
/* I know giving the article tag itself these defaults can be a pain
 * but most pages here assume it's there so just have to override if want different
*/
article {
    background-color: var(--paper);
    border: var(--border1) 2px solid;
    padding: 12px;
    margin-bottom: 36px;
}

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;
}

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

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

table {
    border-collapse: collapse;
}

td,
th {
    border: 2px solid var(--xbox-green);
    padding: 8px 12px;
    text-align: left;
}


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

.section-title {
    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;
    padding: 2em 0;
    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;
}

/* used on art talk page */
.bordertest3 {
    border-style: solid;
    border-image-slice: 2; /* still need this and it needs to match the width or interesting things happen lol */
    border-image-width: 2px;
    border-image-repeat: repeat round;
    border-image-source: linear-gradient(to bottom, var(--border2), var(--paper));
}

.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;
}

/* this is super rainbow lol*/
.border-rainbow {
    border-style: solid;
    border-image-slice: 2;
    border-image-width: 2px;
    border-image-repeat: repeat round;
    border-image-source: linear-gradient(in hsl longer hue 90deg, red, red);
}

.shadowmere {
    font-size: 2em;
    text-shadow:
    3px 3px 0 hsl(26, 89%, 57%),
    6px 6px 0 hsl(16, 87%, 39%),
    9px 9px 0 hsl(1, 87%, 24%);
}

/* https://www.reddit.com/r/css/comments/1sn9jgx/retro_futuristic_infinite_grid_effect_with_pure/
 * so this made the content of the page angled and the background was just flat normal!?!!?!?
 * I got the animation working tho, it needed @ keyframes lol. but there is a tiny jump when it cycles.
 * animation play state combined with JS to have on/off buttons! https://www.youtube.com/watch?v=z2LQYsZhsFw
 * "One thing to add, wrap your selectors with a :not(prefers-reduced-motion) for the accessibility win as well (some users get motion sickness from this)."
 */
.fallingstars {
    --d: calc(var(--pattern-size)/10);  /* control the gap between stars */
    --_g: var(--bg2) 36deg, #0000 0;
    background:
    conic-gradient(from 162deg at calc(var(--pattern-size) * .5)  calc(var(--pattern-size) * .68), var(--_g)),
    conic-gradient(from 18deg  at calc(var(--pattern-size) * .19) calc(var(--pattern-size) * .59), var(--_g)),
    conic-gradient(from 306deg at calc(var(--pattern-size) * .81) calc(var(--pattern-size) * .59), var(--_g)),
    var(--bg1);
    background-position: 0 calc(var(--pattern-size) * 0.35);
    background-size: calc(var(--pattern-size) + var(--d)) calc(var(--pattern-size) + var(--d));
    animation: moveGrid 2s linear infinite;
    animation-play-state: running;
    /* For the test2.html to have it in a small block instead of the whole page*/
    width: auto;
    height: 50ch;
}
@keyframes moveGrid {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 var(--pattern-size);
    }
}


/* for updated sections, not sure if GREAT but OK */
.aura-updated {
    box-shadow: 0 0 12px var(--border2), 0 0 24px hsl(from var(--border1) h s l / 0.66);
}

/* for the art page - - -- - - - - - - - - - - - - - - - - -- - - - -- - - - */
.color-wheel {
    background-image: repeating-conic-gradient(in hsl longer hue, red, red);
    height: 512px;
    width: 512px;
    border-radius: 50%;
}

.color-wheel-OKLCH {
    background-image: repeating-conic-gradient(in oklch longer hue, red, red);
    height: 512px;
    width: 512px;
    border-radius: 50%;
}

/* PRONK STYLES ============================================================== */
.pronk-header,
.pronk-footer {
    border: 1px solid var(--amber);
    border-radius: 12px;
    box-shadow: inset 0 0 16px 0 var(--amber), 0 0 16px 0 var(--amber);
}
.pronk-header > h1 {
    font-size: 4em;
    text-transform: uppercase;
}

.pronk-main {
    margin: 42px 0;
    @media screen and (width > 600px) {
        max-inline-size: 1280px;
        margin-inline: auto;
        display: grid;
        gap: 1em;
        grid-template-columns: 1fr 1fr;
    }
}

.pronk-footer {
    padding: 64px 0;
    display: flex;
    align-items: center;
    gap: 1em;
    flex-direction: column;

    @media screen and (width > 600px) {
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
    }
}

.pronk-heading {
    font-family: var(--font-script);
    margin: 24px 0;
    color: var(--lemon);
}

.lyrics {
    max-width: 64ch;
    margin: auto;
}

.pronk-article {
    background-color: var(--burnt-umber);
    border: none;
    padding: 16px;
    margin-bottom: 42px;
}

.aura-amber {
    border-radius: 8px;
    box-shadow: 0 0 12px rgb(from var(--amber) r g b / 0.66), 0 0 24px rgb(from var(--amber) r g b / 0.33);
}

.aura-lemon {
    border-radius: 8px;
    box-shadow: 0 0 12px rgb(from var(--lemon) r g b / 0.66), 0 0 24px rgb(from var(--lemon) r g b / 0.33);
}

.aura-jade {
    border-radius: 8px;
    box-shadow: 0 0 12px rgb(from var(--jade) r g b / 0.35), 0 0 24px rgb(from var(--jade) r g b / 0.18);
}


/* rainbow scratch paper! https://github.com/gracebmanning/rainbow-scratch-paper/tree/main/html-css-js */

.scratch-container {
    position: relative;
    width: 100%;
    height: 100dvh;
}

.gradient-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 0;
    background: linear-gradient(in hsl longer hue 0deg, red, red);
}

.scratch-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 10;
    touch-action: none;
}

.scratch-tools {
    position: absolute;
    z-index: 20;
    top: 1rem;
    right: 1rem;
}
.reset-button {
    padding: 0.25rem 1rem;
    border: none;
    border-radius: 0.25rem;
    background: white;
    color: black;
}


/* MEGALO - - -- - - - -- -------------------------------------------------- */

.mega {
    color: var(--charcoal);
    background-color: var(--leather);
}

.wrapper {
    margin-bottom: 64px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: 1fr;
}

/* messing around with https://codepen.io/kevinpowell/pen/dyavyPg */
.lined-paper {
    font-family: var(--font-cursive);
    font-size: 1.8em;
    background: var(--snow);
    padding: 2.5lh 3rem 2rem 5.5rem;
    max-width: 50ch;
    background-image:
    /* the red line */
    linear-gradient(90deg, transparent, transparent 4rem, var(--side-line-color) 4rem, var(--side-line-color) 4.25rem, transparent 4.25rem),
    /*  The top space  */
    linear-gradient( var(--snow), var(--snow) 3lh, transparent 3lh),
    /* the blue lines */
    repeating-linear-gradient(
        transparent,
        transparent calc(1lh - 2px),
                              var(--main-line-color) calc(1lh - 2px),
                              var(--main-line-color) 1lh,
                              transparent 1lh
    );
    box-shadow: 6px 6px 4px 0px hsl(0 0% 10% / 0.5);
    grid-column: col 1 / span  3;
    grid-row: row 1;
}

.typewriter {
    font-family: var(--font-mono);
    font-size: 1.2em;
    background: var(--snow);
    padding: 2rem 4rem 5rem 3rem;
    max-width: 50ch;
    box-shadow: 6px 6px 4px 0px hsl(0 0% 10% / 0.4);
    grid-column: col 1 / span  3;
    grid-row: row 1;
}

.postit {
    font-family: var(--font-cursive);
    font-size: 2em;
    width: 250px;
    height: 240px;
    overflow: hidden;
    padding: 18px;
    background: hsl(60 100% 80%);
    color: hsl(0, 0%, 8%);
    box-shadow: 6px 6px 4px 4px hsl(0 0% 0% / 0.6);
}

.tilt-left {
    transform: rotate(-25deg);
}

.tilt-right {
    transform: rotate(15deg);
}

.floater {
    grid-column: col 3;
    grid-row: row 1;
    z-index: 20;
}

/* X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
 * ! OK here we go the others were like 50 lines or so but Xbox is hueg */

.og-body {
    background-color: var(--midnight-green);
    color: var(--snow);
}
.x360-body {
    background-color: silver;
    color: var(--charcoal);
}

.og-header{
    border: 2px solid var(--olive1);
    color: var(--xbox-green);
    text-align: center;
    margin-bottom: 6em;
}
.x360-header {
    border: 1px solid var(--xbox-green);
    background-color: var(--snow);
    color: var(--xbox-green);
    text-align: center;
    margin-bottom: 6em;
}

.xbox-title {
    font-family: var(--font-xbox);
    color: var(--xbox-green);
}

.capsule {
    @media screen and (width > 66em) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
    }
}

.og-cap {
    border: 2px solid var(--olive1);
    border-radius: 1em 2em 0 1em;
    box-shadow: 0 0 1em var(--shadow-dark1), 0 0 3em var(--shadow-dark2);
    background-color: var(--charcoal);
    margin-bottom: 6em;
}
.x360-cap {
    border: none;
    background-color: var(--snow);
    margin-bottom: 3em;
}
.x360-cap:hover{
    transition: 120ms transform ease-in-out;
    transform: scale(1.1);
}

.circle-icon {
    clip-path: circle(50%);
    text-align: center;
}

.og-footer {
    background-color: var(--midnight-green);
    border: 2px solid var(--olive1);
    margin: 9em 0;
    transition: box-shadow 0.3s;
}
.og-footer:hover {
    box-shadow: 0 0 1em var(--shadow-dark1), 0 0 3em hsl(from var(--shadow-dark1) h s calc(l + 30));
}

.x360-footer {
    background-color: var(--snow);
    border: 2px solid var(--snow);
    margin: 9em 0;
}
.x360-footer:hover {
    border: 2px solid var(--olive1);
}

.og-link {
    border: 2px solid var(--olive1);
    border-radius: 6px 12px 0 6px;
    padding: .25em .5em;
}
.og-link:hover {
    border-color: var(--yellow1);
}

.x360-link {
    border: 2px solid var(--xbox-green);
    padding: .25em .5em;
}


/* BOOKs is tiny though  ---------------------------------------   */
.bookblog {
    font-family: var(--font-mono);
    padding: 36px;
    box-shadow: 6px 6px 4px 0px hsl(0 0% 10% / 0.4);
    /* of course this is invisible on the dark mode but that's kind of funny, turn off the lights and no shadows */
}


/* 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);
}