/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* max page width */
* {margin: 0; padding: 0;} /* Required for canvas */
	
body {background-color: var(--bkg-col-body);}
canvas {display: block;}
	
.section{
	padding-top: 2.5rem;
	padding-bottom: 10rem;
}

.row {
/*   border-collapse:separate;  */
/*   border-spacing: 0 0em; */
  padding: 2rem;
  box-shadow: 0px 2px 0px red;
}
 
.bg-light{
	background-color: var(--bkg-col-light);
	background-size: cover;	
/* 	color: gold; */

	/* Draw red line on top paragraph */
	border-color: #c6152c transparent transparent; /* Red */
	border-style: solid;
	box-shadow: 0px 0px 30px red;
	background-color: var(--bkg-col-light);
}

.bg-dark{
	background-color: var(--bkg-col-dark);
	background-size: cover;
	color: var(--txt-col-dark);
	
	/* Draw red line on top paragraph */
	border-color: #c6152c transparent transparent; /* Red */
	border-style: solid;
/* 	border-width: 2px; */
	box-shadow: 0px 0px 30px red;
}

/* purple background-color: grey;  */
/* red  ff3632 */
.bg-bottom{
	background-color: #232323; 
/* 	background-color: dark-grey; */
	background-size: cover;
	color: #fff;
}
 
.bg-purple {
	background-color: var(--bkg-col-purple);
	
/* 	background-color: dark-grey; */
	background-size: cover;
	color: var(--txt-col-purple);
	
	/* Draw red line on top paragraph */
	border-color: #c6152c transparent transparent; /* Red */ 
	border-style: solid;
/* 	border-width: 2px;	 */
	box-shadow: 0px 0px 30px red;
	padding-bottom: 0rem; /* Keep last bottom short */
}

img {
	filter: drop-shadow(0px 0px 10px red);  /* Do not use #c6152c as red, its not bright enough */
}

.center{
	text-align:center;
}

/* topic image above start paragraph */
.topic-img {
	width: 100px; 
	margin-top:-80px; 
	padding-right: 5%; 
	z-index: 0;
	position:relative;
	float: right;
	padding-right: 20px;
}

.section-heading{
	padding-top: 50px; 
	text-align: left;
	padding: 50px 50px 20px 00px;
}

/* Description below photo's */
.ImgTag{
	color: #c6152c; /* Red */

	/* Terminal bg */
	border-width: 0px;
	box-shadow: 10px 10px 20px black;
	background-color: black;
}
.ImgTag:before{
	color: LawnGreen;
	content: "~$ display-photo \a";
	white-space: pre;
}
.ImgTag:after{
	color: gold;
	content: "[.gif]";
}

/* Description below titles */
.title{
	color: #c6152c; /* Red */
	box-shadow: 0px 15px 30px #c6152c; /* Red */
  	padding: 50px;
	margin: 25px 0px 0px 0px;
	margin-bottom: 50px;
}
.title:before{
	color: LawnGreen;
	content: "~$ cat ";
}
.title:after{
	color: gold;
	content: "[.rtfm]";
}

/* High-light quotes */
em{
	text-align: justify;
	font-size: 140%;
	color: gold;
	
	/* Draw red line on top paragraph */
	border-color:  transparent  transparent red transparent; Red
	border-style: solid;
	
	/* Terminal bg */
	border-width: 0px;
	box-shadow: 10px 10px 20px black;
	background-color: black;
}
em:before{		
	color: #c6152c; /* Red */
	content: "[\201D";
	margin: 25px 0px 0px 0px;
}
em:after{
	color: #c6152c; /* Red */
	content: "\201D]";
	margin: 25px 0px 0px 0px;
}
em.heading{
	font-size: 6vw;
}
#heading{
	padding-top: 12em;
	text-align:center;
}

/* Indent */
.column{
	text-indent: 17px;
	color: var(--column-txt-col);
}
.column::first-letter {
	font-size: 130%;
	content: ">_ ";
	color: #c6152c; /* Red */
}

.to-top{
    /* The icon plus text */
    color: var(--txt-col-dark);
	padding-top:1.8em;
	display:inline-block;/* or block */
	position:relative;
	border-color:gold;
	text-decoration:none;
	transition:all .3s ease-out;
	background:transparent;
	text-align:center;
	font-size:180%;
	margin: 50px; /* The margin bottom vs top */
}
.to-top:before{
	content:'△';
	font-size:.9em;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-.7em;
	border:solid .13em white;
	border-radius:10em;
	width:1.4em;
	height:1.4em;
	line-height:1.3em;
	border-color:inherit;
	transition:transform .5s ease-in;
	
	
	/* Terminal bg */
	box-shadow: 10px 10px 20px #c6152c; /* Red */
	background-color: #c6152c; /* Red */
}
.to-top:hover{
	color:gold; /* Red */ 
	border-color:#c6152c transparent transparent; /* Red */ 
}
.to-top:hover:before{
	transform: rotate(360deg);
}

