@charset "utf-8";
/* August 5, 2025 */
body, html
{
	font: 1vw Calibri, "Century Gothic", Helvetica, "Arial Narrow", Arial, sans-serif;
	margin: 0;
	overflow-x: hidden;
	scroll-behavior: smooth;
}
a, a.far:hover
{
	text-decoration: none;
}
	a:hover, a:active
	{
		text-decoration: underline;	
	}
	a.button
	{
		background: none;
		border: 3px solid white;
		color: white;
		cursor: pointer;
		display: inline-block;
		font-size: 1vw;
		padding: .5vw 2vw;
		text-align: center;
		transition: background .25s, border .25s, color .25s;
		width: 15%;
	}
		a.button:hover
		{
			background: black;
			text-decoration: none;
		}
		a.button#pdf 
		{
			background-color: red;
			border-color: red;
			color: white;
			width: 8%;
		}
			a.button#pdf:hover
			{
				background: darkred;
				border-color: darkred;
			}
		a.button#vcf 
		{
			background-color: blue;
			border-color: blue;
			color: white;
			width: 40%;
		}
	#recycle a.button
	{
		width: 7.25%;
	}
footer
{
	background: #2a2a2a;
	padding-bottom: 5vw;
}
	footer hr
	{
		border-color: #555;
	}
	footer img
	{
		height: auto;
		width: 15%;
	}
	footer span.follow
	{
		vertical-align: super;
		padding-right: .5em;
	}
	footer .contents
	{
		padding-top: 3vw;
	}
	footer .fab
	{
		display: none;
	}
	footer #links
	{
		padding-top: 2vw;
	}
h1
{
	font-size: 1.8vw;
	margin: 0;
}
h2
{
	font-size: 1.3vw;
	margin-top: 0;
}
	#about h3
	{
		margin-bottom: 0;
	}
hr
{
	border: 1px solid darkgray;
	margin: 2em 0;
}
	.justify > hr
	{
		margin: 2em auto;
		width: 25%;
	}
mark
{
	background: white;
	font-weight: bold;
	padding: 5px;
}
	mark#aboutme
	{
		float: left;
		margin-top: -5px;
	}
nav
{
	background: #373737;
	box-sizing: border-box;
	color: white;
	font-family: 'Oswald';
	height: 4vw;
	line-height: 2vw;
	margin-top: -4vw;
	padding: 1vw 2vw;
	position: fixed;
	width: 100%;
	word-spacing: 1vw;
	z-index: 3;
}
	nav a
	{
		color: white;
		transition: color .25s;
		vertical-align: top;
		word-spacing: normal;
	}
		nav a:hover, footer .far:hover
		{
			color: #00caff;
			text-decoration: none;
			transition: color .25s;
		}
	nav img
	{
		height: 2vw;
		padding-right: 2vw;
		width: auto;
	}
		nav img#divider
		{
			padding-right: 0;
		}
