/* STENTOR.CSS v1.0 */
/* HTML/CSS layout template from https://ribo.zone/free/layouts/ */
/* last updated: august 11, 2023 */
/*____________________________________________________________________________________________________*/
/* IMPORTERADE TYPSNITT */
/*----------------------------------------------------------------------------------------------------*/
@import url(https://fonts.bunny.net/css?family=astloch:400,700);
/* för att använda typsnittet ovan: font-family: 'Astloch', display; */
@import url(https://fonts.bunny.net/css?family=zilla-slab-highlight:400,700);
   /* font-family: 'Zilla Slab Highlight', display; */
@import url(https://fonts.bunny.net/css?family=jacquard-12-charted:400|jacquard-24-charted:400);
   /*font-family: 'Jacquard 12 Charted', display;
font-family: 'Jacquard 24 Charted', display; */
@import url(https://fonts.bunny.net/css?family=jacquarda-bastarda-9-charted:400);
/* font-family: 'Jacquarda Bastarda 9 Charted', display; */
@import url(https://fonts.bunny.net/css?family=zilla-slab:300,300i,400,400i,500,500i,600,600i,700,700i);
/*font-family: 'Zilla Slab', serif; */
@import url(https://fonts.bunny.net/css?family=almendra-sc:400);
/*font-family: 'Almendra SC', serif;*/
@import url(https://fonts.bunny.net/css?family=almendra-display:400);
/* font-family: 'Almendra Display', display;*/
@import url(https://fonts.bunny.net/css?family=almendra:400,400i,700,700i);
/*font-family: 'Almendra', serif;*/
@import url(https://fonts.bunny.net/css?family=amarante:400);
/*font-family: 'Amarante', display;*/
@import url(https://fonts.bunny.net/css?family=emilys-candy:400);
/*font-family: 'Emilys Candy', display;*/
/*____________________________________________________________________________________________________*/
/* TYPSNITT */
/*----------------------------------------------------------------------------------------------------*/
@font-face { 
font-family: 'Cordata400'; 
src: url("layout/fonts/oldschool_pc_font_pack_v2.2_web/woff2/WebPlus_Cordata_PPC-400.woff2") format("woff2"), 
		 url("layout/fonts/oldschool_pc_font_pack_v2.2_web/woff/WebPlus_Cordata_PPC-400.woff") format("woff"), 
		 url("layout/fonts/oldschool_pc_font_pack_v2.2_web/truetype/WebPlus_Cordata_PPC-400.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
/* font-family: 'Cordata400', serif;*/

/*----------------------------------------------------------------------------------------------------*/
@font-face { 
font-family: 'Cordata21'; 
src: url("layout/fonts/oldschool_pc_font_pack_v2.2_web/woff2/WebPlus_Cordata_PPC-21.woff2") format("woff2"), 
		 url("layout/fonts/oldschool_pc_font_pack_v2.2_web/woff/WebPlus_Cordata_PPC-21.woff") format("woff"), 
		 url("layout/fonts/oldschool_pc_font_pack_v2.2_web/truetype/WebPlus_Cordata_PPC-21.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
/* font-family: 'Cordata21', serif;*/

/*----------------------------------------------------------------------------------------------------*/
@font-face { 
font-family: 'Toshiba Sat'; 
src: url("layout/fonts/oldschool_pc_font_pack_v2.2_web/woff2/WebPlus_ToshibaSat_9x14.woff2") format("woff2"), 
		 url("layout/fonts/oldschool_pc_font_pack_v2.2_web/woff/WebPlus_ToshibaSat_9x14.woff") format("woff"), 
		 url("layout/fonts/oldschool_pc_font_pack_v2.2_web/truetype/WebPlus_ToshibaSat_9x14.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
/* font-family: 'Toshiba Sat', sans-serif;*/

/*----------------------------------------------------------------------------------------------------*/

:root {
	--text: #251708;
	--line: #ccd4c1;
	--accent: #ecc8df;
	--bg: #fdfffc;
	--fill:  #eeece4;
	--link: #e841b6;
}

body { 
	color: var(--text);
	font-family: 'Cordata400', Tahoma, sans-serif; 
	background-image: url("/layout/background/postkontora-bakgrund-sommarvatten.JPG");
	background-repeat: no-repeat;
  background-attachment: fixed;
}

* { 
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img { max-width: 100% }

nav {
	float: left;
	width: 16%;
	height: 100vh;
	position: relative;
	background: transparent;
}


nav div {
  object-fit:contain;
	height: fit-content;
	width: fit-content;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	right: -1.5vw;
	text-align: center;
}

nav #postit {
	height: fit-content;
	width: fit-content;
	position: absolute;
	padding:1em;
	background:url("/layout/navigation/nav_list_bakgrund_storre.png") repeat, #FFF7AA;
	box-shadow: 7px 7px 0px -1px #D5CE8E;
}



nav a {
	display: block;
	margin: 10px 0;
	padding: 5px;
	font-family: "Emilys Candy", "Almendra", Tahoma, sans-serif;
	font-size: 1.2em;
	text-decoration-line:none;
	color:#340900;
}

nav a:hover, nav a:focus {
	color: #29BC46;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
	


/*a#navlink1:hover, a#navlink1:focus { 
color: #93A9F7; 
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}

a#navlink2:hover, a#navlink2:focus { 
 color: #93A9F7; 
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

a#navlink3:hover, a#navlink3:focus { 
 color: #93A9F7;
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

a#navlink4:hover, a#navlink4:focus { 
 color: #93A9F7;
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

a#navlink5:hover, a#navlink5:focus { 
 color: #93A9F7; 
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

a#navlink6:hover, a#navlink6:focus { 
 color: #93A9F7; 
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}*/


main {
	float:left;
	width: 70%;
	height: 100vh;
	padding: 4em;
	overflow-y: scroll;
}

.container { 
 max-width: 1500px;
 }

section {
	margin: 2em 0;
	padding: 1em 2em;
	background-color: var(--fill);
  /*box-shadow:2px 2px 5px #000;*/
  box-shadow: 7px 7px 0px -1px #CECBB8;
  box-sizing:border-box;
  position:relative;
}

.gem {
background:url(/layout/main/gem-litet-RSCO-Paper-Clip-on-Paper.png) no-repeat;
height:85px;
position:absolute;
right:15px;
top:-4px;
width:27px;
}


.butterfly {
  height:132px;
  width:160px;
  position:absolute;
  object-fit:contain;
  bottom:-80px;
}

#brevduva {
object-fit:contain;
height:91px;
width:98;
position:absolute; 
right:-50%;
top:20%;
-ms-transform: translateY(-20%) translateX(-50%);
transform: translateY(-20%) translateX(-50%);
}


.buttontwinpeaksangel {
  background:url(/layout/decor/postkontora_button_twinpeaksangel_20260823.png) no-repeat;
  height:31px;
  width:88px;
}

#twohearts {
  background:url("/layout/decor/image-from-rawpixel-id-8987661_redigerad.png");
  background-size:100px 40px;
  background-repeat:no-repeat;
  height:40px;
  width:100px;
  margin: 10px 0;
	padding: 5px;
  position:relative;
}

.benice {
  background:url("/layout/decor/image-from-rawpixel-id-3800094_redigerad.png") no-repeat;
  background-size:38px 38px;
  height:38px;
  width:38px;
}

.rightsidebarflex {
display: flex;
flex-flow:row wrap;
align-content:left;
justify-content:left;
}

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



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

.stripe {
	float: left;
	width: 1%;
	height: 100vh;
	background-color: transparent;
}

hr {
	border: none;
	border-top: 5px solid var(--line);
}

/*header {
  height: 50px;*/
  /*font-family: 'Jacquarda Bastarda 9 Charted', serif;*/
  /*text-align: center;*/
	/*font-size: 1.5em;*/
	/*margin-bottom: 2rem;*/
	/*color: #0B0C09;*/
  /*text-shadow: 1px 1px 2px #3E4446, 0 0 45px #98AA97, 0 0 5px #98AA97;*/
/*}*/

h2, h3, h4, h5, h6, p, table, details, cite, blockquote, img {
	margin: 1rem 0;
}

ul, ol, dl {
	margin: 1rem 0 1rem 2rem;
}

ul ul, ol ol { 
	margin: 0 0 0 2rem;
}

p, table,  ul, ol, dl {
	font-size: 1rem;
}

a { 
	color: var(--link);
	padding: 2px;
}

p a:hover { 
	color: var(--fill);
	background-color: var(--accent);
}

h6 { font-size: 1em; }
h5 { font-size: 1.25em; }
h4 { font-size: 1.5em; }
h3 { font-size: 1.75em; }
h2 { font-size: 2em;
	text-align: center;
	background-color: var(--accent);
	padding: 5px;
}

blockquote {
	background-color: var(--accent);
	color: var(--fill);
	padding: 1em;
}

blockquote a, blockquote code {
	color: var(--text);
}

cite { 
	display: block;
	text-align: right;
}

code, details, pre {
	background-color: var(--bg);
}

code { 
	font-family: 'Courier New', monospace; 
	padding: 2px;
}

details, pre {
	padding: 1em;
}

pre { overflow-x: auto; }

details p { margin: 1rem 0 1rem 2rem; }

table {	border: 5px solid var(--line); }
tr, td, th { border: 2px solid var(--line); }
td, th { padding: 3px }

figcaption { 
	text-align: center;
	margin: -0.5em 1em 1em 1em;
}

footer { 
	font-size: 1em;
	text-align: center;
	background-color: var(--accent); 
	margin-top: 2em;
	padding: 5px;
}

footer a { color: var(--text); }

.flex-box {
    display:flex;
    flex-wrap:wrap;
    margin: -1em;
	align-items: flex-start;
}

.flex-box section {
	margin: 1.5em;
	}

.full { flex: 1 1 100%;}
.half { flex: 1 1 calc(50% - 2em); }
.third { flex: 1 1 calc(33% - 2em); }
.twothird { flex: 1 1 calc(66% - 2em); }
.quarter { flex: 1 1 calc(25% - 2em); }
.threequarter { flex: 1 1 calc(75% - 2em); }

@media screen and (max-width: 800px){

	main, nav, .stripe {
		float: none;
		width: 100%;
		height: fit-content;
	}
	
	nav { padding: 4vw }
	
	#brevduva {
  visibility: hidden;
	}
	
	.butterfly {
	  visibility: hidden;
	}
	
	
	nav div {
		height: fit-content;
		width: 100%;
		position: static;
		-ms-transform: translateY(0);
		transform: translateY(0);
		text-align: left;
	}
	
	nav img {
		z-index: -1;
		position: absolute;
		left:0;
		max-height: 100%;
	}
	
	nav a {
		display: inline-block;
		font-size: 1em;
	}
	
	nav a::after { content: " ↗"; }
	
	main { 
		overflow: auto;
		padding: 2em 1em;
	}
	
	/*header { 
	text-align: center;
	font-size: 1.5em;
	}*/
	
	section { padding: 0 1em; }
	
	.stripe { visibility: hidden; }
	
	
}