/*
 * FONTS
 */

@font-face {
	font-family: "Emulogic";
	src: url("../fonts/emulogic.ttf");
}

/*
 * BASE STYLES
 */

*,
html,
body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	font-family: "Emulogic";
	height: 100%;
	overflow-x: hidden;
	max-width: 100%;
}

/* 
 * BACKGROUNDS
 */

.page {
	background-color: black;
}

.dig-dug {
	padding: 0;
	position: relative;
}

.stripe {
	position: relative;
	width: 100%;
	background: url(../images/dd/dirt.png) repeat;
	background-blend-mode: hue;
}

.color1 {
	background-color: #00009c;
	background-image: none;
}

.color2 {
	background-color: #fdb700;
	border-bottom: 5px dashed #df6804;
	padding: 50px;
}

.color3 {
	background-color: #df6804;
	border-bottom: 5px dashed #b72100;
	padding: 50px;
}

.color4 {
	background-color: #b72100;
	border-bottom: 5px dashed #970101;
	padding: 50px;
}

.color5 {
	background-color: #970101;
	padding: 50px;
}

.dig-dug main {
	position: relative;
	gap: 0;
	z-index: 2;
}

.galaga {
	background: radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 0px) 0 0/550px 550px,
		radial-gradient(blue, rgba(255, 255, 255, 0.15) 1px, transparent 0px) 40px 60px/350px 350px,
		radial-gradient(hotpink, rgba(255, 255, 255, 0.1) 2px, transparent 0px) 80px 100px/250px 250px,
		radial-gradient(green, rgba(255, 255, 255, 0.1) 2px, transparent 0px) 130px 270px/250px 200px,
		radial-gradient(orange, rgba(255, 255, 255, 0.1) 2px, transparent 0px) 190px 230px/400px 400px,
		radial-gradient(red, rgba(255, 255, 255, 0.1) 2px, transparent 0px) 70px 100px/400px 400px;
	background-color: #000000;
}

/* 
 * TYPOGRAPHY
 */

p,
h1,
h2,
h3,
h4,
li,
dl {
	font-family: "Emulogic";
	color: #ffffff;
	padding-bottom: 15px;
}

