/* Css-file for cristel.org, copyright Cristel Dierick */
/* You get nerd points for looking at this! Congratulations! */

/*--------------------------
Defining custom properties
--------------------------*/

:root{
	--logo-kleur:rgb(15,101,35);
	--lichte-elementen-kleur:rgb(203,203,203);
	--lichte-tekst-kleur:rgb(117,117,117);
	--min-breedte-kolom:330px;
	}

@media only screen and (max-width:calc(330px + 2 * 3.8vw + 2 * 15px)){ /* (min column width) + 2 * (padding envelop) + 2 * (margin envelop). This can be removed if I replace the definition of --min-breedte-kolom with a min() statement, but that isn't well supported yet. */
		:root{
		--min-breedte-kolom:240px;
		}
	}

/*--------------------------
Fonts and background
--------------------------*/

@font-face{
	font-family: "Linux Libertine";
	src: url(linlibertine_r.woff);
	}
	
@font-face{
	font-family: "Linux Biolinum";
	src: url(linbiolinum_r.woff);
	}

body{
	background-color:#ffffff;
	color:#000000;
	font-family: "Linux Libertine";
	font-size:100%; /* This is to avoid problems in older IE versions. */
	margin:0; /* This is to avoid problems in older IE versions. */
	padding:0; /* This is to avoid problems in older IE versions. */
	}

h1,h2,h3{
	color:var(--logo-kleur);
	font-family: "Linux Biolinum";
	font-weight:normal;
	}
	
h1{
	font-size:1.375rem; /* 1 rem is 16 px, usually. 22/16 */	
	}
	
h2	{
	font-size:1rem;
	}
	
footer	{
	padding-top:1rem;
	}


/*Links*/

a{
	color:var(--logo-kleur);
	text-decoration:none;
	}
	
a:visited{
	color:var(--lichte-tekst-kleur);
	}
	
a:hover,a:active{
	background-color:var(--lichte-elementen-kleur);
	}
	
footer{
	color:var(--lichte-tekst-kleur);
	font-size:0.875rem; /* 14/16 */
	}

/*--------------------------
General look
--------------------------*/


#envelop{
	border:1px solid var(--lichte-elementen-kleur);
	padding:0.9375rem 3.8vw; /* 15/16, vw units to avoid too much whitespace on phones. */
	padding-bottom:0.3125rem; /* 5/16 */
	margin:0.9375rem; /* 15/16*/
	}
	
/*--------------------------
Logo and menu
--------------------------*/

#logo{	
	margin-bottom:0.9375rem; /* 15/16 */
	}

#menubalk{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(min-content,14.0375rem));/* hmm */
	justify-content:space-between;
	align-items:center;
	}
	
#menulijst{
	display:grid;
	grid-template-columns:repeat(auto-fit,5.75rem); /* Width #menulijst a + 2px border = 92, so 92/16 */
	grid-gap:1.875rem; /* 30/16 */
	grid-row-gap:0.9375rem; /* 15/16 */
	padding:0 0 0.625rem 0; /* top right bottom left, 10/16 */ 
	}

#menulijst a{
	font-size:1.25rem; /* 20/16 */
	width:5.625rem; /* 90/16 */
	padding:0.3125rem; /* 5/16 */
	text-align:center;
	border:1px solid var(--lichte-elementen-kleur);
	font-family: "Linux Biolinum";
	}

#menubalk a:visited{
	color:var(--logo-kleur);
	}
	
	
/*--------------------------
Gallery
--------------------------*/


#galerie{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(var(--min-breedte-kolom), 1fr));
	grid-gap:0.9375rem; /* 15/16 */
	grid-auto-flow:dense;
	align-items:start;
	}

@media only screen and (min-width:calc(2 * 330px + 1 * 15px + 2 * 3.8vw + 2 * 15px)){ /* 2 * (min column width) + 1 * (grid-gap) + 2 * (padding envelop) + 2 * (margin envelop). Variables don't work in @media queries. (At least atm.) */
	.breed{
		grid-column:span 2;
		}
	}
	

@media only screen and (min-width:calc(3 * 330px + 2 * 15px + 2 * 3.8vw + 2 * 15px)){ /* 3 * (min column width) + 2 * (grid-gap) + 2 * (padding envelop) + 2 * (margin envelop) */
	.breed{
		grid-column:span 3;
		}
	}
	
.hoog{
	grid-row:span 3;
	}
	
.doek{
	padding:0.625rem; /* 10/16 */
	border:1px solid var(--lichte-elementen-kleur);
	overflow:hidden; /* Just to be sure. There should be no overflow. */
	cursor:pointer;
	text-align:center;
	}
	
.doek img{
	border-style:none;
	display:block;
	width:100%;
	}
	
@media only screen and (max-width:calc(2 * 330px + 1 * 15px + 2 * 3.8vw + 2 * 15px - 1px)){ /* Same media rule as the 2 column one, but max-width in stead of min-width, and minus 1px to eliminate the edge case. Makes the height of tall paintings fit the screen on small screens with just one column. */		
		.hoog img{
			max-height:90vh;
			width:auto;
			margin-left:auto;
			margin-right:auto;
			}
	}
	
.doek:hover{
	background-color:var(--lichte-elementen-kleur);
	}

/*Overlay*/

#overlay {
	position:fixed;
	display:none; /* This changes into 'flex' onclick of a gallery item. */
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: rgba(0,0,0,0.8);
	cursor:pointer; /* Not needed in all browsers. Not sure if needed in any. */
	align-items:center;
	justify-content:center;
	}
	
#overlay img{
	max-width:100%;
	max-height:100%;
	}