*
{ margin: 0
; padding: 0
}

:root
{ --padding: 12px
; --max-width: 640px
; --green-background: #142608
; --green-foreground: #e9f2e2
; --green-highlight: #81b65b
; --purple-background: #160d1d
; --purple-foreground: #ebd9f7
; --purple-highlight: #9e69c4
; --high-contrast-dark-background: #000000
; --high-contrast-dark-foreground: #ffffff
; --high-contrast-dark-highlight: #228833
; --high-contrast-light-background: #ffffff
; --high-contrast-light-foreground: #000000
; --high-contrast-light-highlight: #228833
; --gruvbox-dark-background: #282828
; --gruvbox-dark-foreground: #ebdbb2
; --gruvbox-dark-highlight: #b8bb26
; --gruvbox-light-background: #fbf1c7
; --gruvbox-light-foreground: #3c3836
; --gruvbox-light-highlight: #79740e
}

/* BODY & BACKGROUND */
body
{ font-family: Verdana, sans-serif
; tab-size: 4
; background-image: url('./assets/background.jpg')
; background-attachment: fixed
; background-size: cover
; background-color: hsl(from #867b15 h s 5%) /* dominant (most common) color of background-image */
; height: 100vh
; line-height: 1.3
}

.bg
{ color: var(--foreground)
; background-color: var(--background)
; padding: 122px var(--padding) 46px /* 122.33332824707031 46.333343505859375 */
; max-width: calc(var(--max-width) + 2*var(--padding))
; margin: 0 auto
; min-height: 100%
}

/* HEADER & TITLEBAR */
header
{ background-color: var(--background)
; max-width: var(--max-width)
; padding: var(--padding) calc(2*var(--padding))
; margin-left: calc(-1*var(--padding))
; position: fixed
; top: 0
; width: 100%
; z-index: 1
; border-bottom: 2px solid var(--highlight)
}

#titlebar
{ display: flex
; justify-content: space-between
; align-items: center
}

#titlebar img
{ width: 64px
; height: 64px
}

#titlebar h1
{ color: var(--highlight)
; font-size: 48px
}

header nav
{ margin: 0
; margin-top: var(--padding)
}

header ul
{ list-style-type: none
; display: flex
; justify-content: space-between
}

/* FOOTER */
footer
{ background-color: var(--background)
; text-align: right
; max-width: var(--max-width)
; padding: var(--padding) calc(2*var(--padding))
; margin: 0 calc(-1*var(--padding))
; width: 100%
; position: fixed
; bottom: 0
; z-index: 1
; border-top: 2px solid var(--highlight)
}

/* MAIN */
main
{ margin: var(--padding)
; max-width: var(--max-width)
}

h2 { color: var(--highlight); padding-bottom: calc(var(--padding)/2) }
h3 { color: var(--highlight); padding-bottom: calc(var(--padding)/2) }

/* LINKS */
a
{ color: var(--highlight)
; font-weight: bold
}

a[href^="http"]::after { content: "↗" }

a:hover { color: var(--foreground) }

/* SELECTION */
::selection
{ color: var(--background)
; background: var(--foreground)
}

a::selection
{ color: var(--background)
; background-color: var(--highlight)
}

/* BLOCKQUOTE */
blockquote
{ border: 2px solid var(--highlight)
; margin: var(--padding) 0
; padding: var(--padding)
; font-style: italic
}

/* IMAGES */
img[src$=".svg"] { filter: var(--filter) }

/* CODE BLOCKS */
pre
{ border: 2px solid var(--highlight)
; margin: var(--padding) 0
; padding: var(--padding)
}

pre:has(> code) { white-space: normal }

code
{ display: flex
; flex-direction: column
; white-space: pre-wrap
; counter-reset: line-count
; font-family: "courier new", monospace
}

code > span
{ position: relative
; padding-left: 2em
}

code > span::before
{ counter-increment: line-count
; content: counter(line-count, decimal-leading-zero)
; color: var(--highlight)
; left: 0
; position: absolute
; font-weight: bold
}

/* HOVERTEXT */
.hover-text
{ position: relative
; text-decoration: underline var(--foreground) solid 1px
}

.hover-text:before
{ content: attr(text)
; visibility: hidden
; opacity: 0
; width: max-content
; background-color: var(--background)
; color: var(--foreground)
; border: 2px solid var(--highlight)
; padding: calc(var(--padding)/2) var(--padding)
; position: absolute
; z-index: 3
; left: 50%
; bottom: 1.3em
; transform: translate(-50%)
; transition: opacity 0.3s, visibility 0.3s
}

.hover-text:hover:before
{ visibility: visible
; opacity: 1
}

/* THEME INPUT RADIO */
body { position: relative }

label .hover-text:before { bottom: 42px }

input[name="theme"] { display: none }

label
{ z-index: 2
; position: fixed
; bottom: 2px /* 12 - 8 - 2 */
; --offset: calc(50% - var(--max-width)/2 - 4px)
}

label[for="green"] { left: var(--offset) }
label[for="purple"] { left: calc(var(--offset) + 32px) }
label[for="high-contrast-dark"] { left: calc(var(--offset) + 2*32px) }
label[for="high-contrast-light"] { left: calc(var(--offset) + 3*32px) }
label[for="gruvbox-dark"] { left: calc(var(--offset) + 4*32px) }
label[for="gruvbox-light"] { left: calc(var(--offset) + 5*32px) }

label img
{ width: 2em
; height: 2em
}

label[for="green"] .hover-text:before
{ background-color: var(--green-background)
; color: var(--green-foreground)
; border: 2px solid var(--green-highlight)
}

#green:checked ~ .bg
{ --background: var(--green-background)
; --foreground: var(--green-foreground)
; --highlight: var(--green-highlight)
; --filter:
	invert(62%)
	sepia(43%)
	saturate(444%)
	hue-rotate(52deg)
	brightness(98%)
	contrast(90%)
}

label[for="purple"] .hover-text:before
{ background-color: var(--purple-background)
; color: var(--purple-foreground)
; border: 2px solid var(--purple-highlight)
}

#purple:checked ~ .bg
{ --background: var(--purple-background)
; --foreground: var(--purple-foreground)
; --highlight: var(--purple-highlight)
; --filter:
	invert(58%)
	sepia(13%)
	saturate(3730%)
	hue-rotate(225deg)
	brightness(81%)
	contrast(85%)
}

label[for="high-contrast-dark"] .hover-text:before
{ background-color: var(--high-contrast-dark-background)
; color: var(--high-contrast-dark-foreground)
; border: 2px solid var(--high-contrast-dark-highlight)
}

#high-contrast-dark:checked ~ .bg
{ --background: var(--high-contrast-dark-background)
; --foreground: var(--high-contrast-dark-foreground)
; --highlight: var(--high-contrast-dark-highlight)
; --filter:
	invert(26%)
	sepia(83%)
	saturate(3204%)
	hue-rotate(128deg)
	brightness(91%)
	contrast(73%);
}

label[for="high-contrast-light"] .hover-text:before
{ background-color: var(--high-contrast-light-background)
; color: var(--high-contrast-light-foreground)
; border: 2px solid var(--high-contrast-light-highlight)
}

#high-contrast-light:checked ~ .bg
{ --background: var(--high-contrast-light-background)
; --foreground: var(--high-contrast-light-foreground)
; --highlight: var(--high-contrast-light-highlight)
; --filter:
	invert(26%)
	sepia(83%)
	saturate(3204%)
	hue-rotate(128deg)
	brightness(91%)
	contrast(73%);
}

label[for="gruvbox-dark"] .hover-text:before
{ background-color: var(--gruvbox-dark-background)
; color: var(--gruvbox-dark-foreground)
; border: 2px solid var(--gruvbox-dark-highlight)
}

#gruvbox-dark:checked ~ .bg
{ --background: var(--gruvbox-dark-background)
; --foreground: var(--gruvbox-dark-foreground)
; --highlight: var(--gruvbox-dark-highlight)
; --filter:
	invert(62%)
	sepia(59%)
	saturate(533%)
	hue-rotate(23deg)
	brightness(102%)
	contrast(87%)
}

label[for="gruvbox-light"] .hover-text:before
{ background-color: var(--gruvbox-light-background)
; color: var(--gruvbox-light-foreground)
; border: 2px solid var(--gruvbox-light-highlight)
}

#gruvbox-light:checked ~ .bg
{ --background: var(--gruvbox-light-background)
; --foreground: var(--gruvbox-light-foreground)
; --highlight: var(--gruvbox-light-highlight)
; --filter:
	invert(39%)
	sepia(73%)
	saturate(601%)
	hue-rotate(21deg)
	brightness(93%)
	contrast(89%)
}

/* https://codepen.io/sosuke/pen/Pjoqqp?editors=0010 change 500 to like 500000 on line 190
 * https://deepwiki.com/morhetz/gruvbox/3.1-color-palette */