.digdug dl,
.digdug li,
.digdug h2,
.digdug h3,
.digdug h4,
.digdug p {
	color: #000000;
	padding-bottom: 15px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * TITLES
 */

.title-container {
	padding: 30px;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 1;
	min-height: 160px;
}

.pacman-title {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.score-container {
	margin: 0 100px;
}

/* 
 * NAVIGATION
 */

nav {
	position: relative;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 80px;
	padding: 30px;
	box-sizing: content-box;
	font-size: large;
}

nav ul {
	display: flex;
	gap: inherit;
	list-style: none;
	margin: 0;
	padding-left: 30px;
}

.nav-dk {
	padding: 40px 0 30px 40px;
}

.nav-dd {
	border-top: #00009c dashed;
	border-bottom: #fdb700 dashed;
	background-color: #000000;
	margin-top: 7px;
	padding-left: 40px;
}

.nav-gal {
	padding: 40px 0 0 40px;
}

/* 
* BORDERS
*/

.dk-border {
	position: relative;
}

.dk-border::before,
.dk-border::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 24px;
	background:
		/* top line */
		linear-gradient(90deg, #ae1932) 0 0/100% 5px,
		/* bottom line */
		linear-gradient(90deg, #ae1932) 0 19px/100% 5px,
		/* left leaning line */
		linear-gradient(145deg, transparent 40%, #ae1932 40%, #ae1932 60%, transparent 60%) 0 5px/36px 14px,
		/* right leaning */
		linear-gradient(35deg, transparent 40%, #ae1932 40%, #ae1932 60%, transparent 60%) 18px 5px/36px 14px;
	background-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
	z-index: 1;
}

.dk-border::before {
	top: -10px;
}

.dk-border::after {
	bottom: -24px;
}

.pacman-border {
	border: #0035fe 10px double;
	border-radius: 15px;
}

/* 
 * HYPERLINKS
 */

a {
	text-decoration: none;
}

/* pacman hyperlinks */
.blinky a:link,
.blinky a:visited {
	color: #dd0000;
}

.blinky a:hover {
	color: #ee2222;
}

.blinky a:active {
	color: #cc0000;
}

.pinky a:link,
.pinky a:visited {
	color: #ff9a9a;
}

.pinky a:hover {
	color: #ffbbbb;
}

.pinky a:active {
	color: #ee8989;
}

.inky a:link,
.inky a:visited {
	color: #66ffff;
}

.inky a:hover {
	color: #bbffff;
}

.inky a:active {
	color: #44dddd;
}

.clyde a:link,
.clyde a:visited {
	color: #ff9a00;
}

.clyde a:hover {
	color: #ffbc22;
}

.clyde a:active {
	color: #ee9a00;
}

/* dk hyperlinks */
.nav-dk a:link,
.nav-dk a:visited {
	color: #3fe0ce;
}

.nav-dk a:hover {
	color: #40f1df;
}

.nav-dk a:active {
	color: #be0000;
}

/* digdug hyperlinks */
.dd-white a:link,
.dd-white a:visited {
	color: #ededed;
}

.dd-white a:hover {
	color: #cbcbcb;
}

.dd-white a:active {
	color: #a9a9a9;
}

.dd-blue a:link,
.dd-blue a:visited {
	color: #007681;
}

.dd-blue a:hover {
	color: #2298a3;
}

.dd-blue a:active {
	color: #006570;
}

/* galaga hyperlinks */
.gal-green a:link,
.gal-green a:visited {
	color: #009797;
}

.gal-green a:hover {
	color: #11A8A8;
}

.gal-green a:active {
	color: #007575;
}

.gal-blue a:link,
.gal-blue a:visited {
	color: #0068DE;
}

.gal-blue a:hover {
	color: #008AFF;
}

.gal-blue a:active {
	color: #0057CD;
}

.gal-red a:link,
.gal-red a:visited {
	color: #FF0000;
}

.gal-red a:hover {
	color: #FF4444;
}

.gal-red a:active {
	color: #EE0000;
}

.gal-yellow a:link,
.gal-yellow a:visited {
	color: #FFFF00;
}

.gal-yellow a:hover {
	color: #FFFF99;
}

.gal-yellow a:active {
	color: #EEEE00;
}

/* 
 * LISTS
 */

ul {
	list-style: none;
}

li {
	margin-left: -30px;
}

.digdug li,
dd {
	margin-left: 30px;
}

/*
 * MAIN CONTENT
 */

/* main content container */
#page-container {
	position: relative;
	padding: 60px;
}

.dig-dug #page-container {
	padding: 0;
}


/* project cards */
.card-container {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.card-title {
	width: 100%;
	display: flex;
	padding: 20px;
	flex-direction: row;
	align-items: center;
}

.project-card {
	border: #1919a6 10px double;
	border-top: none;
	border-radius: 15px;
	padding: 15px;
}

.project-card img {
	max-width: 100%;
}

figure {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
}

/* 
 * FOOTER
 */

.footer {
	position: relative;
	height: 150px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 1;
	color: #ffffff;
	font-size: small;
}

.footer-dd {
	border-top: dashed #970101;
	border-bottom: dashed #970101;
	background-color: #000000;
	border-radius: 15px;
	z-index: 2;
}

.dd-footer-container {
	background-color: #970101;
}

/*
 * FOR MOBILE
 */

.hamburger {
	display: none;
	flex-direction: column;
	cursor: pointer;
	background: none;
	border: none;
	font-size: inherit;
}

/* 
 * ANIMATIONS 
 */

.sprite {
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	position: relative;
	z-index: 3;
}

/* donkey kong */
#donkey-kong {
	background-image: url("../images/dk/dk-stand.png");
	width: 120px;
	animation: throw-barrel 8s linear 3s infinite;
	z-index: 2;
}

#hand {
	position: relative;
	left: -31px;
	top: -34px;
}

.dk-animation-container {
	position: relative;
	top: 20px;
	left: 100px;
	display: flex;
	flex-direction: row;
}

.barrel {
	position: absolute;
	width: 50px;
	height: 50px;
	background: transparent;
	z-index: 5;
	background-repeat: no-repeat;
}

.barrel-h {
	background: url("../images/dk/barrel-h.png") no-repeat;
	background-size: 50px 31px;
}

.barrel-v {
	background: url("../images/dk/barrel-v.png") no-repeat;
	background-size: 31px 50px;
}

@keyframes throw-barrel {

	0%,
	100% {
		background-image: url("../images/dk/dk-stand.png");
	}

	12% {
		background-image: url("../images/dk/dk-left.png");
	}

	24% {
		background-image: url("../images/dk/dk-barrel.png");
	}

	36% {
		background-image: url("../images/dk/dk-throw.png");
	}

	48% {
		background-image: url("../images/dk/dk-stand.png");
	}

	60% {
		background-image: url("../images/dk/dk-right.png");
	}

	72% {
		background-image: url("../images/dk/dk-barrel.png");
	}

	84% {
		background-image: url("../images/dk/dk-throw.png");
	}
}

@keyframes spin {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

/* digdug */

#dino {
	background-image: url("../images/dd/dino-open.png");
	width: 93px;
	animation: dino-walk 3s linear 1s infinite;
}

#goggle {
	background-image: url("../images/dd/goggle-down.png");
	transform: rotate(90deg);
	animation: goggle-walk 1s linear 1s infinite;
}

.tunnel-base {
	background-color: #000000;
	border-radius: 15px;
	padding: 5px;
	z-index: 2;
}

#page-container .tunnel-one {
	position: relative;
	left: 100px;
	border-top: #df6804 3px dashed;
	border-bottom: #df6804 3px dashed;
	width: 600px;
}

