:root {
	--accent: #88c3d5;
	--text-primary: #c3c3c3;
	--text-secondary: #5f5f5f;
	--grid-gap: 10px;
	--background-color: #151719;
	--title-font: 'canela', Garamond, serif;
	--text-font: 'Lora', 'Times New Roman', serif;
	@media (prefers-color-scheme: light) {
		--background-color: #f5f2e9;
		--accent: #fb8367;
		--text-primary: #15150d;
		--text-secondary: #5f5f5f;
	}
}

@font-face {
	font-family: 'canela';
	font-style: normal;
	font-weight: 400;
	src: local('canela'), url('/assets/fonts/Canela-Regular.otf') format('opentype');
	font-display: swap;
}
@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 400;
	font-optical-sizing: auto;
	src: local('Lora'), url('/assets/fonts/Lora-VariableFont_wght.ttf') format('truetype');
	font-display: swap;
}


html {
	background: var(--background-color);
	color: var(--text-primary);
	font-family: var(--title-font);
	padding-bottom: 70px;
}

main {
	max-width: 768px;
	padding: 0 20px;
	box-sizing: border-box;
	margin: 0 auto;
}

a {
	text-decoration: none;
	color: var(--accent);
}

ul {
	padding-left: 20px;
}

iframe, img {
	max-width: 100%;
}

iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.col-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gap);
	@media (min-width: 768px) {
		grid-template-columns: 1fr 1fr;
	}
}

.language-selector {
	text-align: right;
  position: absolute;
  top: 10px;
  right: 10px;
	opacity: 0.5;
	&:hover {
		opacity: 1;
	}
}

h1.main {
	color: #d5d5d5;
	@media (prefers-color-scheme: light) {
		color: var(--accent);
	}
}
.bio {
	.pname {
		margin: 20px 0 -15px;
		display: block;
		img {
			display: inline-block;
			border-radius: 100%;
			width: 60px;
		}
		h1 {
			display: inline-block;
			margin: 0;
			position: relative;
			top: -17px;
			left: 10px;
		}
	}
	color: var(--text-secondary);

}

.wrapper nav {
	h3 {
		margin-bottom: 10px;
	}
	ul {
		margin-top: 0;
		li {
			font-family: monospace;
			transition: all 0.1s ease-in-out;
			margin-right: 10px;
			margin-bottom: 2px;
			list-style-type: none;
		}
	}
	a {
		color: inherit;
		&:hover {
			color: var(--accent);
		}
	}
	/* Mobile view  */
	@media (max-width: 768px) {
		margin-top: 20px;
		h3 {
			display: inline;
		}
		ul {
			display: inline;
		}
		li {
			display: inline;
			margin-right: 10px;
		}
	}
}

.entries {
	display: grid;
	gap: 40px;
	margin-top: 30px;
}

.entry-wrapper {
	text-decoration: none;
	color: inherit;
	display: block;

	.image {
		img {
			border-radius: 8px;
			box-shadow: 0 10px 10px -6px black;
			@media (prefers-color-scheme: light) {
				box-shadow: 0 10px 10px -6px #8a8a8a;
			}
		}
	}
	.post {
		display: grid;
		grid-template-columns:1fr;
		gap: 20px;
		@media (min-width: 768px) {
			grid-template-columns: 230px 1fr;
		}
		&.no-image {
			@media (min-width: 768px) {
				grid-template-columns: 1fr;
			}
		}
		
		.content {
			h2 {
				margin: 0;
				font-family: var(--title-font);
			}
			p {
				margin-top: 0px;
				color: white;
				font-size: 15px;
				letter-spacing: 1px;
				font-weight: 200;
			}
			
			p:last-child {
				margin-bottom: 0px;
			}
			
			img {
				max-width: 100%;
			}
			
			.author {
				color: var(--text-secondary);
				margin-bottom: 7px;
				display: inline-block;
				
				img {
					border-radius: 100%;
					max-width: 50px;
				}
				strong {
					color: #fff;
				}
			}
			.body {
				font-family: var(--text-font);
			}
		}
	}
}

.navigation {
	a {
		color: var(--text-secondary);
		font-size: 15px;
		font-weight: 600;
	}
}

