/*   
Theme Name: Smurf Archive
Author: Christian Bär
Author URI: www.christianbaer.net
*/

:root {
	--black: #23222c;
	--red: red;
	
	--blue: blue;
	--lightblue: #e9e8e8;
	--grey: #585858;
	--shadow: rgba(0,0,0,0.3);
	--white: white;
	font-size: clamp(16px, 2vw, 40px);
	--header-padding: 5em;
	--radius: 0.0em;


}


* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	background-color:  var(--lightblue);
	color: var(--black);
	scroll-behavior: smooth;
}

article, aside, details, figcaption, figure, .footer, header, hgroup, main, nav, section, summary, img {
	display: block;
	margin: 0;
	position: relative;
}

img{
	width: 100%;
}

audio, canvas, video {
	position: relative;
	display: block;
	width: 100%;
}

h1, h2, h3, h4, h5, h6  {
	line-height: 1em;
	font-size: 1em;
	margin: 0;
	padding: 0;
	font-weight: 700;
}

h2, h1{font-size: 1em; line-height: 1.25em; font-weight: 700; }

mark{
	background-color:var(--blue);
	color: white;
}

ul {
	margin: 0;
	padding: 0;
	
	list-style-type: none;
}

u {

	display: inline-block;
	text-underline-offset: 0.15em;
	text-decoration: underline;
}

a {	color: var(--blue);
	text-decoration: none;
	cursor: pointer;

}

a:hover, a:active {
	cursor: pointer;
	
	
}


button, input {
	font-size: 1em;
	border: 0;
	color: black;
	font-weight: 100;
	background-color: transparent;
	padding: 0;
	outline: transparent;
}

::placeholder{
	
	opacity: 0.5;
}
p{
	margin: 0;
	margin-bottom: 1em;
}

strong{font-weight: 700;}

body {
	display: flex;
	/* to adjust the footer */
	flex-direction: column;
 	/* to adjust the footer */
	height: 100%;
	min-height: 100svh;
	width: 100%;
	overflow-x: hidden;
	margin: 0;
	font-size: 1em;
	line-height: 1.25em;
	font-family: Arial, sans-serif;
	font-weight: 100;
	background-color: var(--lightblue);
	color: var(--blue);
		scroll-behavior: smooth;
}

header{

width: auto;

overflow: hidden;
position: fixed;
z-index: 100;
top: 0;
height: 10em;
display: flex;

flex-wrap: wrap;
align-content: flex-start;
background-color: var(--lightblue);


}
.logo{
	z-index: 1000;
	top: 0;
	left: 50%;
	
	text-align: center;
	padding: 0em;
	position:fixed;
	font-size: 2em;
	transition: transform 0.5s ease;
		border: 0.03em solid transparent;
	transform: translateX(-50%) translateY(0.5em) rotate(-90deg);
	



}
.logo h1{
	font-weight: 100;
	font-style: italic;
		line-height: 0.9em
}
.logo:hover{
	cursor: pointer;
	border: 0.03em solid;
	border-radius: 100%;
		transform: translateX(-50%) translateY(0.5em) rotate(-360deg);
}

nav{
	position: fixed;
	
	display: flex;
	flex-direction: column;
padding: 0.3rem;
	z-index: 10;

}



nav  a{
	font-size: 1.5em;
	text-transform: lowercase;
	padding: 0.2rem 0.3rem;

	border-radius: 100%;
	transition: transform 0.3s ease;
	line-height: 1em;
	position: relative;
		
}

nav a:hover	{
	
	font-style: italic;



	text-decoration: underline;	
}

nav a:hover:after{
	position: absolute;
	content: '';
	left: 50%;

	top: calc(50% + 0.1em);
		transform: translate(-50% , -50%);
	width: 2em;
	height: 1.75em;
	border: 0.04em solid;
	border-radius: 100%;}

nav select{
	font-size: 1.5em;
	padding: 0.6rem;	
	color: var(--blue);
	border: 0.05em solid transparent;
	outline: transparent;
	background-color: transparent;


}

nav .next-btn, nav .prev-btn{
	font-size: 1.5em;
	padding: 0.6rem;	
	position: fixed;
	color: var(--blue);
	transform: rotate(-90deg) translateX(25%) translateY(-0.5em);
	transform-origin: 50% 50%;
	top: 50%;

	left: 0rem;

}

nav .prev-btn{
	left: auto;
	right: 0em;
	transform: rotate(-90deg) translateX(15%) translateY(1.5em);
}

.language-switcher{
	position: fixed;
	right: 0;
	top: 0;
	display: flex;
	gap: 0.3em;
	flex-direction: column;

		padding: 0.6rem 0.6rem 0.6rem 0.6rem;
}
.language-switcher .language{

	text-align: center;
	padding: 0;
	border-radius: 0;
}