#page-container .tunnel-two {
	position: absolute;
	left: 550px;
	bottom: 200px;
	border-left: #970101 3px dashed;
	border-right: #970101 3px dashed;
	height: 200px;
}

.rock {
	position: absolute;
	background: url("../images/dd/rock.png") no-repeat;
	width: 100px;
	height: 100px;
}

.rock-one {
	left: 700px;
	top: 15px;
}

.rock-two {
	left: 600px;
	bottom: 300px;
}

.rock-three {
	left: 550px;
	bottom: 100px;
}

@keyframes dino-walk {

	/* Start facing left, walk right to 500px */
	0% {
		left: 0px;
		transform: scaleX(-1);
		background-image: url("../images/dd/dino-open.png");
	}

	6.25% {
		left: 62px;
		transform: scaleX(-1);
		background-image: url("../images/dd/dino-closed.png");
	}

	12.5% {
		left: 125px;
		transform: scaleX(-1);
		background-image: url("../images/dd/dino-open.png");
	}

	18.75% {
		left: 187px;
		transform: scaleX(-1);
		background-image: url("../images/dd/dino-closed.png");
	}

	25% {
		left: 250px;
		transform: scaleX(-1);
		background-image: url("../images/dd/dino-open.png");
	}

	31.25% {
		left: 312px;
		transform: scaleX(-1);
		background-image: url("../images/dd/dino-closed.png");
	}

	37.5% {
		left: 375px;
		transform: scaleX(-1);
		background-image: url("../images/dd/dino-open.png");
	}

	43.75% {
		left: 437px;
		transform: scaleX(-1);
		background-image: url("../images/dd/dino-closed.png");
	}

	/* Reach the end, still facing left */
	50% {
		left: 500px;
		transform: scaleX(-1);
		background-image: url("../images/dd/dino-open.png");
	}

	/* Turn around to face right */
	50.1% {
		left: 500px;
		transform: scaleX(1);
		background-image: url("../images/dd/dino-open.png");
	}

	/* Walk back to start */
	56.25% {
		left: 437px;
		transform: scaleX(1);
		background-image: url("../images/dd/dino-closed.png");
	}

	62.5% {
		left: 375px;
		transform: scaleX(1);
		background-image: url("../images/dd/dino-open.png");
	}

	68.75% {
		left: 312px;
		transform: scaleX(1);
		background-image: url("../images/dd/dino-closed.png");
	}

	75% {
		left: 250px;
		transform: scaleX(1);
		background-image: url("../images/dd/dino-open.png");
	}

	81.25% {
		left: 187px;
		transform: scaleX(1);
		background-image: url("../images/dd/dino-closed.png");
	}

	87.5% {
		left: 125px;
		transform: scaleX(1);
		background-image: url("../images/dd/dino-open.png");
	}

	93.75% {
		left: 62px;
		transform: scaleX(1);
		background-image: url("../images/dd/dino-closed.png");
	}

	/* Back at start, turn around to face left again */
	100% {
		left: 0px;
		transform: scaleX(1);
		background-image: url("../images/dd/dino-open.png");
	}
}

