@import "base.css";

:root {
	--heightheader: 30px;
	--bg_header: lightgray;
	--heightfooter: 35px;
	--col1width: 120px;
	--col3width: 22em;
	--opacity: 0.2;
}

#logo_small {
	display: block;
	background-color: var(--logo-color);
	padding: 6px;
	margin-bottom: 5px;
	width: 110px;
	height: 90px;
}

#logo_small svg {
	width: 120px;
	height: 100px;
	transition-duration: 5s;
	transition-property: fill;
	transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
}

#logo_small svg:hover {
	fill: deeppink;
	/*stroke: cornflowerblue;*/ /* = color of text and border of rect */
	font-weight: bold;
}

#column_2 {
	padding: 1px;
	width: 100%;
}

@media screen and (max-width: 1000px) { /* kleiner dan */

	#container { 
		display: flex; 
		flex-direction: column; 
	}
    #column_1 { order: 2; }
    #column_2 { order: 1; }
    #column_3 { order: 3; }

	:root {
		--col1width: 100%;
	}

	#column_1 {
	    width: 100%;
	}
	
	#column_2 {
		width: 100%;
	}
	
	#column_3 {
		width: 100%;
	}
	
	.ani {
		object-fit: contain;
		object-position: top;
	}

	#copyright {
		position: relative;
		font-style: italic;
		font-size: 0.8em;
		padding-bottom: 5px;
		color: gray;
	}

	.license {
		position: relative;
		margin-bottom: 30px;
	}

}

@media screen and (min-width: 1000px) { /* groter dan */

	#container { 
		display: flex; 
		flex-direction: row; 
	}
	
	#column_1 {
	    width: var(--col1width);
	    flex: 0 0 var(--col1width);
	}
	
	#column_3 {
	    width: var(--col3width);
	    flex: 0 0 var(--col3width);
	    background-color: var(--logo-color);
	}

	.ani {
		width: 100%;
		max-height:  calc(100vh - 100px); /* moet in deze media filter */
		object-fit: contain;
		object-position: top;
	}

	#copyright {
		position: fixed;
		left: 105px;
		bottom: 20px;
		font-style: italic;
		font-size: 0.8em;
		padding-bottom: 5px;
		color: gray;
	}

	.license {
		position: fixed;
		left: 5px;
		bottom: 20px;
	}

}

body {
	min-height: calc(100vh - var(--heightfooter));
	display: flex;
	flex-direction: column;
}

#header {
	height: var(--heightheader);
	background-color: var(--bg_header);
	position: sticky;top: 0;
}

#copyright a {
	color: var(--link-color);
}

#copyright a:hover {
	color: white;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg_header: dimgray;
	}
}