/* !-------- Basics --- */
body {
	background-color: #fff;
	background: url(), linear-gradient(90deg, transparent 200px, #6e9fda 79px, #6e9fda 202px, transparent 81px), linear-gradient(to left, transparent 200px, #da8b8b 202px, transparent 202px), linear-gradient(#eee .1em, transparent .1em);
	background-size: 100% 1.7em; /* Horizontal line Gap */;
	color: #000000;
	font-family: 'Faculty Glyphic', sans-serif;
}
a {
	color: ;
}
a:hover, a:focus {
	color: #820011;
}
h1, h2, h3, h4, h5, h6 {
	color: #000000;
	margin:  0.5rem auto;
	text-align: center;
	font-family: 'Monsieur La Doulaise', sans-serif;
}

p {
	margin: 0.5rem 0;
}

/* !-------- Sections within the page --- */

.image-content, .gallery-content, .gallery-info, .archive {
	position: relative;
	background: rgba(255, 255, 255, 0.5);
	border: 3px solid #8200;
	border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
	
	&::before {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		content: '';
		transform: translate3d(-50%, -50%, 0) scale(1.001) rotate(0.5deg);
		border: 2px solid #8200;
		border-radius: 2% 3% 5% 4% / 1% 1% 2% 4%;
	}
}

.image-content a, .gallery-content a, .gallery-info a, .archive a {
	position: relative;
}

#left {
	background: ;
}

#right {
	background: ;
	margin-top: -3rem;
}

.archive-post, .archive-link {
	border-bottom: 1px solid;
}

.home {
	margin-top: -20px;
}

/* !-------- Details --- */

.stamp {
	margin: auto;
	padding: 1rem;
	box-sizing: border-box;
  --radius: 7px; /* Perforation size: */
	background-image:
		radial-gradient(var(--radius), transparent 98%, #fff /* outer color */ ),
		linear-gradient(#fff 0 0); /* fill color */
	background-repeat: round, no-repeat;
	background-position:
		calc(var(--radius) * -1.5) calc(var(--radius) * -1.5), 50%;
	background-size:
		calc(var(--radius) * 3) calc(var(--radius) * 3),
		calc(100% - var(--radius) * 3) calc(100% - var(--radius) * 3);
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.5));
}

.sticker {
	filter: drop-shadow(3px 5px 3px rgba(0,0,0,0.5));
}

.sidebar img {
	padding: 0.5rem;
	box-sizing: border-box;
}

#left a {
	width: 80%;
	margin: 0.5rem auto;
	padding: 0;
}

#right .sticker {
	padding: 0;
}

/* !-------- Torn Paper effect --- */

.page-header {
	filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
}

.page-header {
	font-family: 'Monsieur La Doulaise', sans-serif;
}
.main-menu {
	background: #fff;
}
.header-fade {
	min-height: 240px;
	padding: 0.5rem 0;
	background: #fff;
	clip-path: polygon(0% 0%, 100% 0%, 100% 52.58%, 97.88% 51.6%, 95.04% 51.8%, 91.34% 53%, 89.11% 54.98%, 84.79% 54.39%, 80.8% 58.05%, 76.45% 60.39%, 72.69% 65.07%, 71.73% 67.2%, 70.52% 67.13%, 69.42% 68.11%, 68.33% 67%, 65.71% 67.1%, 63.72% 64.49%, 62.58% 64.68%, 60.97% 66.69%, 59.69% 67%, 58.31% 66.34%, 57.3% 68%, 56.29% 67.6%, 54.91% 69%, 52.9% 68.2%, 50.16% 72.62%, 48.21% 72.83%, 46.38% 75.04%, 44.84% 73.3%, 42.6% 77.45%, 41.31% 77.63%, 39.12% 80.32%, 37.77% 80.54%, 36.38% 78.66%, 35.28% 77.22%, 33.65% 77%, 32.07% 75.84%, 30.3% 75.68%, 28.85% 74.46%, 25.27% 76%, 22.89% 77.15%, 19.67% 77.85%, 16.93% 79.84%, 13.28% 82.02%, 10.44% 78.75%, 7.86% 79.8%, 5.69% 78.7%, 3.85% 76.02%, 2.11% 72.5%, 0% 71%);
}
.header-alt {
	min-height: 150px;
}

