@charset "UTF-8";
/*
	Theme Name: anna
	Author: Eelco Deuling
	Author URI: https://palaismondial.nl/
	Description: Theme voor dochter
	Version: 1.0
	Tested up to: 6.3
	Requires PHP: 7.3
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Tags: custom-header, editor-style, custom-menu, featured-images, translation-ready
	Text Domain: anna
	Domain Path: /lib/languages
*/
/*----------------------------------------------------------------------*/
/* Theme colors */
/*----------------------------------------------------------------------*/
:root {
	--main-light: #FFF;
	--main-dark: #000;
}
/*----------------------------------------------------------------------*/
/* Webfonts */
/*----------------------------------------------------------------------*/
@font-face {
    font-family: "Inter";
    src: url("lib/fonts/Inter-Regular.woff2") format("woff2"),
         url("lib/fonts/Inter-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("lib/fonts/Inter-Bold.woff2") format("woff2"),
         url("lib/fonts/Inter-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
/*----------------------------------------------------------------------*/
/* Top tree elements */
/*----------------------------------------------------------------------*/
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: "Inter";
	font-size: calc(100vw / 64);
	line-height: 120%;
	overflow: auto;
	background: var(--main-light);
	color: var(--main-dark);
}
body {
	margin: 0;
}
*:focus {
	outline: 1px solid var(--main-dark);
	outline-offset: .15rem;
}
/*----------------------------------------------------------------------*/
/* Wordpress alignment */
/*----------------------------------------------------------------------*/
.alignright {
	float: right;
	margin-left: 1.666rem;
}
.alignleft {
	float: left;
	margin-right: 1.666rem;
}
.aligncenter {
	display: block;
	margin: auto;
}
.alignwide {
	clear: both;
}
.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
/*----------------------------------------------------------------------*/
/* Core required Wordpress css */
/*----------------------------------------------------------------------*/
.wp-caption {
	max-width: 100%;
}
.sticky {
}
.screen-reader-text {
	position: absolute;
	clip: rect( 1px, 1px, 1px, 1px );
	overflow: hidden;
	height: 1px;
	width: 1px;
}
/*----------------------------------------------------------------------*/
/* Wordpress blocks */
/*----------------------------------------------------------------------*/
.wp-block-image figcaption,
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
	font-size: 80%;
	line-height: 100%;
}
.wp-block-cover-image.alignleft,
.wp-block-cover.alignleft {
	margin-right: 1.666rem;
}
.wp-block-cover.alignright,
.wp-block-cover-image.alignright {
	margin-left: 1.666rem;
}
.wp-block-file {
	margin: 0 0 1.666rem 0;
}
.is-vertically-aligned-top {
	margin-top: 0;
}
.is-vertically-aligned-bottom {
	margin-bottom: 0;
}
:where(body .is-layout-flex) {
	gap: 1.666rem;
}
/*----------------------------------------------------------------------*/
/* Core Wordpress post and pages navigation */
/*----------------------------------------------------------------------*/
.post-navigation,
.posts-navigation {
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
	clear: both;
}
.nav-previous,
.nav-next {
	float: left;
}
.nav-previous + .nav-next {
	margin-left: 1rem;
}
.nav-previous a::before {
	content: "\003C";
	display: inline-block;
	padding-right: 0.3rem;
}
.nav-next a::after {
	content: "\003E";
	display: inline-block;
	padding-left: 0.3rem;
}
.post-page-numbers {
	color: var(--main-dark);
	display: inline-block;
	padding: 0.25rem 0.75rem;
	margin: 1rem 0 0;
	border: 1px solid var(--main-dark);
}
a.post-page-numbers {
	color: var(--main-light);
	background: var(--main-dark);
	text-decoration: none;
}
a.post-page-numbers:hover {
	background: var(--main-dark);
	color: var(--main-light);
}
/*----------------------------------------------------------------------*/
/* Wordpress search and archive excerpt link */
/*----------------------------------------------------------------------*/
a.readMore {
	display: block;
	width: 100%;
	clear: both;
}
a.readMore::after {
	content: "\003E";
	display: inline-block;
	padding-left: 0.3rem;
}
/*----------------------------------------------------------------------*/
/* Reset and normalize sections *
/*----------------------------------------------------------------------*/
article, aside, details, figcaption, figure, footer, header, main,
nav, section, summary, div, table {
	display: block;
	box-sizing: border-box;
}
/*----------------------------------------------------------------------*/
/* Reset and normalize navigation */
/*----------------------------------------------------------------------*/
nav ul, nav ol {
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}
nav ul ul, nav ol ol {
	margin: 0;
}
/*----------------------------------------------------------------------*/
/* Media reset */
/*----------------------------------------------------------------------*/
img {
	border: 0;
	max-width: 100%;
	height: auto;
}
svg:not(:root) {
	overflow: hidden;
}
figure {
	margin: 0;
}
iframe, object {
	max-width: 100%;
}
audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline;
}
audio:not([controls]) {
	display: none;
	height: 0;
}
/*----------------------------------------------------------------------*/
/* Defaults for super and subscript */
/*----------------------------------------------------------------------*/
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
/*----------------------------------------------------------------------*/
/* Italics and bolds */
/*----------------------------------------------------------------------*/
em, i {
	font-style: normal;
}
b, strong {
	font-weight: bold;
}
/*----------------------------------------------------------------------*/
/* Forms: reset and normalize */
/*----------------------------------------------------------------------*/
form {
	display: block;
	box-sizing: border-box;
}
fieldset {
	border: 1px solid var(--main-dark);
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}
legend {
	border: 0;
	padding: 0;
}
button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}
button {
	overflow: visible;
}
button,
select {
	text-transform: none;
}
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;
}
textarea {
	overflow: auto;
}
optgroup {
	font-weight: bold;
}
/*----------------------------------------------------------------------*/
/* Main typographic resets */
/*----------------------------------------------------------------------*/
h1, h2, h3 {
	margin-top: 0;
	font-size: 2rem;
	line-height: 120%;
	font-weight: bold;
}
h4, h5, h6 {
margin-top: 0;
	font-size: 1rem;
	line-height: 120%;
	font-weight: bold;
}
pre {
	white-space: pre-wrap;
}
/*----------------------------------------------------------------------*/
/* Hyphenate */
/*----------------------------------------------------------------------*/
h4, h5, h6, p {
	-webkit-hyphens: auto;
	hyphens: auto;
}
/*----------------------------------------------------------------------*/
/* Forms: theme specific */
/*----------------------------------------------------------------------*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
	border: none;
	padding: 0.5rem 1rem;
	color: var(--main-light);
	background: var(--main-dark);
}
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 1rem;
	margin: 0.5rem 0;
	border: 1px solid var(--main-dark);
}
/*----------------------------------------------------------------------*/
/* Styling for links */
/*----------------------------------------------------------------------*/
a {
	background: transparent;
	color: var(--main-dark);
	text-decoration-thickness: .05rem;
	transition: opacity .5s;
}
a:active,
a:hover {
	outline: 0;
	opacity: .5;
}
/*----------------------------------------------------------------------*/
/* Main divisions */
/*----------------------------------------------------------------------*/
.wrapper {
	width: 100%;
	float: left;
	clear: both;
	padding: 0 3.333rem;
	margin: auto;
	overflow: visible;
}
#mainContent {
	width: 100%;
	float: left;
	clear: both;
}
.menuWrapper {
	width: 100%;
	float: left;
	clear: both;
	padding: 3.333rem 0;
}
.logoWrapper {
	width: 3.333rem;
	line-height: 0;
	float: left;
	clear: left;
	height: auto;
}
#mainContent div.singleContent :first-child {
	margin-top: 0;
}
#mainContent div.hentry :last-child {
	margin-bottom: 0;
}
/*----------------------------------------------------------------------*/
/* Mobile menu: desktop rules */
/*----------------------------------------------------------------------*/
input#hamburger {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	height: 1px;
	width: 1px;
	visibility: hidden;
}
input#hamburger:focus {
	outline: none auto;
}
label#hamburgerHandler {
	display: none;
	outline-offset: .005rem;
	transition: opacity .5s;
}
input#hamburger:focus ~ label#hamburgerHandler {
	outline: 1px solid var(--main-dark);
	outline-offset: .005rem;
}
/*----------------------------------------------------------------------*/
/* Archives and frontpage divisions (tiles) */
/*----------------------------------------------------------------------*/
.projectsHolder {
	float: left;
	clear: both;
	overflow: hidden;
	width: calc( 100% + 1.666rem );
	margin: 0 -0.833rem 0 -0.833rem;
}
.projectPreview {
	position: relative;
	float: left;
	width: calc( 33.333% - 1.666rem);
	margin: 0.833rem;
}
.projectPreview img {
	width: 100%;
}
.projectPreview:nth-of-type( 3n - 2 ) {
	clear: left;
}
.projectPreview:nth-of-type( 3n - 1 ) {
}
.projectPreview:nth-of-type( 3n ) {
	clear: right;
}
.previewImgTile {
	display: block;
}
.previewTitleTile {
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	transition: opacity .5s;
}
.projectPreview:hover img {
	filter: grayscale(100%);
}
a.tileLink {
	display: block;
}
a.tileLink:hover,
a.tileLink:focus .previewTitleTile,
a.tileLink:hover .previewTitleTile {
	opacity: 1;
}
.deadCenter {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	padding: 0 1.666rem;
	top: 50%;
	margin: 0;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-weight: bold;
	color: var(--main-light);
}
.homeContent + .menuWrapper {
	padding-top: 2.333rem;
}
/*----------------------------------------------------------------------*/
/* Logo */
/*----------------------------------------------------------------------*/
.logoLink {
	display: block;
}
a.logoLink:hover {
	opacity: 1;
}
.logo {
	fill: var(--main-dark);
}
/*----------------------------------------------------------------------*/
/* mainNav menu */
/*----------------------------------------------------------------------*/
.mainNav {
	float: right;
	clear: right;
	padding: .5rem 0;
}
.mainNav ul {
	display: block;
	float: right;
}
.mainNav li {
	display: block;
	float: left;
	padding: 0 3.333rem 0 0;
}
.mainNav li:last-of-type {
	padding: 0;
}
.mainNav:focus-within {
	left: auto;
}
.mainNav a {
	font-weight: bold;
	text-decoration: none;
	text-underline-offset: .5rem;
}
.mainNav a:hover {
	text-decoration: underline;
	opacity: 1;
}
/*----------------------------------------------------------------------*/
/* Media queries */
/*----------------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
	html {
		background: var(--main-dark);
		color: var(--main-light);
	}
	*:focus {
		outline: 1px solid var(--main-light);
	}
	.logo {
		fill: var(--main-light);
	}
	a {
		color: var(--main-light);
	}
	input#hamburger:focus ~ label#hamburgerHandler {
		outline: 1px solid var(--main-light);
	}
}
@media only screen and (max-width: 660px) {
	html {
		font-size: 1rem;
	}
	.wrapper {
		padding: 0 1.666rem;
	}
	.menuWrapper {
		padding: 1.666rem 0;
	}
	.homeContent + .menuWrapper {
		padding-top: 1.666rem;
	}
	.mainNav {
		max-width: 80%;
	}
	.mainNav li {
		padding: 0 1.666rem 0 0;
	}
	.projectsHolder {
		width: 100%;
		margin: 0;
	}
	.deadCenter {
		padding: 0 0.833rem;
	}
	.projectPreview {
		width: 100%;
		margin: 0 0 1.75rem 0;
		clear: both;
	}
	.projectPreview:last-of-type {
		margin-bottom: 0;
	}
	#footerMenu.mainNav ul li:last-of-type a {
		padding-bottom: 0;
	}
}
@media only screen and (max-width: 600px) {
	input#hamburger {
		visibility: visible;
	}
	label#hamburgerHandler {
		cursor: pointer;
		line-height: 62%;
		font-size: 2.5rem;
		text-align: center;
		display: block;
		height: 2.125rem;
		width: 2.125rem;
		box-sizing: border-box;
		float: right;
		margin: 0;
		transform: scale(130%);
	}
	#mainMenu {
		max-height: 0;
		padding: 0;
		display: block;
		overflow: hidden;
	}
	#mainMenu.mainNav {
		max-width: 100%;
		width: 100%;
	}
	#mainMenu.mainNav ul {
		display: block;
		box-sizing: border-box;
		width: 100%;
		float: left;
		clear: both;
	}
	#mainMenu.mainNav li {
		width: 100%;
		padding: 0;
		float: left;
		clear: both;
	}
	#mainMenu.mainNav a {
		box-sizing: border-box;
		display: block;
		float: left;
		clear: both;
		width: 100%;
		padding: 0.833rem 0;
	}
	#mainMenu:focus-within,
	input#hamburger:checked ~ nav#mainMenu {
		max-height: 100%;
		padding: 0.833rem 0 0 0;
		float: left;
		clear: both;
		overflow: visible;
	}
	div.wp-block-spacer + div.wp-block-columns {
		margin-top: -0.78rem;
	}
}
@media only screen and (max-width: 500px) {
	#footerMenu {
		max-width: 100%;
		width: 100%;
		float: left;
		clear: both;
	}
	#footerMenu.mainNav ul {
		width: 100%;
	}
	#footerMenu.mainNav ul li {
		width: 100%;
		float: left;
		clear: both;
		padding: 0;
	}
	#footerMenu.mainNav ul li a {
		display: block;
		padding: 0.833rem 0;
	}
}