@keyframes goggle-walk {

	0% {
		top: 0px;
		transform: rotate(90deg) scaleX(-1);
		background-image: url("../images/dd/goggle-up.png");
	}

	10% {
		top: 18px;
		transform: rotate(90deg) scaleX(-1);
		background-image: url("../images/dd/goggle-down.png");
	}

	20% {
		top: 36px;
		transform: rotate(90deg) scaleX(-1);
		background-image: url("../images/dd/goggle-up.png");
	}

	30% {
		top: 54px;
		transform: rotate(90deg) scaleX(-1);
		background-image: url("../images/dd/goggle-down.png");
	}

	40% {
		top: 72px;
		transform: rotate(90deg) scaleX(-1);
		background-image: url("../images/dd/goggle-up.png");
	}

	50% {
		top: 90px;
		transform: rotate(90deg) scaleX(-1);
		background-image: url("../images/dd/goggle-down.png");
	}

	50.1% {
		top: 90px;
		transform: rotate(90deg) scaleX(1);
		background-image: url("../images/dd/goggle-down.png");
	}

	60% {
		top: 72px;
		transform: rotate(90deg) scaleX(1);
		background-image: url("../images/dd/goggle-up.png");
	}

	70% {
		top: 54px;
		transform: rotate(90deg) scaleX(1);
		background-image: url("../images/dd/goggle-down.png");
	}

	80% {
		top: 36px;
		transform: rotate(90deg) scaleX(1);
		background-image: url("../images/dd/goggle-up.png");
	}

	90% {
		top: 18px;
		transform: rotate(90deg) scaleX(1);
		background-image: url("../images/dd/goggle-down.png");
	}

	100% {
		top: 0px;
		transform: rotate(90deg) scaleX(1);
		background-image: url("../images/dd/goggle-up.png");
	}
}

/* pacman */

#pacman {
	background-image: url("../images/pacman/pacman-open.png");
	animation: pacman 250ms linear 2s infinite;
	z-index: 4;
}

.pellets {
	width: 545px;
	box-sizing: content-box;
	overflow-x: hidden;
}

@keyframes pacman {

	0%,
	100% {
		background-image: url("../images/pacman/pacman-open.png");
	}

	25% {
		background-image: url("../images/pacman/pacman-semi.png");
	}

	50% {
		background-image: url("../images/pacman/pacman-closed.png");
	}

	75% {
		background-image: url("../images/pacman/pacman-semi.png");
	}
}

/* galaga */
#gal-ship {
	background-image: url("../images/galaga/ship.png");
	position: fixed;
	bottom: 0;
}

.bullet {
	background-image: url("../images/galaga/bullet.png");
	position: absolute;
	width: 18px;
	height: 50px;
	z-index: 2;
}

#bug-nest {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: center;
	padding-bottom: 50px;
	animation: bug-shuffle 6s steps(2, end) 1.3s infinite;
}

.green-alien {
	background-image: url("../images/galaga/alien-green-open.png");
	animation: green-alien 1.5s linear 1s infinite;
}

.blue-alien {
	background-image: url("../images/galaga/alien-blue-open.png");
	animation: blue-alien 1.5s linear 1s infinite;
}

