/* ChronoScroll with grid layout */ 


:root {
    --left-width: 33vw;
	--Xleft-width: calc( 100vw - 566px );
	--min-left-width: 420px;

	--top-height: 33vw;
	--min-top-height: 360px;
}


body {
	overflow: clip;
}


.layoutgrid {
	display: grid;
	width: 100%;
	height: 100svh;
	grid-template-columns: minmax(var(--min-left-width), var(--left-width, 50%)) 1fr;
}


.layoutgrid > * { /* both columns */
    height: 100dvh;
	transition: all 0.33s ease;
}


/* left column */
#chronoFrame { 
    box-shadow: #aaa 2px 2px 10px;
}


/* right column */
.chronoSub { 
	overflow-x: auto;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.chronoSub::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 8px;
}
.chronoSub::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(46,124,172,0.5);
	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
	box-shadow: 0 0 1px rgba(255,255,255,.5);
}
.chronoSub::-webkit-scrollbar-thumb:hover {
	background-color: rgba(46,124,172,.9);
	}	


/* right column content*/
h2, h3 {
	margin-top: 4em;
	scroll-margin-top: 4em;
}
h3 {
	margin-top: 3em;
	scroll-margin-top: 3em;
}
h2+h3 {
	margin-top: 1em;
	scroll-margin-top: 1em;
}


.article > p:nth-child(4n+1):not(.figure),
.article > p:nth-child(4n+2):not(.figure) {
	margin-left: 0;
}


a.btn {
	font-size: 0.9em;
	background-color: rgba(0,0,11,0.05);
	border-color: #d1d1d1;
	}
a.chronoFrame::before {
	content:"\2799";
	display:inline-block;
	width:1.2em  }

.btnChrono {
	background-color: #fff;
	margin-bottom: 5px;
	margin-left: 5px;
	padding: 3px;
	border-radius: 4px; }
.legal .btnChrono {
	float: right;
	padding-top: 0;
	padding-left: 1em;
	xshape-outside: inset(100px 100px 100px 100px 10px);
	}


img[onmouseenter] {
	transition: all 0.7s ease-in-out;
}
img[onmouseenter]:hover {
	box-shadow: #0052a4 2px 2px 21px, #0080ff -2px -2px 10px 2.2px;
	transition: all 0.1s ease-out;
}


.top {
	position: fixed;
	right: 11px;
	bottom: 11px;
	display: block; }

.flag {
	display: inline-block;
	height: 1.5em;
	font-size: 2.2em;
	line-height: 1em;
	vertical-align: text-bottom;
	margin-right: 0.2em;
	margin-left: 5pt;
	border-left: 3px ridge #c0c07a; }
.flag:after{
	content:attr(ln); }



/* narrow layout :: left becomes top, right becomes bottom */
@media screen and (max-width: 1000px)
{
	.layoutgrid {
		grid-template-columns: none;
        grid-template-rows: minmax(var(--min-top-height), var(--top-height, 50%)) 1fr;
	}
	

	.layoutgrid > * { /* both rows */
		height: 100%;
	}

	.cover {
		display: none;
	}
}

/* eof */