p.center
{
	margin-bottom: 0;
}
p.gray > b
{
	padding: 0 1em;
}
.red, a.red
{
	color: red;
}
section
{
	box-sizing: border-box;
	padding: 4vw 0;
}
	#about
	{
		background: #1f1f1f;
	}
		#about img
		{
			height: 1.25vw;
		}
		#about .contents
		{
			text-align: center;
			width: 100%;
		}
			#about .contents .sub
			{
				display: inline-block;
				padding: 5px 1% 0;
				text-align: justify;
				width: 20%;
				vertical-align: top;
			}
				#about .contents .sub:first-child
				{
					padding-left: 0;
					padding-right: 1%;
					width: auto;
				}
				#about .contents .sub:nth-of-type(4)
				{
					padding-left: 1%;
					padding-right: 0;
					text-align: right;
					width: auto;
				}
			#about .contents .sub2
			{
				float: left;
				margin-top: -10px;
			}
			#about .contents .sub .tooltip
			{
				margin-right: .75vw;
			}
	#cv
	{
		background: #cccccd url(img/bg_cv.webp) bottom right/contain no-repeat;
	}
		#cv .contents
		{
			width: 60%
		}
			#cv .contents .sub
			{
				height: 20vw;
				margin: 3% 0;
				overflow-y: scroll;
				padding-right: 5%;
				text-align: left;
				width: 95%;
			}
				#cv .contents .sub a, #services a
				{
					color: black;
					font-weight: bold;
				}
		#cv img
		{
			width: 10vw;
		}
	#contact
	{
		background: #1f1f1f;
	}
		#contact div.xlarge
		{
			margin-top: 1em;
		}
		#contact img
		{
			margin-top: 2em;
		}
		#contact p
		{
			margin: 2em 0;
		}
			#contact  p.center, footer .center /* Hide elements here */
			{
				display: none;
			}
	#dict ol
	{
		padding-left: 0;
	}
	#games
	{
		background: url(img/games.webp) center/cover no-repeat;
		padding: 3vw 0 4vw;
	}
		#games img
		{
			height: 6vw;
			margin-top: 1em;
			width: auto;
		}
		#games .sub, #services .sub
		{
			padding: 0;
			width: 48%;
		}
	#recycle
	{
		background: #1c6835 url(img/recycle.webp) bottom center/40% no-repeat;
		padding: 3vw 0 8vw;
	}
		#recycle div
		{
			margin-bottom: 2%;
		}
	#services
	{
		background: #cccccd /*url(img/bg_wk.jpg) top center/contain no-repeat*/;
	}
		#services hr + p /*Removes extra space above #service .sub*/
		{
			margin: 0;
		}
		#services img
		{
			height: 4vw;
			width: auto;	
		}
		#services .contents p
		{
			overflow: auto;
			clear: both;
		}
		#services .contents div:nth-of-type(9)
		{
			float: left;
		}
		#services p.center
		{
			margin-top: 3em;
			width: 100%;
		}
			#services p.center img:nth-child(2) /* Adjusts padding to left and right of lower-middle image */
			{
				margin: 0 7%;
			}
 		#services i + b
		{
			vertical-align: super;
			padding-left: .5em;
		}
		#services .sub2
		{
			display: inline-block;
			font-weight: bold;
			font-size: 1.4vw;
			width: 22%;
		}
			#services .sub2 span
			{
				font-weight: normal;
			}
			#services .sub2:nth-of-type(n+5)
			{
				padding-top: 1em;
			}
	#works
	{
		background: #1f1f1f;
		padding: 2vw 0 2vw 2vw;
		/*overflow-x: scroll;  Enable to scroll thumbs*/
	}
		#works .contents
		{
			display: inline-flex;
			margin-top: 1vw;
			width: 100%; /* 100%: 4 panels; 130%: 3.5 panels; 133.3%: 3 panels (Perfect), 140%:  3 panels (Overflow*/
		}
			#works .contents .sub
			{
				margin-right: 2vw;
				width: 33.3vw;
			}
				#works .contents .sub p, #works .large
				{
					margin-top: .5em;
				}
#banner
{
	background: #d3d3d3 url(img/header.webp) right/contain no-repeat;
	margin-top: 4vw;
	width: 100%;
}
	#banner .contents
	{
		align-items: center;
		background: url(img/char.webp) right/contain no-repeat;
		display: flex;
		height: 30vw;
	}
#caption
{
	margin: 0;
	width: 25%;
}
	#caption img
	{
		float: left;
		padding-right: 3%;
	}
.center
{
	text-align: center;
}
.contents
{
	margin: 0 auto;
	width: 80%;
}
	.contents .desc
	{
		margin-bottom: 2vh;
		width: 100%;
	}
.drawings
{
	height: 100vh;
	width: auto;
}
.fab, .fas
{
	vertical-align: baseline;
}
	.fa-info-circle, .fa-exclamation-circle, .fa-question-circle
	{
		padding-left: 0.5em;
	}
	.fa-cookie-bite
	{
		padding-left: 0.3em;
	}
	.fa-file-pdf
	{
		padding-right: 0.5em;
	}
.follow
{
	color: white;
	display: inline;
	font: .8vw "Arial Narrow", Arial, sans-serif;
	word-spacing: normal;
}
#green
{
	color: #1c6835;
	text-decoration: underline;
}
.gray, #works p
{
	color: #bcbcbc;
}
.justify
{
	text-align: justify;
}
.large
{
	font-size: 1.5vw;
}
.left
{
	text-align: left;
}
#ptk
{
	width: 3%;
}
#quote
{
	float: right;
	text-align: right;
	width: 25vw;
}
.ribbon
{
	border-style: solid none;
	border-width: 1px;
	box-shadow: 0 7px 5px black;
	font-family: 'Oswald';
	font-size: 1.1vw;
	padding: .5% 0 .7% 0;
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 2;
}
	.ribbon img
	{
		margin: -2.8vw .4% 0 0;
		vertical-align: middle;
	}
	.ribbon#blue
	{
		background: #008db6 url(img/stripesb.webp) no-repeat center/cover;
	}
	.ribbon#orange
	{
		background: #ee7d44 url(img/stripeso.webp) no-repeat center/cover;
	}
.rfloat, #services div:nth-of-type(10)
{
	float: right;
}
.right
{
	text-align: right;
}
.show
{
	display: none;
}
.tooltip
{
	display: inline-block;
	margin-top: 10%;
	position: relative;
}
	.tooltip:hover .tt-text
	{
		transition: opacity .25s;
		opacity: 1;
	}