.w3{
	width: 133;
	height: 64px;
}

/* Enable more environmental friendly printing */
@media print  {
	/* Load ideal printer friendly settings */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
		font-size: 8pt;
		background-color: #FFFFFF;
		box-shadow: none;
		border: 0px;
		margin: 0px;
		padding: 0px;
	}
	
	#main-logo{
		display:none; /* Don't print logo twice; logo is printed on the end. */
	}
	
	.title{
		font-size: 12pt;
		color: black; /* More printer friendly than Red */
		box-shadow: none;
		padding: 0px;
		margin: 0px;
		border: 0px;
	}
	
	.title:before{
		content: none;
	}
	
	.title:after{
		content: none;
	}
	
	.section-heading{
		padding: 0px; 
	}
	
	.section{
		padding: 10px; /* Minimum space for readability */
	}
	
	.column{
		text-indent: 0px; /* Else, logo doesn't fit at 100% */
	}

	.row{
  		padding: 0rem;
  		box-shadow: none;
	}
	
	.bg-light{
		box-shadow: none;
		background-color: #FFFFFF;
	}
	
	.bg-dark{
		border-width: 0px;
		box-shadow: none;
		background-color: #FFFFFF;
	}
	.bg-purple {
		box-shadow: none;
		background-color: #FFFFFF;
	}
	.ImgTag{
		box-shadow: none;
		color: black;
	}
	.ImgTag:before{
		content: none;	
	}
	.ImgTag:after{
		content: none;	
	}
	
	p{
		margin: 0px;
		padding: 0px;
	}
	
	.container {
		width: 100%;
		margin: 0px;
		padding: 0px;
	}

	em{
		color: black;
		background-color: white;
	}
	em:before{		
		content: none;
		margin: 0px;
	}
	em:after{
		content: none;
		margin: 0px;
	}
	
	img {
		filter: drop-shadow(0px 0px 0px red);  /* Do not use #c6152c as red, its not bright enough */
	}

	.noprint {display:none;}
}

button {
	color: var(--txt-col-button);
}

/* Dark mode adjustments */
body {
	--column-txt-col: black;
	--bkg-col-dark: DarkGray;  /* dark grey */
	--bkg-col-light: WhiteSmoke; /* light grey */
	--bkg-col-purple: #2b83e2; /* light blue */
	--txt-col-purple: black; 
	--bkg-col-body: white;
	--txt-col-dark: black;
	--txt-col-button: black;
/* 	--bkg-col-button: lightblue; */
	
}

body.dark-theme {
	--column-txt-col: lawngreen;
	--bkg-col-dark: #1f2124; /* dark grey */
	--bkg-col-light: #313336; /* light grey */
	--bkg-col-purple: #222554; /* light purple */
	--txt-col-purple: white;
	--bkg-col-body: black;
	--txt-col-dark: lawngreen;
	--txt-col-button: lawngreen;
}

@media (prefers-color-scheme: dark) {
  	/* defaults to dark theme */
	
	body {
		--column-txt-col: lawngreen;
		--bkg-col-dark: #1f2124; /* dark grey */
		--bkg-col-light: #313336; /* light grey */
		--bkg-col-purple: #222554; /* light purple */
		--txt-col-purple: white; 
		--bkg-col-body: black;
		--txt-col-dark: lawngreen;
		--txt-col-button: lawngreen;
	}

	body.light-theme{
		--column-txt-col: black;
		--bkg-col-dark: DarkGray;  /* dark grey */
		--bkg-col-light: WhiteSmoke; /* light grey */
		--bkg-col-purple: #2b83e2; /* light blue */
		--txt-col-purple: black;
		--bkg-col-body: white;
		--txt-col-dark: black;
		--txt-col-button: black;
	}
}

/* Cookie bar behaviour */
#cookiebar {
	visibility: hidden;
	min-width: 250px;
	position: fixed;
	font-size: 10px;
	text-align: center;  
	z-index: 99;
	left: 50%;
	bottom: 30px;
	left: 50%;
	width: 60%;
	margin: 0 auto;
	margin-bottom: 0px;
	transform: translate(-50%);
}
#cookiebar.show {
	visibility: visible;
	-webkit-animation: fadein 2.5s;
	animation: fadein 2.5s;
}
#cookiebar.hide {
	visibility: visible;
	-webkit-animation: fadeout 2.5s .5s;
	animation: fadeout 2.5s .5s;
}
@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;} 
	to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
	from {bottom: 30px; opacity: 1;} 
	to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

.hover_highlight:hover {
	background-color: var(--bkg-col-purple);
	cursor:pointer;
	transition:all .3s ease-out;
}

/* Animated topics */
.is-animated {
  animation: .9s zoom-in;
}

@keyframes zoom-in {
  0% {
   transform: scale(.5);
  } 
  100% {
    transform: none;
  }
}