.red-bug {
	background-image: url("../images/galaga/bug-red-open.png");
	animation: red-bug 1.5s linear 1s infinite;
}

.blue-bug {
	background-image: url("../images/galaga/bug-blue-open.png");
	animation: blue-bug 1.5s linear 1s infinite;
}

@keyframes green-alien {

	0%,
	100% {
		background-image: url("../images/galaga/alien-green-open.png");
	}

	50% {
		background-image: url("../images/galaga/alien-green-closed.png");
	}
}

@keyframes blue-alien {

	0%,
	100% {
		background-image: url("../images/galaga/alien-blue-open.png");
	}

	50% {
		background-image: url("../images/galaga/alien-blue-closed.png");
	}
}

@keyframes red-bug {

	0%,
	100% {
		background-image: url("../images/galaga/bug-red-open.png");
	}

	50% {
		background-image: url("../images/galaga/bug-red-closed.png");
	}
}

@keyframes blue-bug {

	0%,
	100% {
		background-image: url("../images/galaga/bug-blue-open.png");
	}

	50% {
		background-image: url("../images/galaga/bug-blue-closed.png");
	}
}

@keyframes bug-shuffle {
	0% {
		transform: translateX(0px);
	}

	25% {
		transform: translateX(40px);
	}

	50% {
		transform: translateX(80px);
	}

	75% {
		transform: translateX(40px);
	}

	100% {
		transform: translateX(0px);
	}
}

@keyframes bug-death {

	0% {
		background-image: url("../images/galaga/explode-1.png");
	}

	25% {
		background-image: url("../images/galaga/explode-2.png");
	}

	50% {
		background-image: url("../images/galaga/explode-3.png");
	}

	75% {
		background-image: url("../images/galaga/explode-4.png");
	}

	100% {
		background-image: url("../images/galaga/explode-5.png");
	}
}