.page-entry {
	margin-top: 30px;
	line-height: 1.7em;
	font-weight: 300;
	font-size: 1.3em;
	font-family: var(--text-font);

	a {
		color: inherit;
		text-decoration: underline;
		transition: all 0.1s ease-in-out;
		&:hover {
			color: var(--accent);
		}
	}
	.note {
		font-size: .9em;
		color: var(--text-secondary);
		display: inline-block;
		line-height: 1.3em;
		font-family: sans-serif;
	}

	img.cover {
		border-radius: 8px;
		margin-top: 20px;
	}

	h1 {
		font-family: var(--title-font);
	}
	
	strong {
		font-weight: 800;
	}

	p {
		code {
			background: #262626e3;
			border-radius: 3px;
			padding: 3px 5px;
			color: white;
		}
	}

	figure {
		margin: 0;
		img {
			display: block;
			margin: 0 auto;
		}
		figcaption {
			text-align: center;
			width: 100%;
			display: block;
			font-size: 0.9em;
			opacity: 0.6;
		}
	}
	
	blockquote {
		padding: 3px 30px;
		margin: 0;
		border-radius: 12px;
		font-family: sans-serif;
		font-size: 24px;
		line-height: 1.4em;
		font-style: italic;
		/*  respect line breaks */
		p {
			white-space: pre-wrap;
		}
	}

	.author {
		text-decoration: none;
		color: inherit;
		margin-bottom: 10px;

		img {
			max-width: 25px;
			margin-bottom: -6px;
			border-radius: 100%;
			margin-right: 3px;
		}

		time {
			color: var(--text-secondary);
			font-size: 15px;
			font-weight: 200;
		}
	}
}

.tabs {
	a {
		color: inherit;
		color: var(--text-secondary);;
		&.active {
			color: var(--accent);
		}
	}
}

hr {
	margin-top: 50px;
	margin-bottom: 50px;
	border: 0;
	height: 1px;
	background-color: #262525;
	@media (prefers-color-scheme: light) {
		background-color: #b9b9b9;
	}
}

.comments, .newsletter {
	.comment-box {
		font-size: 0.8em;
		line-height: 1.7em;
	}
	.comment {
		a.website {
			text-decoration: none;
			color: var(--accent);
			opacity: 0.8;
			&:hover {
				opacity: 1;
			}
		}
		.info {
			color: var(--text-secondary);
			margin-bottom: 7px;
		}
		img.gravatar-image {
			width: 32px;
			border-radius: 100%;
			margin-bottom: -9px;
			margin-right: 4px;
		}
		span.text {
			color: var(--text-primary);
			white-space: pre-line;
		}
		span.username {
			font-weight: bold;
		}
		p {
			margin: 0;
			border: 1px solid #2b2b2b;
			border-radius: 5px;
			padding: 5px 10px;
			margin-left: 40px;
			margin-bottom: 20px;
			@media (prefers-color-scheme: light) {
				border-color: #bfb79c;
			}
		}
	}
	form {
		.container {
			display: grid;
			gap: var(--grid-gap);
			margin-top: 30px;
			font-size: 0.8em;
			textarea, input {
				font-family: inherit;
				font-size: inherit;
				border: 0;
				border-radius: 5px;
				background: #202020;
				color: var(--text-primary);
				padding: 16px;
				box-sizing: border-box;
				@media (prefers-color-scheme: light) {
					background: #fff;
				}
			}
			textarea {
				resize: vertical;
			}
			input[type="submit"] {
				color: white;
				font-weight: bold;
				cursor: pointer;
				padding: 12px 20px;
				transition: all 0.1s ease-in-out;
				background: rgb(58, 101, 130);
				@media (prefers-color-scheme: light) {
					background: rgb(80, 176, 240);
				}
				&:hover {
					background: #1d9bf0;
				}
			}
		}
		.notif {
			margin-top: 20px;
			border-radius: 5px;
			border: 1px solid #5b5b5b;
			padding: 3px 19px;
			font-size: 0.8em;
		}
		.notif.submitted {
			background: #2b482b;
		}
		.notif.error {
			background: #482b2b;
		}
	}
}

.newsletter form .container {
	display: grid;
	grid-template-columns: 1fr 120px;
	input {
		max-width: 100%;
		min-width: 100px;
	}
}

aside .info {
	top: 20px;
	position: sticky;
}

#home {
	max-width: 1122px;
	.wrapper {
		display: grid;
		gap: 30px;
		grid-template-columns: 1fr;
		@media (min-width: 768px) {
			grid-template-columns: 230px 1fr;
		}
		@media (min-width: 1000px) {
			grid-template-columns: 300px 1fr;
		}
	}
	.blog-entry-list {
		@media (min-width: 768px) {
			margin-top: 44px;
		}
	}
}

#links {
	.entry {
		img {
			max-width: 16px;
			margin-right: 10px;
			&.placeholder {
				/* if light theme invert the image */
				@media (prefers-color-scheme: light) {
					filter: invert(1);
				}
			}
		}
		a {
			margin-right: 10px;
		}
	}
}