/*
Theme name:		Simplistic
Author:			Floris van de Sande
Version:		1.1
Description:	Hello, I'm a theme for a personal website.
Source URL:		http://florisvandesande.com/dev/
Language:		English
================================================================================= */



/* Colours
================================================================================= */

:root
{
    --background: #ffffff;
    --background-dark-mode: rgb(28,43,51);
    --sub-background: #EEEEEE;
    --sub-background-dark-mode: rgb(18,28,33);
    --text: rgb(28,43,51);
    --text-dark-mode: #EEEEEE;
    --link: #F5D16E;
    --link-dark-mode: #377986;
    --yellow: #F5D16E;
    --orange: #d97923;
    --green: #E9E7E8;
    --turqoise: #377986;
    --gray: #EEEEEE;
    --darker-gray: #E9E7E8;
}



/* CSS Reset
================================================================================= */

* {
  margin: 							0;
  padding: 							0;
  box-sizing: 						border-box;
}

article, section, nav, header, footer, figure {
  display: 							block;
}

figcaption {
  display:							none;
}



/* Element sizing responsive
================================================================================= */

html {
	font-size: 						18px;
    scroll-behaviour: 				smooth;
}

body {
	color: 							var(--text);
	background-color: 				var(--background);
}

@media (prefers-color-scheme: dark) {
  body {
	color: 							var(--text-dark-mode);
	background-color: 				var(--background-dark-mode);
  }
}

@media (min-width: 900px) {

	html {
		font-size: 					20px;
	}

}

@media (min-width: 1400px) {

	html {
		font-size: 					22px;
	}

}



/* Basic Text Styling
================================================================================= */

body {
	font-family: 					'Merriweather',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;
	font-weight: 					400;
	-moz-osx-font-smoothing: 		grayscale;
	-webkit-font-smoothing: 		antialiased;
	min-width: 						320px;
  	position: 						relative;
  	z-index: 						1;
}

p {
	line-height: 					1.6rem;
	padding-bottom: 				1rem;
}

code, samp, kbd, pre, .code {
	font-family: 					monospace;
	font-size:						0.8rem;
    line-height: 					2;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 					HelveticaNeue-CondensedBold, Arial, sans-serif;
	padding-bottom:					1rem;
	padding-top:					2rem
}

h1 {
	font-size: 						2.4rem;
	line-height:					1.2em;
}

h2 {
	font-size: 						1.8rem;
	line-height:					1.3em;
}

h3 {
	font-size: 						1.2rem;
	line-height:					1.4em;
}

h4 {
	font-size: 						1rem;
	line-height:					1.5em;
}

h5 {
	font-size: 						0.8rem;
	line-height:					1.6em;
}

h6 {
	font-size: 						0.6rem;
	line-height:					1.8em;
}




/* Text Styling
================================================================================= */

b, strong {
    font-weight: 					700;
}

::selection {
	background: 					var(--yellow);
}

.marker {
	background-color:				var(--yellow);
}

@media (prefers-color-scheme: dark) {
	::selection {
		background: 				var(--link-dark-mode);
	}
	.marker {
		background-color:			var(--link-dark-mode);
	}
}

.small {
	font-size: 						0.8rem;
	line-height: 					1.4rem;
}

.post-date {
	font-family: 					monospace;
	font-size: 						0.8rem;
}

pre {
    background: 					var(--sub-background);
    border-left: 					5px solid var(--yellow);
    color: 							var(--text);
    page-break-inside: 				avoid;
    overflow: 						auto;
    padding: 						1rem 1.5rem;
    display: 						block;
    word-wrap: 						break-word;
    tab-size: 						1rem;
	width: 							95%;
	max-width: 						30rem;
	margin:							0 auto 1rem auto;
}

blockquote {
	border-left: 					5px solid var(--yellow);
    color: 							var(--text);
    display: 						block;
    tab-size: 						1rem;
	width: 							95%;
	max-width: 						30rem;
	padding:						1rem 0 0 0;
	margin:							0 auto 1rem auto;
}

@media (prefers-color-scheme: dark) {
	
	pre {
    	background: 					var(--sub-background-dark-mode);
    	color: 							var(--text-dark-mode);
	}
	
	blockquote {
		border-left: 					5px solid var(--turqoise);
    	color: 							var(--text-dark-mode);
	}
}


/* List Styling
================================================================================= */

article ul {
	padding-bottom:					1rem;
}

article ul li {
	list-style: 					none;
	line-height:					1.6rem;
}

article ul:not(.notities) li:before {
	content: 						"+ ";
	margin-left: 					-1rem;
}

article .archive ul li a, article .notities ul li a {
	margin-left:					0.5rem;
}





/* Link Styling
================================================================================= */

