/* 
================
Global CSS
================
*/
body {
	background-color: lightblue;
	padding-left: 15vw;
	padding-right: 15vw;
	font-family: monospace;
	font-size: 100%;
	margin-bottom: 5vw;
	line-height: 1.6;
}
article {
	height:auto;
	overflow:auto;
	padding-left: 1vw;
	padding-right: 1vw;
	border-radius: 0.5vw;
	background-color: aquamarine;
}
h1 {
	font-size: 500%;
	margin:  auto;
}
h2 {
	font-size: 250%;
	margin: auto;
}
h3 {
	font-size: 200%;
	margin: auto;
}
h4 {
	font-size: 150%;
	margin: auto;
}
h5 {
	font-size: 110%;
	margin:  auto;
}
a {
	font-size: 110%;
}
p {
	font-size: 110%;
}
ol {
	font-size: 110%;
}
ul {
	list-style-type: circle;
	font-size: 110%;
}
blockquote{
	font-size: 110%;
}

mark {
	background-color: hotpink;
  color: black;
}
hr {
	color: gainsboro;
	margin: auto;
	display: block;
}
figcaption{
	font-size: 110%;
	background-color: pink;
}
figure{
	text-align: center;
	margin: auto;
	padding: 110%;
}
header{
	text-align: center;
	background-color: lightcyan;
	padding: 0.5vw;
	border-radius: 1vw;
	margin: 1vw;
}
div.codeblock{
	background-color: gainsboro;
	border-radius: 3px;
	padding: 1em;
	font-size: 0.8vw;
}
div.joj{
	text-align: center;
	background-color: grey;
	color: white;
	font-family: monospace;
	border: 0.3vw solid orange;
	border-radius: .5vw;
	width: 10vw;
	margin: auto;
	font-size: 1.5vw;
}
span.comment{
	color: orangered;
	margin-left: 2em;
	font-size: 0.8vw;
}
a:link, a:visited {
  color: orangered;
}

a:hover, a:active {
  background-color: orangered;
  color: white;
  border-radius: 4px;
}

 /* Three image containers (use 25% for four, and 50% for two, etc) */
.column3 {
  float: left;
  width: 33.33%;
  padding: 0px;
}
.column2 {
  float: left;
  width: 50%;
  padding: 0px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
} 
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}





/* sidebar menu and center */
	.left-side {
	height: 91.5%	; /* Full-height: remove this if you want "auto" height */
	width: 20%; /* Set the width of the sidebar */
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
	left: 0;
	background-color: lightcyan;
	margin-bottom: 50vw;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
		overflow: hidden;
		text-align: center;
	}
	.right-side {
	height: 91.5%; /* Full-height: remove this if you want "auto" height */
	width: 20%; /* Set the width of the sidebar */
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
	right: 0;
	background-color: lightcyan;
	margin-bottom: 50vw;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
	overflow: hidden;
	text-align: center;
	}
	.left-side-alt {
	height: 91.5%	; /* Full-height: remove this if you want "auto" height */
	width: 20%; /* Set the width of the sidebar */
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
	left: 0;
	margin-bottom: 50vw;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
		overflow: hidden;
		text-align: center;
	}
	.right-side ul {
		text-align: left;
		padding-left: 0vw;
		list-style-type: none;

	}
	.right-side li {
		border-left-style: double;
		border-left-color: lightpink;
		border-left-width: 0.5vw;
		padding-left: 1vw;
		margin-bottom: 1vw;
	}
	.main{
		width: 60vw;
		margin: auto;
}

/* Colour-mode checkbox */

.color-scheme-wrapper {
	padding: 1vw;
	border-radius: 1vw;
}
#color-mode:checked ~ .color-scheme-wrapper {
    background:black;
    color:#25F000;

}
input.mode {
	height:1.5vw;
	width:1.5vw;
	cursor:pointer;
	position:relative;
	}
section.tinyblog {
	background-color: black;
	color:hotpink;
	padding: 0.5vw;
	border-radius: 0.5vw;
}
div.tinyblog {
	margin: 0.5vw;
	padding: 0.5vw;
	border-radius: 1vw;
	background-color: #313131;
}


a.image-container {
	display: inline-block;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
}
        
a.image-container img {
	display: block;
	/*transition: all 0.4s ease;*/
	border-radius: 8px;
}

a.image-container:hover img {
	filter: grayscale(100%) brightness(1.1);
	/*transform: scale(1.02);*/
	box-shadow: 0 4px 15px rgba(0,0,0,0.3);
	background-color: transparent;

}





/* Nav bar */
	nav {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: lightpink;
		height: 8.5%;
		align-items: center;
		display: flex;
		box-sizing: border-box;
		
	}

	/* vacuum tube index button */
	a.index-link {
		float: left;
		display: flex;
		height: 100%
	}
	a.index-link img {
		height: 95%;
		align-self: center;
	}
	a.index-link:hover img {
		/* filter: grayscale(100%); Turns image to greyscale */
		filter: invert();
	}
	a.index-link:hover, a.index-link:active {
		background-color: transparent;
		cursor: crosshair;
	}


	div.btn-group {
		width: 94%;
		height: 4%;
		display: flex;
    	flex-shrink: 0; /* Prevent shrinking */
    	flex-grow: 0; /* Prevent growing */
	}
	/* table container */
	div.nav-table-container {
		float: left;
		display: flex;
		height: 100%
	}

	/* table */
	table.nav-button-table {
		width: 400px;
		height: 100px;
		border-collapse: collapse;
		table-layout: fixed;
	}
	.nav-button-table td, tr {
		width: 100px;
		white-space: nowrap;  /* Prevents text wrapping */
		table-layout: fixed;
		padding: 0;
		margin: 0;
		font-size: 1vw;
		border-collapse: collapse;
		text-align: center;
		vertical-align: middle;
		height: 100px;
	}
	
	
	/* Buttons */
	.btn-group button {
		writing-mode: horizontal-tb;
		cursor:  crosshair; /* Pointer/hand icon */
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 5%; /* flex-grow: 0, flex-shrink: 0, flex-basis: 100px */
    	height: 5vw;
		margin: 0.5vw;
		width: 5%;

		border: .1vw solid black;
		border-radius: 1vw;
		-webkit-text-stroke-width: .03vw;
		color: black;
		font-family: monospace;
		font-weight: bold;
		font-size: 1vw;
	}
	
	.nav-button-table button {
		writing-mode: horizontal-tb;
		cursor:  crosshair; /* Pointer/hand icon */
		width: 30px;
		height: 10px;

		border: .1vw solid black;
		border-radius: 1vw;
		-webkit-text-stroke-width: .03vw;
		color: black;
		font-family: monospace;
		font-weight: bold;
		font-size: 1vw;
	}
	.nav-button-table button:hover {
		background-color: #666;
		color: #ffffff;
		-webkit-text-stroke-color: #ffffff;
	}
	button.a {
		background-color: #887bb0;
	}
	button.b {
		background-color: #96ceb4;
	}
	button.c {
		background-color: #ffcc5c;
	}
	button.d {
		background-color: #ff6f69;
	}
	button.e {
		background-color: #ced07d;
	}
	button.f {
		background-color: #0e9aa7;
	}