/* Customizations for performance, etc. */

.slide-container[id="1"] { background: url(1.png) no-repeat; } #canvas-1 { visibility: hidden }
.slide-container[id="2"] { background: url(2.png) no-repeat; } #canvas-2 { visibility: hidden }
.slide-container[id="5"] { background: url(5.png) no-repeat; } #canvas-5 { visibility: hidden }
.slide-container[id="57"] { background: url(57.png) no-repeat; } #canvas-57 { visibility: hidden }
.slide-container[id="59"] { background: url(59.png) no-repeat; } #canvas-59 { visibility: hidden }
.hamster { position: absolute;}
#hamster1 { left: 520px; top: 300px; }
#hamster2 { left: 555px; top: 302px;}
#hamster3 { left: 590px; top: 304px; }
#hamster4 { left: 625px; top: 306px;}
#hamster5 { left: 660px; top: 308px;}
#hamster6 { left: 695px; top: 310px;}
#hamster7 { left: 730px; top: 312px; }
#hamster8 { left: 765px; top: 314px;}

/* Regular styles */

/* Custom dark scrollbar for fullscreen mode */
/*
::-webkit-scrollbar,
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track-piece
{
	background: #333 !important;
}

::-webkit-scrollbar
{
	width: 17px !important;
	height: 17px !important;
}

::-webkit-scrollbar-thumb
{
	background: #666;
	border: 1px solid black !important;
	border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover
{
	background: #333;
}
*/

body {
	background-color: #000;
	color: white;
}

.slide-container {
	margin-bottom: 20px;
	display: flex;
	position: relative;
}

.slide {
	display: inline-block;
	border: 1px solid #333;
	flex: 1;
	margin-right: 10px;
	width: 960px;
	height: 540px;
}

.comment {
	/* border: 1px solid #111; */
	background-color: #000;
	width: auto;
	max-width: 920px;
	height: auto;
	flex: 1;
	display: flex;
	align-items: center;
	border-radius: 3px;
	border-color: #999;
	margin: auto 0;
	background-color: #333;
	padding: 8px 20px 20px 20px;
}

.comment-header, .comment-header a {
	color: #999;
	padding: 2px 0 8px 0; 
	text-align: center;
	font-family: Verdana;
	font-size: 11px;
}

.comment-text {
}

@media (max-width: 1200px) {
	.comment, .slide, .slide-container {
		display: block;
	}
}

a {
	color: #eee;
	color: #99ccff;
}

code {
	font-family: "Courier New";
	color: #90EE90;
}

h1 {
	font-family: "Google Sans";
	font-size: 24px;
	background-color: #333;
	border: 1px solid #ccc;
	padding: 4px;
	margin-top: 10px;
	border-radius: 5px;
	max-width: 940px;
}

#intro p {
	font-family: "Google Sans";
	max-width: 940px;
	font-size: 16px;
}

.comment-text {
	text-align: left;
	font-family: Verdana;
	font-size: 14px;
}

.canvas-container { 
	width: 970px; 
}