.tt-text
{
	background-color: darkgray;
	box-shadow: 5px 10px 5px black;
	color: black;
	padding: 10px 10px;
	opacity: 0;
	position: absolute;
	text-align: center;
	transition: opacity .25s;
	top: -50px;
	width: 10vw;
	z-index: 1;
}
.small
{
	font-size: .75vw;
}
#socialmedia
{
	height: 2vw;
	line-height: 1.75vw;
}
.white, #works
{
	color: white;
}
.xlarge
{
	font-size: 2vw;
}
	p .xlarge
	{
		scroll: none;
	}
.xsmall
{
	font-size: .50vw;
}

/*Mobile*/
@media (orientation: portrait) {
body, html
{
	font-size: 3vw;
	line-height: 150%;
}
	a.button
	{
		font-size: 3vw;
		padding: 2vw 2.5vw;
		width: 40%;
	}
		a.button:hover, a.button:active
		{
			background: none;
		}
		a.button#pdf:hover, a.button#pdf:active
		{
			background-color: red;
			border-color: red;
		}
			a.button#pdf
			{
				width: 54%;
			}
		a.button.round#vcf
		{
			width: 41%;
		}
		#recycle a.button
		{
			width: 32.5%;
		}
	footer a
	{
		color: white;
	}
		footer a.fab:hover, footer a.fab:active
		{
			text-decoration: none;
		}
	footer img
	{
		width: 40%;
	}
		footer .contents div:first-child, #caption, #contact img,.green, .hide, .ribbon img,  #navlinks, #socialmedia, #ptk /* Hide elements here */
		{
			display: none;
		}
		footer .center
	{
		margin: 0 auto;
	}
	footer .fab
	{
		display: inline-block;
		padding: 0 1em .5em;
	}	
h1, .xlarge
{
	font-size: 4vw;
}
h2, .large
{
	font-size: 3.5vw;
}
h3, #about h3
{
	margin: 2em 0 1em;
}
.fa-info-circle, .fa-question-circle
{
	margin-bottom: .5em;
}
mark
{
	padding: 10px;
}
	mark#aboutme
	{
		float: none;
	}
nav
{
	height: 16vw;
	line-height: 8vh;
	margin-top: -16vw;
	padding: 0;
	text-align: center;
}
	nav img
	{
		height: 8vw;
		padding: 4vw 0;
	}
p i
{
	font-style: normal;
}
section, section#works, footer .contents, #games
{
	padding: 7vw 0;
}
	#about div:nth-of-type(3)
	{
		margin-top: 2em;
	}
		#about .contents
		{
			width: 70%;
		}
			#about .contents .sub, #services .contents .sub
			{
				display: block;
				padding: 0;
				width: 100%;
			}
				#about .contents .sub:first-child
				{
					text-align: center;
				}
				#about .contents .sub:nth-of-type(4)
				{
					display: none;
				}
				#about .contents .sub2
				{
					float: none;
					margin-top: 0;
				}
				#services div:nth-of-type(10)
				{
					margin-top: 1em;
				}
		#contact  p.center /* Show elements here */
		{
			display: block;
		}
			.show /*Or here */
			{
				display: inline;
			}
		#cv
		{
			background-image: none;
		}
			#cv .contents .sub
			{
				height: 75vw;
				margin: 1em 0 2em;
			}
			#cv img
			{
				width: 40%;
			}
		#games img, #services img
		{
			height: 12vw;
		}
			#services p.center img:nth-child(2)
			{
				margin: 5vw 0;
			}
			#services .sub2
			{
				font-size: 3.5vw;
				padding: 1em 0;
				width: 45%;
			}
				#services .sub2:nth-of-type(-n+2)
				{
					padding-top: 0;
				}
				#services .sub2:nth-of-type(n+7)
				{
					padding-bottom: 0;
				}
				#services p .sub
				{
					padding: 0;
				}
	#recycle
	{
		background-size: 90%;
		padding: 5vw 0 25vw;
	}
	#works
	{
		text-align: center;
		overflow: visible;
	}
		#works .contents
		{
			display: block;
			width: 100%;
		}
			#works .contents .sub
			{
				margin: 2em auto 1em;
				width: 80%;
			}
#banner
{
	background-size: cover;
	margin-top: 16vw;
}
	#banner .contents
	{
		background-position: 72% 0; /* 80% */
		background-size: cover; /* 130% */
		height: 70vw;  /* 50% */
		width: 100%;
	}
.contents:not(#cookies):not(#faq)
{
	text-align: center;
}
#quote
{
	float: none;
	margin-top: 8vw;

	text-align: center;
	width: 100%;
}
.ribbon
{
	padding: 2% 0 1%;
}
	.ribbon a
	{
		font-size: 3.5em;
	}
	.ribbon#blue
	{
		background-image: none;
	}
.small
{
	font-size: 2.5vw;
}
.tooltip
{
	display: none;
}
}