/************************************* FONTS, COLORS *************************************/

:root {
	--color_dark_green: #304532;
	--color_vanilla: #F4F1E7;
	--color_green: #568E7B;
	--color_brick: #AE5732;
	--color_blue: #2D3A5E;
	--font_title: 'Arya Single', sans-serif;
	--font_paragraph: 'Suisse Screen', sans-serif;
}

@font-face {
	font-family: 'Arya Single';
	src: url('fonts/arya_single/arya_single.woff2') format('woff2');
}

@font-face {
	font-family: 'Suisse Screen';
	src: url('fonts/suisse_screen/SuisseScreen-Regular.otf') format('opentype');
	font-weight: 400; /* normal */
}

@font-face {
	font-family: 'Suisse Screen';
	src: url('fonts/suisse_screen/SuisseScreen-Bold.otf') format('opentype');
	font-weight: 700; /* bold */
}



/************************************* BASICS *************************************/

* {
	outline: none; /* remove the dirty outline on focus (on Chromium based browsers) */
	-webkit-tap-highlight-color: transparent;
}

.hidden {
	display: none !important;
}

.br_mobile { display: none; }
.br_desktop { display: initial; }

@media only screen and (max-width: 950px) {
	.br_mobile { display: initial; }
	.br_desktop { display: none; }
}


/************************************* NAVBAR *************************************/

#rthmn_header {
	color: var(--color_dark_green);
	min-height: 30px;
	padding: 35px 0;
	/* new: */
	background: var(--color_vanilla);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	transition: 0.3s;
}

#rthmn_header.scrolling {
	background: #F4F1E7C7;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	/*padding: 15px 0;*/
	box-shadow: 0 0 15px 0 #00000057;
}

#rthmn_header div {
	display: inline-block;
	position: absolute;
}

@media only screen and (max-width: 950px) {
	#rthmn_header {
		padding: 10px 0;
	}

	#rthmn_header.scrolling {
		/*top: -50px;*/
		/*padding: 5px 0;*/
	}

	#rthmn_header div {
		display: block;
		position: revert;
		margin: 20px;
	}
}

#rthmn_website_name {
	font-family: var(--font_title);
	text-transform: uppercase;
	left: 5vw;
	font-size: 22px;
	line-height: 29px;
	cursor: pointer;
}
	
#rthmn_navbar {
	right: 4vw;
}

#rthmn_header.over_hero_pic {
	/* padding-bottom: 250px; */
	background: linear-gradient(rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
	/* font-weight: bold; */
}

#rthmn_header.over_hero_pic #rthmn_website_name {
	/*display: none;*/
	color: transparent;
}

#rthmn_header.over_hero_pic #rthmn_navbar {
	position: revert;
}

#rthmn_header.over_hero_pic #rthmn_navbar a {
	color: white;
}

#rthmn_navbar a {
	margin: 0 1vw;
	text-decoration: none;
	font-size: 20px;
	line-height: 34px;
	color: var(--color_dark_green);
}

@media only screen and (max-width: 700px) {		
	#rthmn_website_name {
		margin-top: 0;
	}
	
	#rthmn_navbar a {
		margin: 0 3vw;
	}

	/*#rthmn_header.over_hero_pic #rthmn_navbar a {
		margin: 0 3vw;
	}*/

	#rthmn_header.over_hero_pic #rthmn_navbar {
		margin-top: 0;
	}
}

#rthmn_navbar a:hover, #rthmn_navbar a:focus, #rthmn_navbar a:active {
	text-decoration: underline;
}

#rthmn_navbar a.current {
	text-decoration: underline;
	font-weight: bold;
}


/* following lines are making the content of the page move up as the navbar shrinks when the user scrolls */

#content_wrapper {
	padding-top: 100px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	transition: 0.3s;
}

#content_wrapper.scrolling {
	padding-top: 45px !important;
}

@media only screen and (max-width: 950px) {
	#content_wrapper {
		padding-top: 143px !important;
	}
	
	#content_wrapper.scrolling {
		padding-top: 80px !important;
	}
}



/************************************* FOOTER *************************************/

#rthmn_footer {
	line-height: normal;
	padding: 0 20px;
	border-bottom: 10px solid var(--color_brick);
}

#rthmn_footer h1 {
	margin-top: 30px;
}

#rthmn_footer p {
	line-height: 30px;
	color: var(--color_brick);
}

#rthmn_footer .button {
	background: var(--color_brick);
	color: white; /* only useful for WordPress */
	text-transform: unset;
	padding: 10px 35px 7px 35px;
	margin: 15px 5px;
}

@media only screen and (max-width: 550px) {
	#rthmn_footer .button:first-of-type {
		display: block;
		margin: 9px auto 0 auto;
		width: fit-content;
	}
}

#rthmn_footer > p > a {
	color: var(--color_brick);
}

#rthmn_footer_graphics {
	height: 45px;
	background-image: url("https://romainthiemann.com/graphics/footer_graphics.svg");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: contain;
	margin-top: 15px;
}