/* > Imports */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* family=Arimo:ital,wght@0,400;0,700;1,400;1,700& Arimo is a nicer <p> font but not really necessary */

/* Variables */
/* >> Colours */

html[data-theme="light"], :root { 
	--col-index: #0000ff;
	--col-about: #00bf00; 
	--col-links: #bfac00; 
	--col-reach: #bf0000;
	--col-extra: #ac00bf;
	--col-txt: black;
	--col-bgd: white;
	--col-thc: #e0e0e0;
	--col-tdc: #f0f0f0; }

/* > General styles */
/* >> Basic elements */

html { font-size: 16px; }
	 /* rem units are proportional to this value (default 16px) */

body { margin: 0; display: flex; flex-direction: column; height: 100vh; background: var(--col-bgd); }

h1, h2, h3, h4, h5, h6 { font-family: 'IBM Plex Sans', sans-serif; margin: 16px 0; color: var(--col-txt); }

h1 { border-bottom: 3px solid; color: var(--col-txt); }

p { font: 12pt 'Helvetica', sans-serif; color: var(--col-txt); }

pre { font-family: monospace; background-color: #f0f0f0; padding: 1ex; margin: 16px 40px 16px 20px; overflow: auto;
	  border: solid 2px #007fff; clip-path: inset(0 round 4px); border-image: linear-gradient(to right, #f0f0f0 76ch, #fff); }

ul, ol, li { font: 12pt 'Helvetica', sans-serif; color: var(--col-txt); }

ul {  }

ol {  }

li { margin-top: 0.15rem; }

blockquote { margin-left: 20px; } /*padding-left: 6px; border-left: solid 3px #007fff; font: italic smaller 'Helvetica', sans-serif; box-sizing: border-box;
			 border-image: linear-gradient(to top, #0ff, #00b5ff 20%, #00f) 1; } */
			 
cite { font: 12pt 'Helvetica', sans-serif; }

table, thead, tbody, tr, th, td { vertical-align: middle; font-size: small; font-family: 'Helvetica', sans-serif; color: var(--col-txt); }

table { min-width: 100%; border-left: solid 3px transparent; border-image: linear-gradient(to top, #0ff, #00b5ff 20%, #00f) 1; }

thead {  }

tbody { border-collapse: collapse; }

tr, td { text-align: center; border-collapse: collapse; }

th { background-color: var(--col-thc); font: bold 12pt 'IBM Plex Sans'; }

tr {  }

td { background-color: var(--col-tdc); }

caption { caption-side: bottom; font: italic smaller 'Helvetica', sans-serif; }

label { font: 12pt 'Helvetica', sans-serif; }

a { font: medium 'Helvetica', sans-serif; text-decoration: none; color: #00f; }

/* >> Sectioning elements */

header { text-align: left; color: var(--col-bgd); background-color: var(--col-txt); width: 100%; margin: 0; 
		 background-image: linear-gradient(-45deg, #00ffff, #00B5ff 10%, var(--col-index) 30%, black 50%);
		 flex: 0 1 auto; /* shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ }

nav { margin-left: 1em; overflow: auto; white-space: nowrap; }

menu {  }

main { margin: 0 1em; max-width: 76ch;
	   flex: 1 1 auto; }

aside {  }

article {  }

section {  }

footer { box-sizing: border-box; padding: 0 16px; width: 100%;
		 flex: 0 1 auto;
		 display: flex; align-items: center; }

/* Styling elements */

div {  }

/* > Classses */
/* >> Utility classes */

.italic { font-style: italic; }

.bold { font-weight: bold; }

.mono { font-family: monospace; font-size: 15px; }

.serif { font-family: Cambria, serif; }

.small { font-size: x-small; }

.right { text-align: right; }

.middle { vertical-align: middle; } /* for images inline with text */

.centerImage { text-align: center; }

/* >> Shared classes */

.tag { font-size: 8pt; font-family:'Verdana', sans-serif; flex: 0 0 auto; } /* flex-shrink: 0; stops the text from line-wrapping! */

.line { background-color: var(--col-txt); content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; }

.line.long { flex: 1 1 auto; margin-right: 1ch; } /* could set flex-shrink: 0; on these too but it doesn't make a difference */

.line.int { flex: 0 1 auto; margin: 0 1ch; width: 0.75em; }

.line.end { flex: 0 1 auto; margin: 0 1ch; width: 2em; }

.nav-icon { float: left; }

.nav-item { display: inline-block; padding: 15px 15px 12px 15px; margin: 0; text-align: center; background-color: var(--col-txt); color: var(--col-bgd); }

/* >> Page-specific classes (and ids) */



/* > Specific selectors */

li:first-child { margin-top: 0; } /* remove top margin on item that starts list */

li li:first-child { margin-top: 0.3rem; } /* ...unless it's a sublist, then make it bigger */

a:hover { text-decoration: underline; background-image: linear-gradient(-45deg, #00ffff, #00B5ff 25%, #0000ff); 			
		  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

a:active { color: #00ffff; }

blockquote p { margin-bottom: 6px; padding-left: 6px; border-left: solid 3px #007fff; font: italic smaller 'Helvetica', sans-serif; box-sizing: border-box;
			 border-image: linear-gradient(to top, #0ff, #00b5ff 20%, #00f) 1; }
			 
blockquote cite { font-style: italic; font-size: smaller; }

blockquote p a { font: inherit; }

blockquote p > em, i { font-style: normal; }

cite:before { content: '—'; }

nav a[href], nav p { border-bottom: 3px solid var(--col-bgd); }
nav a[href="/"] { border-bottom-color: var(--col-index); }
nav a[href="/about/"] { border-bottom-color: var(--col-about); }
nav a[href="/links/"] { border-bottom-color: var(--col-links); }
nav a[href="/reach/"] { border-bottom-color: var(--col-reach); }
nav a[href="/extra/"] { border-bottom-color: var(--col-extra); }

td > img { max-width: 95%; max-height: 500px; padding-top: 3px; } /* max-width of its container, which is the table data box */

table a { font-size: inherit; }

.tag a { font: 8pt 'Verdana', sans-serif; color: #0000ff; font-style: inherit; text-decoration-color: currentColor; }

.tag a:hover { background-image: linear-gradient(-45deg, #00ffff, #00B5ff 25%, var(--col-index)); color: #00b5ff; }

p.nav-item {  }

a.nav-item { color: var(--col-bgd); }

.nav-item:hover { background-color: var(--col-bgd); border-bottom-color: var(--col-bgd); }

/* .nav-item.mono { background-color: var(--col-bgd); color: var(--col-txt); } */

p.nav-item:hover { color: var(--col-txt); }

a.nav-item:hover { text-decoration: none; padding: 15px 15px 12px 15px; -webkit-text-fill-color: white; 
				   background-clip: content-box; -webkit-background-clip: content-box; border-bottom-color: transparent; }
				   
a[href="/"].nav-item:hover { background-image: linear-gradient(-45deg, #00ffff, #00B5ff 25%, var(--col-index)); }
a[href="/about/"].nav-item:hover { background-image: linear-gradient(-45deg, #00ffff, #00B5ff 25%, var(--col-about)); }
a[href="/links/"].nav-item:hover { background-image: linear-gradient(-45deg, #00ffff, #00B5ff 25%, var(--col-links) 75%); }
a[href="/reach/"].nav-item:hover { background-image: linear-gradient(-45deg, #00ffff, #00B5ff 25%, var(--col-reach) 75%); }
a[href="/extra/"].nav-item:hover { background-image: linear-gradient(-45deg, #00ffff, #00B5ff 25%, var(--col-extra)); }

img.nav-icon { margin: 8px 16px 8px 8px; }

div.nav-icon { background-image: url("images/tile.png"); height: 48px; width: 48px; }

div.nav-icon:hover { background-image: url("images/tile_blue.png") }

/* > Media queries */
/* Need to be at the bottom to override earlier, non-media-dependent rules... */

@media (any-hover: none) {
  div.nav-icon {
    background-image: url("images/tile_blue.png");
	/* set the website icon to always have the blue bg when on a mobile device that cannot hover */
  }
}

@media (prefers-color-scheme: dark) {
	:root {
		--col-bgd: black;
		--col-txt: white;
		--col-thc: #1a1a1a;
		--col-tdc: #333333;
  }
}

html[data-theme="dark"] {
	--col-bgd: black;
	--col-txt: white;
	--col-thc: #1a1a1a;
	--col-tdc: #333333;
}

/* theme change link */

#theme-toggle .themeHidden {
  display: none;
  /* this is overridden by one of the below rules when active,
  because they are more specific */
}

html[data-theme="auto"] #theme-toggle .themeLinkAuto {
  display: inline;
}

html[data-theme="dark"] #theme-toggle .themeLinkDark {
  display: inline;
}

html[data-theme="light"] #theme-toggle .themeLinkLight {
  display: inline;
}