@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

:root {
	/*--body-color: #ddebf7;*/
	--body-color: #f7f7f7;
	--body-background-color: #112a40;
	--h-color: #ffe699;
	--a-link-color: #ffd966;
	--blockquote-background-color: #112a40;
}

/* 1. Use a more-intuitive box-sizing model. */
*, *::before, *::after {
	box-sizing: border-box;
}
/* 2. Remove default margin */
/*
* {
	margin: 0;
	padding: 0;
}
*/
/*
Typographic tweaks!
3. Add accessible line-height
4. Improve text rendering
*/
/*
body {
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
}
*/
/* 5. Improve media defaults */
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
/* 6. Remove built-in form typography styles */
input, button, textarea, select {
	font: inherit;
}
/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}
/* 8. Create a root stacking context */
#root, #__next {
	isolation: isolate;
}

html, body {
	background-color: var(--body-background-color);
	color: var(--body-color);
	font-family: "Merriweather", serif;
	/*font-family: "Times New Roman", serif;*/
	/*font-family: "Georgia", serif;*/
	font-size: 18px;
	line-height: 1.5;
	/*background-image: url(beautiful-blue-stars-fill.jpg);*/
	background-image: url(candles.webp);
	background-repeat: repeat;
	background-attachment: fixed;
	margin: 0;
}

h1 {
	/*color: var(--h-color);*/
	color: #fff;
}
h2,h3,h4,h5,h6 {
	color: var(--h-color);
}

a, a:visited, a:hover, a:active {
	color: var(--a-link-color);
}

.blog {
	background-color: var(--body-background-color);
	max-width: 640px; /* 16 x 40 oppure 1920 / 3*/
	margin: 0 auto;
	padding: 16px;
}

p, .blog-post-date {
	margin-top: 16px;
}

.contact {
	text-align: center;
	margin-top: 32px;
	padding: 16px;
	background-color: var(--body-color);
	color: var(--body-background-color);
}
.contact a,
.contact a:hover,
.contact a:active,
.contact a:visited {
	color: var(--body-background-color);
}

#scrivimi {
	padding: 8px 16px;
	cursor: pointer;
	background-color: var(--body-color);
	border: 1px solid var(--body-background-color);
	color: var(--body-background-color);
	border-radius: 5px;
}

.nav {
	position: relative;
	height: 50px;
	padding: 0 16px;
}
.back, .next {
	position: absolute;
	font-size: 50px;
	text-decoration: none;
	line-height: 1;
	font-weight: bold;
}
.back {
	left: 0px;
}
.next {
	right: 0px;
}

blockquote {
	/*display: inline-block;*/
	max-width: 343px;
	margin: 0 auto;
	padding: 16px;
	background-color: rgba(255,255,255,0.2);
	font-style: italic;
}
blockquote>p::before {
	content: "“";
}
blockquote>p::after {
	content: "”";
}
cite {
	display: block;
	text-align: right;
}
cite::before {
	/*content: "- ";*/
	content: "– ";
	/*content: "— ";*/
}
h1,h2,h3 {
	text-align: center;
}