.language-switcher a:hover:after{
	width: 1.75em;
	height: 1.5em;
}

select option{
	color: var(--blue);	}

.invert{
	color: var(--lightblue);
}


.about-section{
	padding: 8em 2em 2em 2em;
	z-index: 10;
	font-size: 1.5em;
	line-height: 1.5em;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--blue);
	color: var(--lightblue);
	text-align: center;
	transform: translateX(-100%);
		transition: transform 0.5s ease-in-out;
}

.about-show{
	transform: translateX(0%);

}

.news-section{
	padding: 8em 2em 2em 2em;
	z-index: 10;
	font-size: 1.5em;
	line-height: 1.5em;
	position: fixed;
	top: 0;
	left: 0;
	width:100%;
	
	height: 100%;
	background-color: transparent;
	color: var(--lightblue);
	text-align: center;
	transform: translateY(-120%);
		transition: transform 0.2s ease-in-out;
}
.news-section article{
	background-color: var(--blue);
	padding: 1em;
	max-width: 20ch;
	margin-left: auto;
	margin-right: auto;
}

.news-show{
	transform: translateY(0%);

}

main {width: 100%;
	margin-top: 3.7em;

 }

 .smurf_count{
	display: none;
 }

 .archive {
	
	display: flex;
	gap: 0.6em;
	width: 100%;
	padding: 0.6em;

	flex-wrap: wrap;
 }

 .archive_entry{
	width: auto;
	height: auto;
	position: relative;
	
	overflow: visible;

 

 }

 .entry_info{
		position: absolute;
	display: none;
		top: 0;
		left: 0;
		font-size: 0.75em;
		padding: 0.1em;}
 
 a.archive_entry:hover .card{
 transform: perspective(70em) rotate3d(0.6, 0.05, 0.2, 20deg);
 transform: rotateY(180deg);

 }

 .card{
		width: calc(100vw - 1.2em);
		aspect-ratio: 3 / 4;
		transform-style: preserve-3d;
		transition: 0.5s ease-in-out;
			border-radius: var(--radius);
 box-shadow: 0em 0em 0em lightslategray;
 }

   a.archive_entry:hover{
	background-color: transparent;
   }
  a.archive_entry:hover .card{
 transform: perspective(70em) rotate3d(0.02, 0.25, 0.01, 180deg) scale(.8);
 box-shadow: 2em 0.4em 7em lightslategray;
 z-index: 2;

 }

 .card_front, .card_back{

	position: absolute;
	width: 100%;
	height: 100%;
	border-radius:  var(--radius);
		
			background-color:var(--lightblue);
			backface-visibility: hidden;
			
 }
 .card_front{
	z-index: 1;
	overflow: hidden;
	
 }

 .card_title{
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	padding: 0.6rem;
 }

 .card_back{
	padding: .3rem;
	text-align: left;
	font-size: 1.5em;
color: blue;
	background-color: lightgray;
	transform: rotateY(180deg) ;
	display: flex;
	justify-content: center;
	align-items: flex-start;
 }

 .card_back_text{
	font-weight: normal;

line-height: 1.2em;
margin: 0.5em;
padding: 0.2em;

}
 .card_back_text .block{
	display: block;
 }
 .card_back_text .underline{
	text-decoration: underline;
	text-align: justify;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
display: block;}


 /* SINGLE PAGEs
*/
.single_page{
	display: flex;
	flex-wrap: wrap;
}
.single_container{
		display: flex;
	gap: 0.6em;
	width: 100%;
	padding: 0.6em;

	flex-wrap: wrap;
}

 .single_image img{
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border-radius:  var(--radius);
 }
 .single_text{
	
	font-size: 1.5em;
	line-height: 1em;

	width: calc(50% - 0.3em);
 }

 .single_text p{
	border-bottom: 1px solid var(--blue);

	margin: 0 1.2em 0.25em;
 }
 .single_text span{
	 width: 100%;
 }
 .single_text p span:first-of-type{
	

	
 }
footer {
	font-size: 1.5em;
align-self: flex-end;
height: auto;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	position: relative;
	bottom: 0;
z-index: 100;
width: 100%;

	
	
}

footer a{
	text-transform: lowercase;
	padding: 0.6rem;
	
}

footer a.mail{
	position: fixed;
	bottom: 0;
	right: 0;}



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

nav {

	flex-direction: row;
	width: 80%;
	justify-content: space-between;	}

main{
	margin-top: 2.1em;
}	

.card{
		width: calc(50vw - 0.9em);
	
 }
  .single_text{
margin-top: calc(50vh - 0em);

	width: calc(50% - 0.3em);
 }
	
 .single_text p span:first-of-type{
	padding-left: 0.3em;
 }	
 
}
@media only screen and (min-width: 1200px) {

	
}