a {
	text-decoration: 				none;
	color: 							inherit;
	cursor: 						pointer;
	box-shadow: 					inset 0 -3px 0 var(--link);
	transition: background 			0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
	-moz-transition-duration: 		0.2s;
	-webkit-transition-duration: 	0.2s;
}

a:hover, a:focus {
	background: 					var(--link);
}

a:visited, a:visited {
	box-shadow: 					inset 0 -5px 0 var(--orange);
	color: 							inherit;
}

.pagination {
	text-align:						center;
}

.pagination a {
	box-shadow:						none;
	background-color:				var(--sub-background);
	padding:						0.5rem;
}

.pagination a:hover {
	background-color:				var(--yellow);
}


@media (prefers-color-scheme: dark) {
  a {
	box-shadow: 					inset 0 -3px 0 var(--link-dark-mode);
  }
  a:hover, a:focus {
	background: 					var(--link-dark-mode);
  }

  a:visited, a:visited {
	box-shadow: 					inset 0 -5px 0 var(--orange);
  }
  
  .pagination a {
  	background-color:				#19272E;
  }
  
  .pagination a:hover {
  	color:							var(--text);
  }
}

/* Lay-out
================================================================================= */

h1, h2, h3, h4, h5, h6, p, form, .date, nav {
	width: 							95%;
	max-width: 						30rem;
	margin:							0 auto;
}

ul:not(.menu), ol  {
	width: 							85%;
	max-width: 						30rem;
	margin:							0 auto 0 auto;
}

section {
	margin-bottom:					3rem;
}

.grid {
	text-align:						center;
}

.post {
	margin-bottom:					4rem;
}



/* Menu Styling
================================================================================= */

header {
	background-color: 				var(--sub-background);
	height: 						3rem;
	margin-bottom:					2rem;	
}

header img {
	height: 						2.4rem;
	margin-top:						0.4rem;
}

header .hero {
	width: 							95%;
	max-width: 						30rem;
	margin:							0 auto;
	text-align:						right;
	margin-top:						-2.6rem;
}

nav ul li {
	display:						inline-block;
	font-family: 					HelveticaNeue-CondensedBold, Arial, sans-serif;
	font-size:						0.8rem;
	color: 							var(--text);
	padding:						1rem 0.25rem 0.5rem 0.25rem;
	margin-left:					-0.75rem;
}

nav ul li:before {
	content:						none;
}

nav ul li a {
	box-shadow: 					none;
	padding:						1rem 0.5rem 1rem 0.5rem;
}

@media (prefers-color-scheme: dark) {
  header {
	color: 							var(--text-dark-mode);
	background-color: 				var(--sub-background-dark-mode);
  }
  nav ul li {
  	color:							var(--text-dark-mode)
  }
}



/* Footer styling
================================================================================= */

footer {
	background-color: 				var(--sub-background);
	color: 							var(--text);
	padding:						2rem 0;
	margin-top:						4rem;
}

@media (prefers-color-scheme: dark) {
  footer {
	color: 							var(--text-dark-mode);
	background-color: 				var(--sub-background-dark-mode);
  }
}

@media only screen and (min-width: 700px) {

	.footer-links {
		display: inline-block;
		vertical-align: top;
		min-width: 50%;
	    margin-left: -0.4rem;
	}

	.footer-company {
		text-align: right;
		display: inline-block;
		vertical-align: top;
		min-width: 49%;
	}

}

.center-max-width {
	width: 							100%;
	max-width: 						30rem;
	margin:							0 auto;
}



/* Image Styling
================================================================================= */

article img {
	width: 							105%;
	margin:							0 -2.5%;
}

article img.hero {
	width:							80%;
	margin:							-2rem 10% 0 10%;
}

@media (min-width: 900px) {
	article img {
		width: 						140%;
		margin:						0 -20%;
	}
	article img.standard {
		width: 						110%;
		margin:						0 -5%;
	}
}

.image-with-title {
	display: 						inline-block;
	width:							6rem;
	height:							16rem;
	text-align:						center;
	margin:							0 0 2rem 0;
	vertical-align: 				top;
}

.image-with-title figure {
	margin:							1rem 0 -2rem 0;
}

.image-with-title img {
	width: 							5.5rem;
	height:							8rem;
}

.image-with-title p {
	font-size:						0.8rem;
}

.image-with-title h3 {
	font-size:						1rem;
}


@media (min-width: 700px) {
	.image-with-title {
		width:						14rem;
		height:						24rem;
	}

	.image-with-title img {
		width: 						12rem;
		height:						18rem;
	}

	.image-with-title p {
		font-size:						1rem;
	}

	.image-with-title h3 {
		font-size:						1.2rem;
	}
}

figure {
	margin:							1rem 0 2rem 0;
}


/* Element styling
================================================================================= */

