* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'Sysfont';
  src: url('fonts/sysfont.woff2') format('woff2'),
  url('fonts/sysfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'IBM';
  src: url('Web437_IBM_Model3x_Alt4.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {
	scrollbar-width: thin;
	scrollbar-color: #C44C5C #fecb40;
}

h3 {
	font-family: Sysfont;
	font-size: 30px;
	background-color: #914eb5;
	border-radius: 0px 100px 100px 0px;
	color: white;
	text-align: center;
}

h2 {
	font-family: Sysfont;
	font-size: 20px;
	color: #300745;
}

p { /* Paragraph styling */
  font-size: 15px;
  color: #300745;
  font-family: "Sysfont";
}
 
a {
  font-size: 15px;
  color: #df1678;
  font-family: "Sysfont";
  text-decoration: none;
}

b {
  font-size: 16px;
  color: #300745;
  font-family: "Sysfont";
}

hr {
	color: #300745;
}

img.kirbyvibe {
	bottom: 0;
	right: 0;
	position: fixed;
	margin: 0 3% 3% 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* SPLASH PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.flex10 {
	display: flex;
	justify-content: center;
}

.flex11 {
	display: flex;
	justify-content: center;
}

.splash {
	width: 900px;
	max-height: 900px;
	border-radius: 10px;
	align-items: center;
	padding: 15px;
}

.splash2 {
	width: 430px;
	height: 260px;
	border: none;
	display: flex;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* HOME PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.header {
	position: relative;
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	left: 240px;
}

.art {
	font-family: Sysfont;
	font-size: 30px;
	background-color: #914eb5;
	border-radius: 0px 100px 100px 0px;
	color: white;
	width: 215px;
	height: 40px;
	position: absolute;
	text-align: center;
	left: 848px;
}

.art2 {
	font-family: Sysfont;
	font-size: 30px;
	background-color: orange;
	border-radius: 0px 100px 100px 0px;
	color: white;
	width: 501px;
	height: 40px;
	position: absolute;
	text-align: center;
	left: 848px;
}

.art3 {
	font-family: Sysfont;
	font-size: 30px;
	background-color: white;
	border-radius: 0px 100px 100px 0px;
	color: white;
	width: 360px;
	height: 40px;
	position: absolute;
	text-align: center;
	left: 848px;

}

.art, .art2, .art3 {
	top: 430px;
}

.art4 { /* This is the last one I swear */
	font-family: Sysfont;
	font-size: 30px;
	background-color: #914eb5;
	border-radius: 100px 0px 0px 100px;
	color: white;
	width: 250px;
	height: 40px;
	position: absolute;
	text-align: center;
	left: 1095px;
	top: 835px;
}

.change {
	font-family: Sysfont;
	font-size: 30px;
	background-color: #914eb5;
	border-radius: 0px 100px 100px 0px;
	color: white;
	width: 270px;
	height: 40px;
	position: absolute;
	text-align: center;
	left: 570px;
	top: 430px;
}

.contain {
	margin: 0 auto;
}

.left, .right, .main {
	border: none;
}

.left, .right, .main {
	width: 150px;
}

.left, .right {
	margin-left: 10px;
	margin-right: 10px;
	width: 300px;
}

.main {
	width: 800px;
	height: 990px;
	border: 5px ridge #914eb5;
	border-radius: 10px;
	background-color: #f8dc92;
	padding: 10px;
}

.head {
	height: 100px;
	width: 1100px;
	border: 1px solid white;
}

.flex {
	display: flex;
	justify-content: center;
}

.box {
	border: 5px ridge #914eb5;
	border-radius: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
	background-color: #f8dc92;
	padding: 15px;
}

.top {
	width: 770px;
	height: 300px;
	padding: 5px;
}

.welc {
	background-color: #f8dc92;
	padding: 15px;
	width: 400px;
	height: 160px;
	margin: 5px;
}

.imagee {
	width: 786px;
	height: 145px;
	position: relative;
	border: none;
}

.nebbyhype {
	position: absolute;
	top: -173px;
}

.nav {
	font-size: 20px;
}

ul {
	list-style-type: '☆';
}

.changelog { /* Overflow container for the right sidebar */
  background: white;
  color: white;
  padding: 20px;
  width: 35%;
  height: 400px;
  overflow: auto;
  border: none;
  scrollbar-width: thin;
  text-align: left;
  background-image: url('backgrounds/pixelcity.jpg');
}

.artprev {
	width: 500px;
	height: 400px;
	border: none;
	box-shadow: 5px 5px 0px 0px orange;
	margin-left: 10px;
	background-image: url('newart.png');
}

.flex2 {
	display: flex;
}

.marquee {
	height: 50px;
	margin: 0;
	width: 770px;
}

.latestart {
	width: 350px;
	height: 35px;
	position: absolute;
	border: none;
	float: right;
}

.flex3 {
	display: flex;
	height: 100px;
	justify-content: center;
}

.button1 { 
  background-color: #914eb5;
  margin: 15px;
  border-radius: 0px 100px 100px 100px;
  font-family: "Sysfont";
  font-size: 17px;
  font-weight: bold;
  color: #1B0341;
  padding: 10px 10px;
  display: block;
  margin-bottom: 10px;
  box-shadow: 8px 8px 0px 0px #62128b;
}

.button1:hover{
  background-color: #FFE47A;
}

a.link {
	color: orange;
	font-size: 20px;
}

@media only screen and (max-width: 600px) {
	.left, .main, .right {
		width: auto;
	}
	.main {
		width: 100%;
	}
	.flex {
		flex-direction: column;
	}
	.header {
		width: auto;
	}
	.nebbyhype {
		width: auto;
	}
	.changelog {
		width: 50%;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ABOUT PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.container2 {
	border: none;
	width: 1100px;
	margin: auto;
	height: 715px;
}

.abt {
	border: 5px ridge #914eb5;
	width: 900px;
	margin-bottom: 50px;
	height: auto;
	padding: 15px;
	border-radius: 10px;
	background-color: #f8dc92;
}

.flex5 {
	display: flex;
}

.flex6 {
	display: flex;
	justify-content: center;
}

.inventory {
	border: 5px ridge #914eb5;
	border-radius: 10px;
	background-color: #f8dc92;
	width: 500px;
	margin-right: 20px;
	max-height: 500px;
}

#abtimg {
	width: 60%;
	padding: 15px;
}

#abtimg img {
	max-width: 100%;
}

.abthead {
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin-left: 390px;
}

.inventhead {
	width: 490px;
	background-color: white;
	font-size: 50px;
	font-family: 'Sysfont';
	border-radius: 5px;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* SHRINE PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.flex7 { /* For the Shrine Page */
	display: flex;
	justify-content: center;
}

.shrine {
	width: 1300px;
	height: 300px;
	padding: 20px;
}

.item {
	border: none;
	margin-right: 74px;
	margin-bottom: 10px;
}
.wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin: 2;
}

.shrinehead {
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin-left: 310px;
}

.flex12 {
	display: flex;
}

.shrinedesc {
	border: none;
	width: 290px;
	margin-left: 70px;
	max-height: 100px;
	justify-content: center;
	padding: 5px;
	text-align: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* PROJECTS PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.container3 {
	border: 5px ridge #914eb5;
	border-radius: 10px;
	width: 1285px;
	height: 655px;
	padding: 15px;
	margin: 0 auto;
	background-color: #f8dc92;
	box-shadow: 10px 10px 0px 0px #914eb5;
}

.flex8 {
	display: flex;
}

.flex9 {
	display: flex;
	border: none;
}

.proj {
	border: 5px ridge #914eb5;
	box-shadow: 8px 8px 0px 0px #914eb5; 
	width: 275px;
	height: 500px;
	margin: 20px;
	border-radius: 15px;
}

.proj.sq {
	background-image: url('gallery/2021gallery/starquestposter.png');
	background-size: cover;
	background-repeat: no-repeat;
}

.proj.cal {
	background-image: url('gallery/2021gallery/dontwander.png');
	background-size: cover;
	background-repeat: no-repeat;
	justify-content: center;
	background-position: 40% 10%;
}

.proj.en {
	background-image: url('gallery/2021gallery/springchild.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 40% 10%;
}

.proj.aa {
	background-image: url('gallery/2022gallery/adastra.png');
	background-size: cover;
	background-repeat: no-repeat;
}

.projinfo {
	border: none;
	width: 290px;
	margin-left: 15px;
	max-height: 100px;
	justify-content: center;
	padding: 5px;
	text-align: center;
}

.projheader {
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin-left: 390px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* RESOURCES PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.flex13 {
	display: flex;
	justify-content: center;
}

.resources {
	width: 1000px;
	max-height: 1800px;
	border: 1px solid white;
	padding: 15px;
	border: 5px ridge #914eb5;
	border-radius: 10px;
	background-color: #f8dc92;
}

.reheader {
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin-left: 390px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* SITEMAP PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.flex14 {
	display: flex;
	justify-content: center;
}

.sitemap {
	width: 1000px;
	max-height: 1800px;
	border: 1px solid white;
	padding: 15px;
	border: 5px ridge #914eb5;
	border-radius: 10px;
	background-color: #f8dc92;
	column-count: 2;
}

.mapheader {
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin-left: 390px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* CHARACTERS PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.charaflex {
	display: flex;
	justify-content: center;
}

.chara {
	width: 1000px;
	max-height: 1800px;
	border: 1px solid white;
	padding: 15px;
	border: 5px ridge #914eb5;
	border-radius: 10px;
	background-color: black;
	text-align: center;
}

.charahead {
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin-left: 390px;
}

img.oc { /* For the OC List */
	border-radius: 20px;
	margin: 5px;
	border: 2px dashed white;
}

img.oc:hover { /* For the OC List */
	background-color: white;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* GALLERY PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.galleryflex {
	display: flex;
	justify-content: center;
}

.gallerymain {
	width: 1090px;
	max-height: auto;
	padding: 20px;
	border: 5px ridge #914eb5;
	border-radius: 10px;
	background-image: linear-gradient(to bottom, #f8dc92, #faae58);
	text-align: center;
}

.galleryhead {
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin-left: 390px;

}

.yearhead {
	background-image: linear-gradient(to bottom, #F5BC6C, #F7835A);
	height: 100px;
	width: 1304px;
	justify-content: center;
	display: flex;
	border-radius: 20px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin: auto;
}

.navbar {
	height: 65px;
	width: 1455px;
	font-size: 25px;
	font-family: 'Sysfont';
	color: white;
	border-radius: 20px;
	margin: auto;
}

.navflex {
	display: flex;
}

.navlink {
	background-color: #150227;
	font-family: 'Sysfont';
	color: white;
	font-size: 25px;
	width: 75px;
	border-radius: 15px;
	margin: 10px;
	padding: 10px;
	border: 3px ridge #914eb5;
	text-align: center;
}

.navlink:hover {
	background-color: orange;
}

.navlink.long {
	width: 150px;
	margin: auto;
}

.flex15 {
	display: block;
	justify-content: center;
	text-align: center;
}

.gallerylink {
	width: 250px;
	height: 240px;
	border: 3px solid #771924;
	float: left;
	border-radius: 20px;
	margin-bottom: 20px;
	margin-right: 10px;
	font-size: 35px;
	background-color: #C54E5C;
	padding: 3px;
	box-shadow: 5px 5px #8D2B52;
}

.galleryimg {
	width: 100%;
	height: 170px;
	border-radius: 20px;
	margin-bottom: 20px;
}

.galleryimg.twothree {
	background-image: url('gallery/2022gallery/monolith.png');
	background-size: cover;
}

.galleryimg.twotwo {
	background-image: url('gallery/2022gallery/leavinghome.png');
	background-size: cover;
}

.galleryimg.twoone {
	background-image: url('gallery/2022gallery/chaosbattle.jpg');
	background-size: cover;
}

.galleryimg.twozero {
	background-image: url('gallery/2020gallery/bluelake.png');
	background-size: cover;
}

.galleryimg.onenine {
	background-image: url('gallery/2019gallery/shoppin.png');
	background-size: cover;
}

.galleryimg.oneeight {
	background-image: url('gallery/2018gallery/haikaraibu.png');
	background-size: cover;
}

.galleryimg.oneseven {
	background-image: url('gallery/2017gallery/hellboatwillie.png');
	background-size: cover;
}

.galleryimg.onesix {
	background-image: url('gallery/2016gallery/kirakoma.png');
	background-size: cover;
}

.galleryimg.onefive {
	background-image: url('gallery/2015gallery/kcday2.png');
	background-size: cover;
}

.galleryimg.onefour {
	background-image: url('gallery/2014gallery/peacefulday.png');
	background-size: cover;
}

.galleryimg.onethree {
	background-image: url('gallery/2013gallery/cold.png');
	background-size: cover;
}

.galleryimg.onetwo {
	background-image: url('gallery/2012gallery/halloween2012.png');
	background-size: cover;
}

.galleryimg.oneone {
	background-image: url('gallery/2011gallery/matryoshka.png');
	background-size: cover;
}

.galleryimg.onezero {
	background-image: url('gallery/2010gallery/spaceparadise.png');
	background-size: cover;
}

.galleryimg.zeronine {
	background-image: url('gallery/2009gallery/puirui.jpg');
	background-size: cover;
}

.galleryyear {
	width: 100%;
	height: 50px;
	border: 1px solid #dd8ff1;
	border-radius: 20px;
	background-color: linear-gradient(to bottom, #8f33c0, #fecb40);
}

.galleryyear:hover {
	background-image: linear-gradient(to top, #150227, #df1678);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* KERPUFFLE ADOPTS */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.kerpuffleflex {
	display: flex;
	justify-content: center;
}

.kerpuffle {
	width: 1000px;
	max-height: 1800px;
	border: 1px solid white;
	padding: 15px;
	border: 5px ridge #914eb5;
	border-radius: 10px;
	background-color: #f8dc92;
}

.kerpufflehead {
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin-left: 390px;
}

.flex16 {
	display: flex;
}

.contain1 {
	border: 1px solid black;
	width: 800px;
	height: auto;
	text-align: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 404 PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.fourohfour { 
  margin: auto;
  max-width: 800px;
  padding: 30px;
  background-color: black;
  border-radius: 20px;
  text-align: center;
}
	
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* LINKS PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.flex17 {
	display: flex;
	justify-content: center;
}

.linkpage {
	width: 1000px;
	max-height: 1800px;
	border: 1px solid white;
	padding: 15px;
	border: 5px ridge #914eb5;
	border-radius: 10px;
	background-color: #f8dc92;
}

.linkheader {
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin-left: 390px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ARCHIVE PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.flex18 {
	display: flex;
	justify-content: center;
}

.archivepage {
	width: 1000px;
	max-height: auto;
	border: 1px solid white;
	padding: 15px;
	border: 5px ridge #914eb5;
	border-radius: 10px;
	background-color: #f8dc92;
}

.archiveheader {
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin-left: 390px;
}

summary, slot[name="internal-main-summary"]::slotted(summary) {
	display: list-item;
	font-family: 'Sysfont';
	font-size: 30px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* SKETCHBOOK PAGE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.flex19 {
	display: flex;
	justify-content: center;
}

.sketchypage {
	width: 1000px;
	max-height: auto;
	border: 1px solid white;
	padding: 15px;
	border: 5px ridge #914eb5;
	border-radius: 10px;
	background-color: #f8dc92;
}

.sketchyheader {
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin-left: 390px;
}

.flex20 {
	display: flex;
	justify-content: center;
}

nav.tabs {
	width: 100%;
	margin-top: 20px;
	display: inline-block;
}

.thumbnail {
	width: 100px;
	height: 100px;
	border: 2px solid black;
	background-size: 360%;
	margin-bottom: 10px;
	margin-right: 10px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* SKETCHBOOK LIGHTBOX - FROM W3SCHOOLS */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: none;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: auto;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
  width: 50%;
  margin: auto;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}