.sidebar {
	display: flex;
	flex-direction: column;
	background-color: var(--primary-color);
}

@media only screen and (min-width: 1024px) {
	.sidebar {
		flex-grow: 1;
		flex-basis: 375px;
		min-width: 350px;        
		max-width: 400px;
		position: relative;
	}
}

.sidebar-wrapper {
	position: sticky;
	top: 0;
	height: 100%;
}

#sidebar-primary .website-main-navigation {
	margin: 0;  
	list-style: disclosure-closed;
	padding-left: 1.25em;
}

#sidebar-primary .website-main-navigation .menu-item {
	padding-top: .75em;
}

#sidebar-primary #le-fox {
	position: absolute;
	top: 0;
	right: 0;
	width: 200px;
	height: 100%;
	background-image: url("../media/le-fox.png");
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
	filter: drop-shadow(drop-shadow(1px 2px));
	color: black;
}

#sidebar-primary .website-main-navigation a {
	font-size: 22px;
	display: block;
	align-content: center;
	margin: 0;
	font-family: "Poiret One";
}

.sidebar .searchform > div {
	display: flex;
}

.sidebar .searchform input[type="text"] {
	width: 100%;
	border-radius: 5px 0 0 5px;
	border: none;
	box-shadow: none;
}

.searchform input[type="submit"] {
	border-radius: 0 5px 5px 0;
}

.sidebar .searchform .screen-reader-text {
	display: none;
}

.sidebar-level-1 {
	background-color: #34315b;
	position: relative;
	background-size: contain;
    height: 25vmin;
}

.sidebar-level-1 .website-title {
	margin-top: auto;
	z-index: 3;
	margin-bottom: 0;
}

.sidebar-level-1 .website-title > a {
	/*color: #9c92ac !important;*/
	color: var(--button-color);
	text-shadow: 1px 1px 2px black;
}

.sidebar-level-1::after {
	content: "";
	background-image: url("../media/faded-slant-top.svg");
	height: 4rem;
	width: 100%;
	display: block;
	position: absolute;
	left: 0;
	bottom: -4rem;
	background-size: cover;
	background-repeat: no-repeat;
}

.sidebar-level-2::after {
	content: "";
	background-image: url("../media/faded-slant-bottom.svg");
	height: 4rem;
	width: 100%;
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	background-size: cover;
	background-repeat: no-repeat;
}

.sidebar-level-2 {
	background-color: var(--primary-color);
	padding: 2rem;
}

.website-main-navigation a::before {
	content: url("../media/icons/cup-of-tea.png");
	padding-right: .25em;
	/* ul padding is 1.25em where 1em is an icon and 0.25em is a padding right */
	margin-left: -1em;
	transition: all 180ms ease-out;
}

.website-main-navigation .menu-item.selected a {
	color: var(--link-hover-color);
}

.website-main-navigation .menu-item.selected a::before,
.website-main-navigation .menu-item a:hover::before  {
	padding-left: 1em;
}

.website-main-navigation a::after {
	display: none;
}

footer {
	/*TODO replace with variable something like --website-main-color*/
	color: #6fa329;
	font-weight: bold;
	font-family: "Philosopher", sans-serif;
	font-size: 18px;
	text-align: center;
}


.mobile-menu-close-button {
	display: none;
}
/* >>> Language switcher styles */
.lang-switcher {
	list-style: none;
	margin: 0;
	display: flex;
	position: absolute;
	bottom: 0;
	z-index: 12;
	left: 0;
	padding: .75em;
}

.lang-switcher select,
.lang-switcher option {
  padding: .25em 1em;
  text-transform: uppercase;
  font-family: "Poiret One", sans-serif;
  background: var(--button-color);
  border: none;
  border-radius: 5px;
}

.lang-switcher option:hover {
	background: var(--link-hover-color);
}

/* >>> THE FUNNY */
.website-title + .greeting {
	font-family: "Hymmnos";
	color: var(--secondary-color);
	display: block;
	margin-right: 2em;
	position: absolute;
	bottom: 0;
	align-self: flex-end;  
	z-index: 3;
}

/* --- MOBILE STYLES --- */
@media screen and (max-width: 600px) {
	.sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;    
		width: 100vw;
		z-index: 12;
		transition: 750ms;
	}

	.sidebar-wrapper {
		margin-top: var(--mobile-header-height);
		position: sticky;
		left: 0;
		right: 0;    
		height: calc(100vh - var(--mobile-header-height));
	}

	#sidebar-primary .website-main-navigation {
		padding-left: 0;
		list-style: none;
	}

	.sidebar.mobile-view-hidden {    
		transform: translate(-100vw);
	}

	.sidebar-level-1 {
		padding-top: 3rem; /*for close button*/
	}

	.sidebar .sidebar_widget {
		text-align: center;
		margin-top: 2.5rem;
	}

	#sidebar-primary .website-main-navigation .menu-item {
		place-content: center;
	}

	.mobile-menu-close-button {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 13;
		margin: 1em;
	}
	  
	.mobile-menu-close-button img {
		width: 2em;
		height: auto;
		color: white;
	}
}