/*

OpenCC Main CSS Code
Date of publish: 24.03.2021

(CC) CC BY-NC-SA 4.0


definition of all global site settings

*/

/*
import Roboto
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300&display=swap');

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


table{border-collapse:collapse;border-spacing:0; text-align:left;}

/*
setting variables
*/
:root {
	--occ_highlight_bg: #333333;
	--occ_complementary: #FF370F;
	--occ_active: #0A526E;
	--occ_white: #FCFCFC;
	--occ_corner: 0.2em;
	--occ_text_font_size: 1.2rem;
	--occ_caption_font_size: 1.5rem;
}

/* Firefox only */
@-moz-document url-prefix() {
	:root {
		--occ_text_font_size: 1.3rem;
		--occ_caption_font_size: 1.6rem;
	}
}

html{
	font-size: 62.5%;
	font-family:'Roboto', sans-serif;
    scroll-snap-type: y mandatory;

	background: var(--occ_highlight_bg);
}

html::before{
	position: fixed;
	content: "";
	width: 100%;
	height: 100%;
	background-color:#fff;
	clip-path: polygon(100% 0, 0 0, 100% 100%);
    -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
	background-attachment: fixed;
	opacity: 0.03;
}

section{
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: fixed;
	width: 100%;
	height: calc(100% - 12em);
}

	/*
	header
	*/
	header{
		display: inline-block;
		justify-self: center;
		align-self: center;
		margin: 0;
		padding: 0;
	}
	
	h1{
		text-align: center;
	}

	h1 img{
		height:15em;
	}

	header h2{
		margin: 5em 0 2em 0;
		font-size: 2rem;
		font-weight: 400;
		text-transform: uppercase;
		color: var(--occ_white);
		text-align: left;
	}
	h2 span:last-child{
		line-height: 1.5rem;
		font-size: 1.7rem;
		font-weight: 300;
		color: rgba(252, 252, 252, 0.7);
	}
	h2 span:last-child::before{
		content: "\A";
        white-space: pre;
	}
	
	main{
		display: inline-block;
		justify-self: center;
		align-self: center;
	}

	#link_box{
		position: relative;
		display: inline-grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 5px;
		grid-row-gap: 5px;
	}

	.square {
		position: relative;
		aspect-ratio: 1 / 1;
		height: 15em;
		padding: 7px;
	}

	#square1{
		content:"";
		display: block;
		height: 100%;
		width: 100%;
	}

	main a{
		height: 100%;
		width: 100%;
		padding: 10px;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-decoration: none;
		border-radius: 0.4em;
	}

	main a img{
		width:66%;
		height: 66%;
	}

	main a h3{
		padding-top: 0em;
		font-size: 1.4rem;
		font-weight: 400;
		text-transform: uppercase;
		color: var(--occ_white);
		overflow: hidden;
		max-height: 0em;
		padding-top: 0em;	
		transition: max-height 400ms ease-in-out, padding-top 400ms ease-in-out;
	}

	a:hover h3{
		padding-top: 1em;
		max-height: 2em;
	}

	.toolbar-2 {
		text-align: center;
		padding: 10px;
	  }
  
	  .btn-blue {
		background-color: #4ccfe1;
	  }

	  .btn-green {
		background-color: #aad380;
	  }

	  .btn-orange {
		background-color: #eeaa66;
	  }

	  .btn-red {
		background-color: #dd9999;
	  }
  
	  .btn-border {
		display: inline-block;
	  }

	/*
	Disclaimer
	*/

	footer{
	    z-index: 1;
		position: fixed;
		bottom:0;
		left:0;
		height:12em;
		width: 100%;
		background:  no-repeat -300px 100% url("../graphic/triangle_black.gif");
		background-color: #FFFFFF;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr; 
	}
	
	footer::before{
		content:"";
		position: absolute;
		background-color: #98dde3;
		right: 0;
		width: 40%;
		height: 1.5em;
		bottom: 11.2em;
	}

	footer a{
		font-weight: 900;
		color: var(--occ_active);
		text-decoration: none;
	}
	
	p.cc{
		font-size: var(--occ_caption_font_size);
		padding-right: 2em;
		grid-column-start:3;
		align-self: center;
		justify-self: end;
	}	

	p.cc img{
		width: 13em;
    	padding: 0;
		margin: 0;
	}
	
	.policies{
    	padding: 0;
		margin: 0;
		font-weight:300;
		color: var(--occ_highlight_bg);
		font-size: var(--occ_text_font_size);
		grid-column-start:2;
		align-self: center;
		justify-self: center;
	}

	.policies span{
		font-weight: 700;
		color: var(--occ_highlight_bg);
		text-transform: uppercase;
		font-size: var(--occ_text_font_size);
	}

	@media (orientation: portrait){
		section{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 2fr;
			height: calc(100% - 5em);
		}	
		header{
			align-self: end;
		}
		h1 img{
			height:10em;
		}
		header h2{
			display: none;
		}
		#link_box{
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(2, 1fr);
		}
		.square {
			position: relative;
			aspect-ratio: 1 / 1;
			height: 11em;
			padding: 5px;
		}
		main a{
			padding:5px;
		}
		main a h3{
			font-size: 1.1rem;
			padding-top: 1em;
			max-height: 2em;
		}
		footer{
			height:5em;
			background-position: -475px 100%;
		}
		footer::before{
			bottom: 4.5em;
			height: 1em;
		}
		p.cc{
			grid-column-start:2;
			align-self: center;
			justify-self: end;
		}	
		p.cc img{
			width:9em;
		}
		.policies{
			display:none;
		}

	}
	@media (orientation: portrait) AND (min-width: 400px){
		.square {height: 12em;}
		main a h3{font-size: 1.2rem;}
	}
	@media (orientation: portrait) AND (min-width: 466px){
		.square {height: 13em;}
		main a h3{font-size: 1.3rem;}
	}
	@media (orientation: portrait) AND (min-width: 533px){
		.square {height: 14em;}
		main a h3{font-size: 1.3rem;}
	}
	@media (orientation: portrait) AND (min-width: 600px){
		section{
			grid-template-rows: 1fr 1fr;
			height: calc(100% - 7em);
		}	
		h1 img{height:13em;}
		header h2{display: inherit;}
		.square {height: 15em;}
		main a h3{font-size: 1.4rem;}
		p.cc{grid-column-start:3;}	
		p.cc img{width:9em;}
		.policies{display:inherit;}
		footer{height:7em;}
		footer::before{
			bottom: 6.4em;
			height: 1.2em;
		}
	}
	
	@media (orientation: portrait) AND (max-width: 360px){
		#link_box{
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(3, 1fr);
		}
		p.cc{grid-column-start:3;}	
	}

	@media (orientation: landscape) AND (max-height: 400px) AND (min-aspect-ratio: 1.7/1){
		section{
			grid-template-rows: 1fr;
			grid-template-columns: 1fr 2fr;
			height: 100%;
		}	
		header h2{display: none;}
		#link_box{
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(2, 1fr);
		}
		.square {
			position: relative;
			aspect-ratio: 1 / 1;
			height: 10em;
			padding: 5px;
		}
		main a{padding:5px;}
		main a h3{
			font-size: 1.1rem;
			padding-top: 1em;
			max-height: 2em;
		}
		footer{display: none;}
	}
	@media (orientation: landscape) AND (min-height: 400px) AND (max-height: 600px) AND (min-aspect-ratio: 1.6/1){
		.square {height: 11em;}
		main a h3{
			font-size: 1.1rem;
			padding-top: 1em;
			max-height: 2em;
		}
	}
	
	@media (orientation: landscape) AND (min-height: 600px) AND (max-height: 700px) AND (min-aspect-ratio: 1.6/1){
		.square {height: 12em;}
		main a h3{
			font-size: 1.2rem;
			padding-top: 1em;
			max-height: 2em;
		}
	}