@font-face { font-family: Bangalore; src: url('Bangalore.ttf'); } 
@font-face { font-family: basiic; src: url('basiic.ttf'); } 

:root {
	--pagebg:#595b7d;
	--entrybg:#595b7d;
	--entrytxt:#e6e1f2;
	--bgimg:url('');
	--sidebg:#595b7d;
	--sideinfobg:#595b7d;
	--sideinfotxt:#e6e1f2;
	--postinfobg:#595b7d;
	--divider:#caaff5;
	
	--sidelink:#fae0c7;
	
	--nametxt:#fba2d7;
	--nameline2txt:#caaff5;
	
	--btntxt:#252635;
	--actbtntxt:#595b7d;
	--actbtnbg:#e6e1f2;
	--btnbg:linear-gradient(to right, #fba2d7, #fae0c7, #97c4aa, #73c9eb, #caaff5);
	
	--footerbg:;
	
	--red: #fba2d7;
	--or: #fae0c7;
	--gr:#97c4aa;
	--bl:#73c9eb;
	--vi: #caaff5;
	--darkvi:#595b7d;
	--lightacc:#e6e1f2;
	
	--alink: #fae0c7;
	--hlink: #252635;
	--linkdeca: #caaff5;
	--linkdech: #252635;
	
	--roundicon:180px;
}

body {
	background-image:var(--bgimg);
	background-color:var(--pagebg);
	font-family:"basiic";
	font-size:16px;
	line-height:1.4em;
}
	a:link { color: var(--alink); text-decoration:underline wavy var(--linkdeca); }
	a:visited { color: var(--alink); text-decoration:underline wavy var(--linkdeca); }
	a:hover { color: var(--hlink); text-decoration:underline wavy var(--linkdech); background:linear-gradient(to bottom right, #fba2d7, #fae0c7, #97c4aa, #73c9eb, #caaff5); cursor:help; }

.container {
	display: grid;
	grid-template:
		"aside header"
		"aside main"
		"footer footer"
		/ 1fr 3fr;
	grid-gap: 10px;
	width:900px;
	margin-right:auto;
	margin-left:auto;
	margin-top:5%;
}

.container-pages {
	display: grid;
	grid-template:
		"header header"
		"main main"
		"footer footer"
			/ 1fr 3fr;
	grid-gap: 10px;
	width:600px;
	margin:5% auto;
}

#floatbox {
	position:fixed;
	font-size:16px;
	margin-left:-140px;
	margin-top:100px;
}

/* HTML: <div class="breadcrumb"></div> */
.ribbon {
	position:fixed;
	font-size:14px;
	border:1px solid var(--entrytxt);
	color:var(--entrytxt);
	padding:20px;
	margin-left:-190px;
	bottom:20px;
}

.ribbon a:link { color: var(--entrytxt); text-decoration:underline; }
.ribbon a:visited { color: var(--entrytxt); text-decoration:underline; }
.ribbon a:hover { color: var(--btntxt); cursor:help; background:var(--pagebg);}

hr {
	border-top:2px dashed var(--divider);
}

header {
	grid-area:header;
	font-size:16px;
	background:linear-gradient(to bottom, #fba2d7, #fae0c7, #97c4aa, #73c9eb, #caaff5);
	color:var(--btntxt);
	text-align:right;
}

header a:link { color: var(--btntxt); text-decoration:none; }
header a:visited { color: var(--btntxt); text-decoration:none; }
header a:hover { color: var(--btntxt); cursor:help; background:var(--vi);}

h1 {
	font-size:26px;
	margin-top:20px;
	margin-bottom:0;
	font-family:'Bangalore';
}

aside { 
	grid-area:aside;
	position:sticky;
	top:0;
	font-size:14px;
	background:var(--sidebg);
	border-width: 1px;
	border-style: solid;
	border-color: var(--vi);
}

aside a:link { color: var(--sidelink); text-decoration:underline wavy var(--linkdeca); }
aside a:visited { color: var(--sidelink); text-decoration:underline wavy var(--linkdeca); }
aside a:hover { color: var(--hlink); text-decoration:underline wavy var(--linkdech); background:linear-gradient(to bottom right, #fba2d7, #fae0c7, #97c4aa, #73c9eb, #caaff5); cursor:help; }

main {
	grid-area:main;
	font-size:14px;
	min-height:400px;
	margin:auto;
}

main img {
	max-width:100%;
}

footer {
	grid-area:footer;
	font-size:12px;
	background:var(--footerbg);
	color:var(--entrytxt);
	padding:10px;
	margin-top:-10px;
}

footer a:link { color: var(--sidelink); text-decoration:underline wavy var(--linkdeca); }
footer a:visited { color: var(--sidelink); text-decoration:underline wavy var(--linkdeca); }
footer a:hover { color: var(--hlink); text-decoration:underline wavy var(--linkdech); background:linear-gradient(to bottom right, #fba2d7, #fae0c7, #97c4aa, #73c9eb, #caaff5); cursor:help; }

#infobox {
	background:var(--sideinfobg);
	color:var(--sideinfotxt);
	padding:10px;
	text-align:justify;
	font-size:14px;
	float:right;
}

#iconbox {
	width:100px;
	height:100px;
	text-align:center;
	float:left;
	border:4px solid #000;
	border-radius:var(--roundicon);
	overflow:hidden;
}

#iconbox img {
	width:50px;
	height:50px;
}

.iconname {
	font-size:22px;
}

.myBtnContainer {
	margin-top:10px;
}

.btn {
	width:100%;
	padding:6px 12px;
	margin-bottom:6px;
	font-size:16px;
	background:var(--btnbg);
	color:var(--btntxt);
	border:0;
	text-align:right;
	font-weight:bold;
}

.btn.active {
  background:var(--actbtnbg);
  color:var(--actbtntxt);
}

#permaposts {
	overflow-y:auto;
	height:100px;
}

table.Entry {
	width:100%;
	margin-bottom:10px;
	padding:1px;
	background:linear-gradient(to bottom right, #fba2d7, #fae0c7, #97c4aa, #73c9eb, #caaff5); 
}

table.Entry th {
	padding:6px;
	background:var(--postinfobg);
	font-weight:normal;
	text-align:left;
	color:var(--or);
	font-size:14px;
}

table.Entry th:nth-child(even) {
	width:10%;
	text-align:right;
	font-size:14px;
}

table.Entry th a:link { color: var(--sidelink); text-decoration:underline wavy var(--linkdeca); }
table.Entry th a:visited { color: var(--sidelink); text-decoration:underline wavy var(--linkdeca); }
table.Entry th a:hover { color: var(--hlink); text-decoration:underline wavy var(--linkdech); background:linear-gradient(to bottom right, #fba2d7, #fae0c7, #97c4aa, #73c9eb, #caaff5); cursor:help; }

table.Entry td {
	width:100%;
	padding:12px;
	background:var(--entrybg);
	text-align:left;
	font-size:16px;
	color:var(--entrytxt);
}

h2 {
	font-size:22px;
	margin:0;
	font-weight:bold;
	text-decoration:underline;
}

.filterDiv {
  display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

summary {
	color:var(--red);
	background:var(--pagebg);
}

.gallery {
	text-align:center;
}

.gallery img {
	width:200px;
	margin:auto;
}

.gallery img:hover {
	cursor:zoom-in;
}