@charset "utf-8";
/*
Theme Name: Schlegel 2021
Theme URI: https://benjaminschlegel.ch
Author: Benjamin Schlegel
Author URI: https://benjaminschlegel.ch
Description: A theme
Tags: blog
Version: 0.1
Requires at least: 5.7
Tested up to: 5.7.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: schlegel2021
*/


@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@100;400&display=swap');


body, html{
	height: 100%;
	margin: 0px;
	counter-reset: listicle;
}

main{
	padding-top: 60px;
	padding-bottom: 100px;
	font-family: 'Roboto', sans-serif;
}

main.no_bg_top{
	padding-top: 120px;
}

main p, main ul, main ol, main pre, main table, main form, .addtoany_share_save_container, .wp-block-audio{
	font-size: 1.2em;
	max-width: 640px;
	margin: auto !important;
	padding-bottom: 20px;
	padding-top: 10px;
}

main.academie_container p, main.academie_container ul, main.academie_container ol, main.academie_container pre, main.academie_container table, main.academie_container form, .academie_container .addtoany_share_save_container, .academie_container .wp-block-audio{
	max-width: 820px;
}

main a{
	text-decoration: none;
	color: steelblue;
}

article{
	padding-bottom: 10px;
}

p.abstract_preview{
	padding-bottom: 0px;
	font-size: 1.1em;
	padding-top: 20px;
}

article.abstract p{
	padding-top: 0px;
	background-color: #f6f6f6;
	padding: 5px;
	font-size: 1.1em;
}

h1,h2,h3,h4,h5,h6{
	font-family: 'Anton', sans-serif;
}

section.tidy{
	max-width: 640px;
	margin: auto;
	padding-top: 20px;
	padding-bottom: 50px;
}

.academie_container  section.tidy{
	max-width: 820px;
}

.container-tidy{
	max-width: 640px;
}

main h1{
	font-size: 2em;
	max-width: 640px;
	margin: auto;
	margin-bottom: 30px;
}

main h2{
	font-size: 1.6em;
	max-width: 640px;
	margin: auto;
}

main.academie_container h2, main.academie_container h1{
	max-width: 820px;
}

main h3{
	font-size: 1.4em;
	max-width: 640px;
	margin: auto;
}

main h4{
	font-size: 1.3em;
	max-width: 640px;
	margin: auto;
}

main h5{
	font-size: 1.2em;
	max-width: 640px;
	margin: auto;
}

main h6{
	font-size: 1em;
	max-width: 640px;
	margin: auto;
}

main img{
	width: 100%;
	height: auto;
	margin: auto; 
}

figcaption{
	text-align: center;
	font-size: 1em;
}

#content{
	padding-top: 80px;
}

/* blog */
.blog_preview{
	max-width: 640px;
	margin: auto;
	margin-bottom: 50px;
}

.blog_preview h1{
	margin-top: 20px;
}

.blog_preview a:link, .blog_preview a:visited, .blog_preview a:hover, .blog_preview a:active{
	color: black;
}

.navigation{
	max-width: 640px;
	margin: auto;
	font-family: 'Anton', sans-serif;
	font-size: 3em;
	weight: bolder;
	text-align: center;
}

.navigation a:link, .navigation a:visited, .navigation a:hover, .navigation a:active{
	color: black;		
}

h2.listicle{
	background-color: #D62A05;
	position: relative;
	padding-left: 60px;
	padding-right: 10px;
	color: white;
	padding-bottom: 5px;
	padding-top: 5px;
}
	

h2.listicle:before{
	content: counter(listicle);
	counter-increment: listicle;
	width: 50px;
	display: block;
	display:flex;
	flex-direction:row;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
}

/* social media icons */
.sm-icon{
	color: #dddddd;
}

.sm-icon span{
	padding-left: 10px;
}

.sm-icon:hover{
	color: white;
}

.sm-icon img{
	filter: invert(88%) sepia(0%) saturate(152%) hue-rotate(148deg) brightness(104%) contrast(90%);
}

.sm-icon img:hover{
	filter: invert(100%) sepia(10%) saturate(1723%) hue-rotate(275deg) brightness(109%) contrast(93%);
}

.sm-icon.dark{
	color: #444444;
}

.sm-icon.dark:hover{
	color: black;
}

.sm-icon.dark img{
	filter: invert(25%) sepia(0%) saturate(1%) hue-rotate(220deg) brightness(92%) contrast(86%);
}

.sm-icon.dark img:hover{
	filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(238deg) brightness(100%) contrast(101%);
}

.front-overlay{
	color: white;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-left: 100px;
}

.front-overlay h1{
	font-size: 4em;
	padding-left: 30px;
	padding-right: 30px;
	max-width: 100%;
	width: 100%;
}

.front-overlay p{
	font-family: 'Roboto', sans-serif;
	font-size: 3em;
	letter-spacing: 0.1em;
	font-weight: 100;
	padding-left: 30px;
	padding-right: 30px;
	max-width: 100%;
	
}

/* press */
.press_article_preview{
	width: 100%;
	max-width: 400px;
	margin: 10px;
	display:inline-block;
}

#press_articles{
	margin: auto;
}

/* photo */
.photo{
	height: 280px;
	padding: 10px;
	display:inline-block;
	max-width: 100%;
}

.photo img{
	height: 100%;
	width: auto;
}

/* iframe */
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


img.alignright{
	margin-left: 50px;
	margin-bottom: 10px;
	margin-top: 10px;
}

@media(max-width: 940px){
  img.alignright{
	margin-left: 0px;
	width: 100%;
	height: auto;
  }
}

.social-media-container, .sm{
	max-width: 500px;
	margin: auto;
}

.box{
	background-color: #dddddd;
	padding: 10px;
	padding-top: 30px;
}

.box p{
	font-size: 1em;
}


.wp-block-audio{
	max-width: 640px;
	margin: auto;
	margin-top: 20px;
}


/* xxl */
@media(max-width: 1400px){
	.front-overlay h1{
		font-size: 3em;
	}

	.front-overlay p{
		font-size: 2em;
		letter-spacing: 0.1em;
	}
}

/* xl */
@media(max-width: 1200px){
	.front-overlay{
		margin-left: 50px;	
	}
}

/* lg */
@media(max-width: 992px){
	
	.front-overlay h1{
		font-size: 2em;
	}

	.front-overlay p{
		font-size: 1.5em;
		letter-spacing: 0.1em;
	}
	
	/* photo */
	.photo{
		width: 100%;
		height: auto;
		padding: 0px;
		padding-bottom: 10px;
		display:block;
	}

	.photo img{
		height: auto;
		width: 100%;
	}
}

/* md */
@media(max-width: 768px){
	.front-overlay{
		margin-left: 20px;	
	}
	
	.front-overlay h1{
		font-size: 1.6em;
	}

	.front-overlay p{
		font-size: 1.3em;
		letter-spacing: 0.05em;
	}
}

/* sm */
@media(max-width: 576px){
	
}

.front-overlay.post{
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin-left: 0px;
	text-align: center;
}

.front-overlay.post h1{
	/*left: 50%;*/
	width: 100%;
	max-width: 100%;
}