@media only screen and (max-width: 767px) {

	body {
		font-size: 0.8em;
	}

	.title-container {
		flex-direction: column;
		top: 20px;
		gap: 0px;
		text-align: center;
	}

	.dk-animation-container {
		left: 0px;
		top: 0px;
	}

	.hamburger {
		display: flex;
	}

	nav {
		height: auto;
		min-height: 40px;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;
	}

	nav ul {
		position: absolute;
		top: 100%;
		width: 100%;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 20px 0 0 0;
		border-top: 1px solid #3fe0ce;
		opacity: 0;
		visibility: hidden;
	}

	nav ul.active {
		margin-top: -40px;
		position: relative;
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.digdug img {
		width: 250px;
	}

	#page-container .tunnel-one {
		position: relative;
		left: 0;
		top: 0;
		width: 250px;
	}

	#page-container .tunnel-two {
		position: relative;
		left: 0;
		top: 20px;
		height: 200px;
		width: 100px;
	}

	.rock {
		position: relative;
		top: 0;
	}

	.rock-one {
		left: 100px;
	}

	.rock-two {
		left: 0px;
	}

	.rock-three {
		left: 180px;
		top: 50px;
	}

	#dino {
		animation-duration: 2s;
	}

	@keyframes dino-walk {

		/* Start facing left, walk right to 320px */
		0% {
			left: 0px;
			transform: scaleX(-1);
			background-image: url("../images/dd/dino-open.png");
		}

		12.5% {
			left: 38px;
			transform: scaleX(-1);
			background-image: url("../images/dd/dino-closed.png");
		}

		25% {
			left: 75px;
			transform: scaleX(-1);
			background-image: url("../images/dd/dino-open.png");
		}

		37.5% {
			left: 113px;
			transform: scaleX(-1);
			background-image: url("../images/dd/dino-closed.png");
		}

		/* Reach the end, still facing left */
		50% {
			left: 150px;
			transform: scaleX(-1);
			background-image: url("../images/dd/dino-open.png");
		}

		/* Turn around to face right */
		50.1% {
			left: 150px;
			transform: scaleX(1);
			background-image: url("../images/dd/dino-open.png");
		}

		/* Walk back to start */
		62.5% {
			left: 113px;
			transform: scaleX(1);
			background-image: url("../images/dd/dino-closed.png");
		}

		75% {
			left: 75px;
			transform: scaleX(1);
			background-image: url("../images/dd/dino-open.png");
		}

		87.5% {
			left: 38px;
			transform: scaleX(1);
			background-image: url("../images/dd/dino-closed.png");
		}

		/* Back at start, turn around to face left again */
		100% {
			left: 0px;
			transform: scaleX(1);
			background-image: url("../images/dd/dino-open.png");
		}
	}

	.score-container,
	.pellets {
		visibility: collapse;
	}

	#pacman {
		animation-duration: 1.5s;
		position: relative;
		left: 100px;
	}

	.card-container {
		width: 110%;
	}

	@keyframes pacman {
		0% {
			left: 100px;
			transform: scaleX(1);
			background-image: url("../images/pacman/pacman-open.png");
		}

		5% {
			left: 120px;
			transform: scaleX(1);
			background-image: url("../images/pacman/pacman-semi.png");
		}

		10% {
			left: 140px;
			transform: scaleX(1);
			background-image: url("../images/pacman/pacman-closed.png");
		}

		15% {
			left: 160px;
			transform: scaleX(1);
			background-image: url("../images/pacman/pacman-semi.png");
		}

		20% {
			left: 180px;
			transform: scaleX(1);
			background-image: url("../images/pacman/pacman-open.png");
		}

		25% {
			left: 200px;
			transform: scaleX(1);
			background-image: url("../images/pacman/pacman-semi.png");
		}

		30% {
			left: 220px;
			transform: scaleX(1);
			background-image: url("../images/pacman/pacman-closed.png");
		}

		35% {
			left: 240px;
			transform: scaleX(1);
			background-image: url("../images/pacman/pacman-semi.png");
		}

		40% {
			left: 260px;
			transform: scaleX(1);
			background-image: url("../images/pacman/pacman-open.png");
		}

		45% {
			left: 280px;
			transform: scaleX(1);
			background-image: url("../images/pacman/pacman-semi.png");
		}

		/* Reach the end, still facing right */
		50% {
			left: 300px;
			transform: scaleX(1);
			background-image: url("../images/pacman/pacman-closed.png");
		}

		/* Turn around to face left */
		50.1% {
			left: 300px;
			transform: scaleX(-1);
			background-image: url("../images/pacman/pacman-closed.png");
		}

		/* Walk back to start */
		55% {
			left: 280px;
			transform: scaleX(-1);
			background-image: url("../images/pacman/pacman-semi.png");
		}

		60% {
			left: 260px;
			transform: scaleX(-1);
			background-image: url("../images/pacman/pacman-open.png");
		}

		65% {
			left: 240px;
			transform: scaleX(-1);
			background-image: url("../images/pacman/pacman-semi.png");
		}

		70% {
			left: 220px;
			transform: scaleX(-1);
			background-image: url("../images/pacman/pacman-closed.png");
		}

		75% {
			left: 200px;
			transform: scaleX(-1);
			background-image: url("../images/pacman/pacman-semi.png");
		}

		80% {
			left: 180px;
			transform: scaleX(-1);
			background-image: url("../images/pacman/pacman-open.png");
		}

		85% {
			left: 160px;
			transform: scaleX(-1);
			background-image: url("../images/pacman/pacman-semi.png");
		}

		90% {
			left: 140px;
			transform: scaleX(-1);
			background-image: url("../images/pacman/pacman-closed.png");
		}

		95% {
			left: 120px;
			transform: scaleX(-1);
			background-image: url("../images/pacman/pacman-semi.png");
		}

		100% {
			left: 100px;
			transform: scaleX(-1);
			background-image: url("../images/pacman/pacman-open.png");
		}
	}

	#bug-nest,
	#bug-nest .alien {
		visibility: hidden;
		height: 0px;
		padding-bottom: 0px;
	}

	#gal-ship {
		position: relative;
		left: 200px;
	}
}