ul.checkbox li:before {
	content: 						none;
}

input[type=checkbox] {
	margin-left:					-1.2rem;
	margin-right:					0.6rem;
	scale: 							1.6;
}

hr {
	margin: 						3em auto 3em auto;
	width: 							6rem;
	display: 						block;
	color: 							inherit;
}

form input#bd-email {
	outline:						none;
    border: 						none;
    border-bottom: 					dotted;
	font-size:						1em;
	font-family:					'Merriweather',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;
	width:							15em;
	padding:						0.5em 0 0.1em 0;
	margin-right:					1em;
	margin-bottom:					0.5em;
	background-color:				var(--background)
}

@media (prefers-color-scheme: dark) {
  form input#bd-email {
  	color:							var(--text-dark-mode);
	background-color: 				var(--background-dark-mode);
  }
}

button, #bd-button {
	position:						relative;
    display:						inline-block;
    text-decoration:				none;
    text-align:						center;
    font-weight:					bold;
    color:							var(--text);
    outline:						none;
    border:							2px solid var(--text);
	background-color:				var(--background)
    white-space:					nowrap;
    appearance:						none;
    -moz-appearance:				none;
    -webkit-appearance:				none;
    -moz-box-shadow:				inset 0 -4px 0 0 var(--text);
    -webkit-box-shadow:				inset 0 -4px 0 0 var(--text);
    box-shadow:						inset 0 -4px 0 0 var(--text);
    -moz-border-radius:				7px;
    -webkit-border-radius:			7px;
    border-radius:					7px;
    font-size:						18px;
    line-height:					18px;
    padding:						14px 20px 18px;
    margin: 						0.6em 0;
    min-width:						150px;
    max-width:						600px;
    -moz-transition:				width 0.2s ease, color 0.3s ease, border-color 0.3s ease;
    -o-transition:					width 0.2s ease, color 0.3s ease, border-color 0.3s ease;
    -webkit-transition:				width 0.2s ease, color 0.3s ease, border-color 0.3s ease;
    transition:						width 0.2s ease, color 0.3s ease, border-color 0.3s ease;
    cursor:							pointer;
}

.button {
	position: 						fixed;
    bottom: 						3rem;
    right: 							3rem;
}

.button a {
	box-shadow:						none;
	padding: 						0.8rem 1rem 0.8rem 1rem;
	border-radius:					2rem;
	background-color:				var(--link);
    font-weight: 					700;
}

.button a:hover {
	color:							var(--text-dark-mode);
	background-color:				var(--orange);
}

@media (prefers-color-scheme: dark) {
  button, #bd-button {
  	color:							var(--text-dark-mode);
	background-color: 				var(--background-dark-mode);
    border:							2px solid var(--text-dark-mode);
    -moz-box-shadow:				inset 0 -4px 0 0 var(--text-dark-mode);
    -webkit-box-shadow:				inset 0 -4px 0 0 var(--text-dark-mode);
    box-shadow:						inset 0 -4px 0 0 var(--text-dark-mode);
  }
  
  .button a {
	background-color:				var(--link-dark-mode);
   }

   .button a:hover {
	color:							var(--text);
	background-color:				var(--orange);
  }
}

.hidden {
	display:						none;
}

.reading-time {
	font-size:						0.8rem;
	font-family: 					monospace;
	margin-top:						-1.5rem;
}

.description {
	background: 					#fafafa;
	padding:						0.5rem 2rem 1rem 2rem;
	border-radius: 					0 0 1rem 1rem;
	margin-top:						-1.5rem;
}

.text-post {
	background: 					#fafafa;
	padding:						1rem 2rem 1rem 2rem;
	border-radius: 					1rem;
	margin-top:						-1.5rem;
}

@media (prefers-color-scheme: dark) {

	.description, .text-post {
		background-color:				#19272E;
	}

}

details {
	border-radius:					0.5rem;
    border:							2px solid var(--text);
    width:							95%;
    max-width:						26rem;
    margin:							2rem auto 0 auto;
    padding:						0.5rem;
}

summary {
  	list-style-type: 				'⬇ ';
} 

details[open] > summary {
  	list-style-type: 				'⬆ ';
}

details ul {
	margin-top:						1rem !important;
	text-align:						left;
}

.feedback {
	margin-top:						2rem;
}

.footnotes p {
	font-size: 						0.8rem;
	line-height:					1.6em;
}

/* Book page
================================================================================= */

.grid h2 {
	margin-bottom:					3rem;
	margin-top:						8rem;
}

.grid h3, .grid p {
	margin-bottom: 					-1rem;
}

.double-button {
	font-size:						0.5rem;
}

.double-button a {
	padding: 						0.2rem 0.4rem 0.2rem 0.4rem;
}