/* !-------- Header animation --- */

.header-fade {
	display: grid;
	width: 100%;
	margin: auto;
}

.header-fade > * {
	grid-area: 1 / -1;
}

.header-cycle {
	max-height: 180px;
	margin: 0 auto;
	opacity: 0;
	animation: anim 6s infinite;
	transition: 0.5s;
}

.header-cycle:nth-child(1) {
	animation-delay: 0s;
}

.header-cycle:nth-child(2) {
	animation-delay: 2s;
}
.header-cycle:nth-child(3) {
	animation-delay: 4s;
}
.header-cycle:nth-child(4) {
	animation-delay: 6s;
}
.header-cycle:nth-child(5) {
	animation-delay: 8s;
}
.header-cycle:nth-child(6) {
	animation-delay: 10s;
}
.header-cycle:nth-child(7) {
	animation-delay: 12s;
}
.header-cycle:nth-child(8) {
	animation-delay: 14s;
}
.header-cycle:nth-child(9) {
	animation-delay: 16s;
}
.header-cycle:nth-child(10) {
	animation-delay: 18s;
}

.header-cycle:nth-last-child(3):first-child, 
.header-cycle:nth-last-child(3):first-child ~ .header-cycle {
	animation-duration: 6s;
}

.header-cycle:nth-last-child(6):first-child, 
.header-cycle:nth-last-child(6):first-child ~ .header-cycle {
	animation-duration: 12s;
}

.header-cycle:nth-last-child(9):first-child, 
.header-cycle:nth-last-child(9):first-child ~ .header-cycle {
	animation-duration: 18s;
}

.header-cycle:nth-last-child(10):first-child, 
.header-cycle:nth-last-child(10):first-child ~ .header-cycle {
	animation-duration: 20s;
}

@keyframes anim {
	0% { opacity: 0; z-index: 100;}
	5% { opacity: 1;}
	10% { opacity: 1;}
	12% { opacity: 0; z-index: 1;}
	100% { opacity: 0;}
}

/* !-------- Main menu --- */

#menu li a{
	color: #000;
    background: ;
	border-radius: ;
	margin-bottom: ;
}

#menu li a:hover {
	color: #da8b8b;
    background: ;
}

.main-menu #main-menu .level-1 {
	background: #fff;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.5));
}

#menu .level-1 li a{
	color: ;
	margin-bottom: ;
}

#menu .level-1 li a:hover {
	color: #da8b8b;
    background: ;
}

#menu a.arrow::after {
    transition:border-color 0.5s;  
}

footer {
	border-top: 1px solid;
	background: #333;
	color: #fff;
}

footer #main-menu a {
	font-size: 1rem;
	color: #fff;
}

footer #menu li:hover > ul {
    display: none;
}

/* !-------- Site banner and menu links --- */
#main-menu a{
	font-size: 1.5rem;
}

.page-header a img:hover, .page-header a img:focus, .comic-nav a:hover, .comic-nav a:focus {
	filter: drop-shadow(0px 0px 10px #);
}

/* !-------- Small screens, do not touch --- */

/* Medium screens */
@media (max-width: 1200px){
	body {
		background-image: linear-gradient(#eee .1em, transparent .1em);
	}
}

@media screen and (max-width: 900px) {
	.page-header {
		width: 100%;
		border: none;
		margin-bottom: 2rem;
	}
	.header-alt {
		flex-direction: column;
		justify-content: center;
		padding: 1rem 0;
		box-sizing: border-box;
	}
	#menu {
		color: #000;
		background: ;
	}
	#menu li a {
		margin: 0;
	}
	#menu li a:hover {
		color: #da8b8b;
	}
	#menu li a:hover, #menu .level-1 li a, #menu .level-1 li a:hover {
		background: none;
	}
	.main-menu #main-menu .level-1 {
		background: none;
		filter: none;
	}
	footer #menu li:hover > ul {
		display: block;
	}
	.page-content article {
	box-sizing: border-box;
	}
	#left {
		order: 3;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	#left a {
		width: 45%;
	}
	#right {
		margin-top: 0;
	}
}