/*  
Theme Name: Untapped Libraries 2025
Theme URI: http://wordpress.org/
This Update: 
Description: Hello dear reader. These are the styles I wrote for you. Welcome.
Version: 0.1
Author: Neale Van Fleet
Author URI: https://elsewh.at/

*/

/* ==========================================================================
   Be Normal
   ========================================================================== */

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

*, *:before, *:after {
  box-sizing: border-box;
}

/* ==========================================================================
   Variables
   ========================================================================== */
   body {
		--bg: #fff;
	    --primary: #FF7D40;
		--primary: color(display-p3 1 0.49 0.251);
		--secondary: #A50EB2;
		--secondary: color(display-p3 0.647 0.055 0.698);
		--tertiary: #5F3CFB;
		--tertiary: color(display-p3 0.373 0.235 0.984);
		--content: #222;   
   }

/* ==========================================================================
   Base Layout
   ========================================================================== */

/* Sections - blocks of content */
   
.section {
   width: 100%;
   margin: 0 auto;
   padding: 0;

   float: left;
   clear: both;
}

/* Section content - defines content width */

.content { 
   padding: 30px 15px;
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
}

.section:before, .section:after, .content:before, .content:after, .column:before, .column:after {
	content: " ";
	display: table;
}

.section:after, .content:after, .column:after {
	clear: both;
}

.columns {
	display: grid;
	gap: 30px;
	justify-content: stretch;
	grid-auto-flow: row;
	clear: both;
	justify-items: stretch;
}

.columns img {
	max-width: 100%;
}

.columns:before {
	content: none;
}

/* Define Number of Columns of parent */

.columns.two {
	grid-template-columns: 1fr 1fr;
}

.columns.three {
	grid-template-columns: 1fr 1fr 1fr;
}

.columns.four {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.columns.five {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.columns.six {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.columns.seven {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.columns.eight {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

/* Larger sizes for child items */

.columns .double-width {
	grid-column-end: span 2;
}

.columns .triple-width {
	grid-column-end: span 3;
}

.columns .quadruple-width {
	grid-column-end: span 4;
}

.columns .double-height {
	grid-row-end: span 2;
}

.columns .triple-height {
	grid-row-end: span 3;
}

.columns .quadruple-height {
	grid-row-end: span 4;
}

/* Make everything single-column on mobile */

@media all and (max-width: 631px) { 
	.columns.two, .columns.three, .columns.four, .columns.five, .columns.six, .columns.seven, .columns.eight {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	.columns .double, .columns .triple, .columns .quadruple {
		grid-column-end: span 1;
	}
	
	.columns.two-mobile {
		grid-template-columns: 1fr 1fr !important;
	}
}


/* ==========================================================================
  Core Styles  
  ========================================================================== */

html {
	background-color: var(--bg);
	box-sizing: border-box;
	scroll-behavior: smooth !important;
}

body {
	width: 100%;
	background-color: var(--bg);
	color: var(--content);
	-webkit-font-smoothing: antialiased;
	font-family: Charter, Georgia, serif;
	font-size: 22px;
	line-height: 32px;
}

p { margin: 0 0 30px;}

.small, .credit {
	margin: -30px 0 15px;
	font-size: 14px;
}

img.size-full {
	border-radius: 16px;
	max-width: 100%;
}

a, a:visited {
	text-decoration: none;
	color: var(--tertiary);
	transition: all 300ms;
}

a:hover {
	text-decoration: none;
	color: var(--primary);
	transition: all 100ms;
}

.post {
	margin: 0 0 90px;
	padding: 0 0 0;
	position: relative;
}

a.post-edit-link {
	position: absolute;
	bottom: 30px;
	right: 0;
	font-size: 18px;
	line-height: 14px;
	color: var(--bg);
	font-weight: bold;
	background: var(--primary);
	padding: 5px 15px;
	border-radius: 15px;
}

a.post-edit-link:hover {
	color: var(--bg);
	background: var(--secondary);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Comfortaa", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: var(--tertiary);
	padding: 0;
	margin: 0;
}

h1 {
	font-size: 36px;
	line-height: 40px;
	margin-bottom: 10px;
}

h2 { 
	font-size: 30px;
	line-height: 34px;
}

.post h2, .post h1 {
	background: linear-gradient(to right, var(--primary) 0%, var(--secondary) 50%, var(--tertiary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h3 {
	color: var(--secondary);
}

.top-nav {
	text-align: right;
}

.top-nav a {
	color: #fff;
	padding: 15px;
	font-family: "Comfortaa", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
}

.top-nav a:hover {
	color: var(--primary);
}

.postdate {
	color: var(--secondary);
	margin: 0px;
	font-size: 18px;
	font-family: "Comfortaa", sans-serif;
	font-weight: 300;
}

blockquote {
	border-left: 4px solid var(--secondary);
	padding-left: 30px;
	margin-left: 15px;
	color: #333;
	color: var(--bg);
}

/* Navigation Buttons */

.navbutton a {
	color: #fff;
	background: #EE453A;
	background: var(--primary);
	width: 100%;
	min-height: 50px;
	display: block;
	border-radius: 6px;
	padding: 5px 15px;
	margin: 0px 0 45px;
	text-decoration: none;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	font-family: "Lobster Two", serif;
	font-weight: 400;
	font-style: normal;
}

.navbutton a:hover {
	color: #fff;
	background: #223940;
	background: var(--secondary);
}

pre {
	font-weight: 700;
}

audio {
	width: 100%;
	margin: 10px 0;
}

/* Video Embeds */

.youtube-video, .video {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 0 15px;
  border-radius: 16px;
}

.youtube-video::after, .video::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video.43::after, .video.43::after {
  display: block;
  content: "";
  padding-top: 75%;
}

.youtube-video iframe, .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Search */
span.search-term {
	background: rgba(238, 69, 58, 0.10);
	border-radius: 8px;
}

/* Header */
#header {
	padding: 15px 0 0;
	background: var(--bg);
	background: linear-gradient(to right, var(--primary) 0%,var(--secondary) 50%, var(--tertiary) 100%);
}

#header .logo {
	width: 70px;
	height: 70px;
	float: left;
	margin: -5px 15px 0 0;
}

#header h1 {
	color: #fff;
	margin: 0px 0 0;
	padding: 5px 0 0;
	font-size: 30px;
	line-height: 30px;
	text-transform: uppercase;
}

#header h1 .shaded {
	color: #D4A3E6;
}

#header h3 {
	color: #222;
	margin: 0 0 0;
	padding: 0;
	font-size: 21px;
	line-height: 22px;
}

/* Footer */
#footer {
	background: var(--content);
	background: linear-gradient(to right, var(--secondary) 0%, var(--tertiary) 100%);
	padding: 0px 0 15px;
	font-size: 20px;
	line-height: 30px;
	color: var(--bg);
}

#footer .content {
	margin-bottom: 0;
	padding-bottom: 0;
}

#footer h3 {
	font-size: 24px;
	line-height: 26px;
	margin: 0 0 5px;
}

#footer a, #footer a:visited {
	color: var(--primary);
}

