@font-face {
    font-family: Raleway;
    src: url("fonts/Raleway-Regular.ttf");
}
@font-face {
	font-family: Playfair;
	src: url("fonts/PlayfairDisplay-Regular.ttf");
}
body {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: Raleway, Arial;
    /*font-family Garamond;*/
}
h2 {
	text-align: center;
	font-family: Playfair;
}
hr {
	border-color: darkgreen;
	width: 75%;
	margin: 100px auto;
}
h1 {
	margin: 5vw;
	text-align: center;
	font-size: 36px;
	font-family: Playfair;
}
.panel-title {
	margin: 3vw auto;
	text-align: center;
	font-size: 48px;
	background: radial-gradient(ellipse, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 35%);
	padding: 7vw;
}
.landscape {
	background-image: url('images/landskap.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	/*background-size: auto 100%;*/
	background-size: 100% auto;
	width: 100%;
	height: 35vw;
	padding: 0px;
}
.summary {
	width: 50%;
	margin: 0 auto;
	padding: 50px 0;
	text-align: center;
}
.sidebar-buffer {
	position: fixed;
	left: 0;
	top: 0;
	width: 300px;
	top: 20%;
	transform: translateX(-90%);
	transition: 0.5s;
	/*background-color: rgba(3, 3, 3, 0.6);*/
}
.sidebar {
	background-color: rgba(54, 106, 57, 0.80);
	width: 275px;
	opacity: 0.9;
	overflow-x: hidden;
	float: right
}

.sidebar-border {
	border: 2px solid rgb(237, 235, 164);
	margin: 4px;
}
.sidebar-border2 {
	border: 1px solid rgb(237, 235, 164);
	margin: 4px;
}

.sidebar-buffer:hover {
	transform: translateX(0%);
}

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

.sidebar ul li {
	padding: 8px;
	text-align: center;
}

.sidebar ul li a {
	color: rgb(237, 235, 164);
	text-decoration: none;
	display: block;
	font-size: 20px;
	height: 35px;
}

.sidebar ul li a:hover {
	background-color: #156232;
	font-size: 0px;
	border-radius: 5px;
}

.sidebar ul li a:hover:after {
	content: attr(data-hover);
	font-size: 20px;
}

.menu-marker {
	opacity: 0.0;
	display: inline-block;
}

.menu-name {
	display: inline-block;
}

.content {
	margin-left: 0px;
	padding: 0px;
	display: grid;
	grid-template-columns: auto auto auto;
	align-items: start;
	grid-auto-rows: min-content;
}

.images-left, .images-right {
	/*
	overflow: hidden;
	display: grid;
	grid-template-rows: repeat(auto-fill, 14vw);
	*/
	width: 14vw;
	height: 100%;
	padding: 0px;
	margin: 2vw;
	/*
	background-size:
		contain,
		contain,
		contain,
		contain,
		contain,
		contain,
		contain,
		contain;
		*/
}
.sidobild-right {
	width: 14vw;
	height: 14vw;
	object-fit: cover;
	object-position: 0 0;
}
.sidobild-left {
	width: 14vw;
	height: 14vw;
	object-fit: cover;
	object-position: 100% 0;
}
.topic-pic-right {
	float: right;
	margin: 0 0 10px 10px;
	width: 150px; /* Adjust the width as needed */
	object-fit: contain
}
.topic-pic-left {
	float: left;
	margin: 0 0 10px 10px;
	width: 150px; /* Adjust the width as needed */
	object-fit: contain
}
.container {
	padding: 0px;
}

.container1 {
	padding: 20px;
	--b: 3px;   /* thickness of the border */
	--c: #9529;   /* color of the border */
	--w: 50px;  /* width of border */
	border: var(--b) solid #0000; /* space for the border */
	--_g: #0000 90deg,var(--c) 0;
	--_p: var(--w) var(--w) border-box no-repeat;
	background:
	conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0    / var(--_p),
	/*conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0    / var(--_p),
	conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100% / var(--_p),*/
conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p);
}
.main-content {
	flex: 1;
	padding: 0px;
	margin: 20px 0vw;
	background-image: url(images/p6.png);
	background-repeat:repeat;
	width: 62vw;
}
.main-content2 {
	padding: 0px;
	border: 2px solid rgba(54, 106, 57, 0.80);
	margin: 12px;
}
.main-content3 {
	flex: 1;
	padding: 100px 10vw;
	border: 1.5px solid rgba(54, 106, 57, 0.80);
	margin: 5px;
}

.bottom-image {
	width: 100%;
	text-align: center;
	padding: 20px;
}

.bottom-image img {
	max-width: 100%;
	height: auto;
}
.content {
	margin-left: 10px;
	margin-right: 10px;
}

@media (max-width: 700px) {
	.topic-pic-right, .topic-pic-left {
		display: block;
		float: none;
		width: 100%;
	}
	/*
	.images-left {
	transform: translateX(-8vw);
	}
	.images-right {
	transform: translateX(8vw);
	}
	 */
	.images-left, .images-right {
		width: 7vw;
		margin: 1vw;
	}
	.images-left {
		background-position-x: -7vw
	}
	.sidobild-left, .sidobild-right {
		width: 7vw;
	}
	.panel-title {
		margin: 35vw;
		font-size: 36px;
	}
	h1 {
		font-size: 24px;
	}
	.summary {
		width: 100%
	}
	.landscape {
		background-image: url('images/landskap_extended.png');
		height: 100vw;
	}

	.main-content {
		width: 84vw;
	}
	.main-content2 {
		margin: 0px
	}
}