@font-face {
    font-family: Amarillo;
    src: url("/wp-content/themes/twocolumnsblog/fonts/Amarillo.otf") format("opentype");
}

:root {
	--margin-size: 0.5rem;
	--padding-size: 0.5rem;
	--border-width: calc(1em/16);
}

@font-face {
    font-family: Amarillo;
    src: url("/wp-content/themes/twocolumnsblog/assets/fonts/Amarillo.otf") format("opentype");
}


:root {
	--header-background-color: #243f17;   /* dark green */
	--header-font-color: #ffffff;         /* white      */
	
	--navigation-menu-color: #fefccc;     /* yellow */
	--selected-menu-color:   #b3b18f;     /* dark yellow */

 	--content-font-color: rgb(10,15,20);
	
	--color-0: rgb(255, 255, 255);
	--color-1: rgb(245, 240, 235);
	--color-2: rgb(235, 225, 215);
	--color-3: rgb(225, 210, 195);
	--color-4: rgb(215, 195, 175);
	--color-5: rgb(205, 180, 155);
	--color-6: rgb(195, 165, 135);
	--color-7: rgb(185, 150, 115);
	--color-8: rgb(175, 135, 95);
	--color-9: rgb(165, 120, 75);
	--color-10: rgb(155, 105, 55);
	--color-11: rgb(145, 90, 35);
	--color-12: rgb(135, 75, 15);
}

body {
	background-image: url(/wp-content/themes/twocolumnsblog/assets/pictures/background_picture.jpg);
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.4) 100%), 
		url(/wp-content/themes/twocolumnsblog/assets/pictures/background_picture.jpg);
	background-color: rgba(255, 255, 255, 0.6); 
	background-repeat: repeat;
	background-size: 100%;
	
	font: 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#body-container {
}

#page-header-container {
	background-color: var(--header-background-color);
	color: var(--header-font-color);
}

#page-header {
	text-align: center;
}

#site-title h1 {
	font-family: Amarillo, cursive;
	font-size: 1.25rem;
	line-height: 2.5rem;
}

#site-description {
	float: left;
	width: 100%;
	text-align: center;
	margin-bottom: 1rem;
}
#site-description h2 {
	font-weight: unset;
	font-size: 1rem;
}

#site-motto {
	float: left;
	margin: 0 auto;
	padding-top: 0.5rem;
}

@media only screen and (min-width: 32rem) {
	#page-header {
		justify-content: center;
	}

	#site-title {
		display: inline-block;
		margin-right: 0.4rem;
	}

	#site-title h1 {
		display: inline-block;
	}

	#site-description {
		font-family: Amarillo, cursive;
		font-size: 1.25rem;
		color: #ffffff;		
		display: inline-block;
	}

	#site-description h2 {
		display: inline-block;
		font-size: 1.25rem;
		line-height: 2.5rem;
		font-weight: 700;
	}
	
	#site-motto {
		width: 100%;
	}
}

@media only screen and (min-width: 55rem) {
	#page-header {
		justify-content: left;
		padding: 2.5rem 2.5rem 1.25rem 2.5rem;
	}

	#site-description {
		float: none;
		padding-right: 2.5rem;
		margin-bottom: 0;
		text-align: left;
		width: auto;
	}
	
	#site-description:before {
		content: "- ";
	}

}

@media only screen and (min-width: 80rem) {
	#site-title {
		float: left;
	}
	#site-description {
		float: left;
	}
	
	#site-motto {
		padding-top: 0;
		float: none;
		text-align: left;
	}
}

.navigation-menu {
	clear: left;
}

#theme-navigation-menu {
	display: block;
/*	border-style: solid;
    border-color: var(--header-background-color);;
	border-width: 1px; */
	justify-content: left;	
	text-align: left;
	margin-top: 1rem;
}

#theme-navigation-menu li:hover {
	color: var(--color-1);
}

#theme-navigation-menu .sub-menu {
	display: none;
}

#theme-navigation-menu > .current-menu-item > .sub-menu, 
#theme-navigation-menu .sub-menu:has(.current-menu-item) {
	position: absolute;
	left: 0;
	display: block;
	color: var(--navigation-menu-color);
}

#theme-navigation-menu > .current-menu-item > .sub-menu, 
#theme-navigation-menu .sub-menu:has(.current-menu-item) {
	margin-left: 2.5rem;
	padding-left: 2.5rem;
}


#theme-navigation-menu > .current-menu-item > .sub-menu > li, 
#theme-navigation-menu .sub-menu:has(.current-menu-item)> li {
	display: inline-block;
	padding: 0 1rem;
	margin: 0 0.25rem;
}

#theme-navigation-menu > .menu-item {
	display: inline-block;
	padding: 0.5rem 1rem;
	margin: 0 0.25rem;
	color: var(--navigation-menu-color);
	font-weight: bold;
}

#theme-navigation-menu .current-menu-item {
	color: var(--selected-menu-color);
}

#primary {
	background-color: var(--color-1);

}


article, aside {
	border-color: var(--color-4);
	color: --content-font-color;
}

.entry-content p {
	text-align: justify;
}


.widget:first-child > .widget-title {
	margin-top: 0;
} 
.widget > .widget-title {
	margin-top: 1rem;
}

.archive-page-header, .archive-description {
	display: none;
}

.entry-content > .wp-post-image {
	display: block;
	max-height: 24rem;
	width: auto;
	height: auto;
	margin: 0 auto;
}

p {
	margin-block-start: 1em;
    margin-block-end: 1em;
}