#footer a:hover {
	color: #fff;
}

#footer p, #footer h1, #footer h2, #footer h3, #footer h4, #footer h5 {
	color: var(--bg);
}

#footer ul, #footer li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer input[type=text] {
	background: var(--bg);
	color: var(--content);
	border: none;
	border-radius: 16px;
	padding: 2px 15px;
	width: 100%;
}

#footer input[type=submit] {
	background: var(--content);
	color: var(--bg);
	border: none;
	border-radius: 16px;
	padding: 2px 15px;
}

#footer input[type=submit]:hover {
	background: var(--primary);
	color: var(--bg);
}

/* link posts */

.post.link .postdate {
	display: none;
}

/* .post.link h2 {
	font-size: 28px;
	line-height: 30px;
} */

/* ==========================================================================
   Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	body {
			--bg: #222;
			--primary: #FF7D40;
			--primary: color(display-p3 1 0.49 0.251);
			--secondary: #A50EB2;
			--secondary: color(display-p3 0.647 0.055 0.698);
			--tertiary: #5F3CFB;
			--tertiary: color(display-p3 0.373 0.235 0.984);
			--content: #fff;   
	   }
	   
	h2 a, h2 a:visited {
		color: var(--primary);
	}
	
	.postdate {
		color: var(--tertiary);
	}
	
	#footer p, #footer h3 {
		color: var(--content);
	}
	
	#footer a {
		color: var(--primary);
	}
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 631px) {
	
	a, p {
		word-wrap:break-word;
	}
	
	
	div {
		max-width: 100%;
	}
	
	.top-nav {
		text-align: left;
	}
	
	#header .logo {
		width: 60px;
		height: 60px;
		margin: -5px 5px 0 0;
	}
	
	.top-nav a {
		padding: 30px 30px 30px 0;
		font-size: 18px;
	}
	
	#header h1 {
		font-size: 25px;
		line-height: 26px;
	}
	
	#header h3 {
		font-size: 17px;
		line-height: 19px;
	}
		
}



/* Bye */