/*

OpenCC Main CSS Code
Date of publish: 24.03.2021

(CC) CC BY-NC-SA 4.0


definition of all global content related site settings

*/

/* generals for mobile in portrait */
@media (orientation: portrait){
	html{scrollbar-width: none;}
	::-webkit-scrollbar {display: none;}
	p.lib_nav{grid-template-columns: 1fr;}
	p.lib_nav a{width: 100%;}
	
	
.svg_container{
	height:auto;
	width: 100%;
	aspect-ratio: 1/1;
}
}

@media (max-width: 300px) AND (orientation: portrait){
	nav.sidemenu{
		/* if width is to short -> widen nav display */
		right: -70%;
		width: 70%;
	}
}

@media (min-width: 770px) {
	/* change of topbar if display is wide enough -> delete hamburger menu, display direct top bar navigation */
	header{
		grid-template-columns: 5% 200px 1fr 5%;
		align-items: start;
	}
	
	header h1{
		justify-self: start;
		align-self: center;
	}
	
	label.hamburg,
	.sidemenu li a img,
	.sidemenu li img,
	.sidemenu .sidenav_disclaimer,
	.menu_bg
	{
		display:none;
	}
	
	nav.sidemenu{
		all:unset;
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
	nav.sidemenu::after,
	.sidemenu ul,
	.sidemenu li,
	.sidemenu li a
	{
		all:unset;
	}
	.sidemenu ul{
		text-transform: uppercase;
		font-weight: 300;
	}
	
	.sidemenu li{
		position: relative;
		float: left;
		padding: 0;
		margin: 0 0.5em;
		font-size: var(--occ_caption_font_size);
		padding-top: 1.1em;	
	}
	.sidemenu li:last-child{margin: 0 0 0 0.5em;}
	
	.sidemenu li a{
		color: rgba(252, 252, 252, 0.5);
		cursor: pointer;
		transition: color ease-in-out 200ms;
	}
	.sidemenu li a:hover{color: rgba(252, 252, 252, 1);}
	
	.sidemenu li a::before{
		position: absolute;
		content: '';
		display: block;
		height: 0px;
		width: 100%;
		background-color: #98dde3;
		top: 0;
		
		transition: height ease-in-out 200ms;
	}
	.sidemenu li a:hover::before{height: 5px;}
	
	.sidemenu li:hover{
		background: none;
	}
	.sidemenu li.active{background: none;}
	
	.sidemenu li.active::before{
		position: absolute;
		content: '';
		display: block;
		height: 5px;
		width: 100%;
		background-color: var(--occ_white);
		top: 0;
	}
	
	/* delete nav footer if top navbar is displayed */
	footer {
  		flex: none;
	}	

	nav.bottommenu{
		display: none;
	}
	footer{
		position: relative;
		bottom: 0;
		width: 100%;
		padding: 1em 5%;
	}

	footer::before{
		position: absolute;
		content: '';
		top: -1px;
		height: 1px;
		left: 0;
		width: 90%;
		margin: 0 5%;
		background: var(--occ_highlight_bg);
	}

	footer .sidenav_disclaimer{
		position: relative;
		display: block;
		width: 100%;
	}

	footer .sidenav_disclaimer .policies{
		float: right;
		margin-top: 0.8em;
	}

	footer .sidenav_disclaimer .cc{
		float: left;
	}

	footer .sidenav_disclaimer .cc span{
		border: 3px solid #1FA2BA;
		border-radius: 50%;
		padding: 0.2em 0.12em;
	}
	
	section.dl_prime{grid-template-columns: 1fr auto;}

	form#participate{
		grid-template-columns: 25% 1fr;
	}

	textarea{
		height: 100%;
	}
}

@media (min-width: 975px){
	:root {
		--occ_text_font_size: 1.3rem;
		--occ_caption_font_size: 1.6rem;
	}
	main {margin: 12em 5% 3em 5%;}

	.sidemenu li{	
		padding-top: 1.0em;
	}
}

@media (min-width: 1150px){
		/* Editor */
	.editor_bg{
		grid-template-columns: 25% 75%;
		grid-template-rows: 50em;
		row-gap: 0;
	}
	.edit_bg{
		all: unset;
		position: relative;
		height: calc(100% - 4em);
		width: calc(100% - 4em);
		padding: 1em;
		margin: 1em;
		text-align:center;
		background-image:url('../graphic/editor_bg.svg')
	}
	nav.edit_nav{
		max-width: 350px;
	}
}

@media  (min-width: 1400px){	
	:root {
		--occ_text_font_size: 1.4rem;
		--occ_caption_font_size: 1.7rem;
	}

	.sidemenu li{	
		padding-top: 0.9em;
	}
	
	main {margin: 14em 5% 3em 5%;}
}

@media (orientation: landscape) {
	

	.participate li{
		width: 50%;
		float: left;
	}
	.participate li:first-child{border: none; border-right: 1px solid rgba(255,255,255,1);}
	.participate li:last-child{border: none; border-left: 1px solid rgba(0,0,0,0.1);}
}

@media (orientation: portrait) {
	header,
	footer {
  		flex: none;
	}

	footer .sidenav_disclaimer{display: none;}
	main{padding-bottom: 7em;}
}	



@media (orientation: portrait) AND (min-aspect-ratio: 1/2){
	main{padding-bottom: 11em;}
}	

/* bottom navigation for small screens in portrait mode */
@media (max-width: 320px) AND (min-height: 568px){
	.bottommenu li h2{
		display: none;
	}
}