:root{
	--main-border: 1px solid #000;
	--alt-font: 'Courier New', Monospace;
}
body {
	background-color: #4e4e48;
	background-image: url('/style/secretgarden.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: #032626;
}
header {
	background-color: rgba(0, 0, 0, .9);
	color: #439966;
}
.headernav {
	background-color: rgba(0, 0, 0, .7);
	color: #ff984f;
}
::selection {
	background: #7faf81;
	color: #f7f7f7;
}
a:link {
	color: #569154;
  text-decoration: underline dotted;
}
a:visited {
	color: #569154;
}
a:hover {
	color: #569154;
}
a:active {
	color: #569154;
}
.noh:link {
  text-decoration: none;
} 
p a:link,h4 a:link,h5 a:link,h6 a:link {font-weight:bold;
}
header a:link {
  color: #ff984f;
}
header a:visited {
  color: #ff984f;
}
header a:hover {
	color: #ffc296;
}
div.headernav a:link {
  color: #ff984f;
}
div.headernav a:visited {
  color: #ff984f;
}
div.headernav a:hover {
	color: #ffc296;
}
nav a:link,.submenu a:link {
	color: #7faf81;
  text-decoration: none;
}
nav a:visited,.submenu a:visited {
	color: #7faf81;
}
nav a:hover {
	color: #7faf81;
	background-color: rgba(0, 0, 0, .8);
}
.submenu a:hover{color: #569154;}
a.navheadl:link {
	color: #ff984f;
}
a.navheadl:visited {
	color: #ff984f;
}
a.navheadl:hover {
	color: #ffc296;
}
header {
	border: solid 1px #000000;
  color: #ff984f;}
.headernav{
	border: solid 1px #000000;
	border-top:none;}
.openbtn {
	color: #ff984f;
}
.navmenu {
	color: #ff984f;
	background-color: rgba(0, 0, 0, 0.7);
	background-image: none;
	border: solid 1px #000000;
	border-top:none;
	border-radius:4px;
}
.navhead {
	height:2rem;
  padding:.35rem;
	padding-left:1.25rem;
	background: #000;
	border-right: none;
	border-radius:4px 0 0 4px;
}
.startnav {
  padding-top:.4rem;
}
.subnavhead {
	color:#D57661;
}
.about{
  background-image: url("about.png");
  width:80px;
  height:19px;
  margin: 0rem;
  }
.work{
  background-image: url("work.png");
  width:72px;
  height:19px;
  cursor: url('petzpoint.png'), auto;	
  margin: 0rem;
  }
.games{
  background-image: url("games.png");
  width:78px;
  height:19px;
  cursor: url('petzpoint.png'), auto;	
  margin: 0rem;
  }
.stuff{
  background-image: url("stuff.png");
  width:65px;
  height:19px;
  margin: 0rem;
  }
.explore{
  background-image: url("explore.png");
  width:98px;
  height:19px;
  margin: 0rem;
  }
article {
	background-color: #ede3d8;
	background-image: url('/style/ep_natural.png');
	border:10px solid;
	border-image: url('/style/cork-board-round.png') 27 round;
	border-top:10px solid;
	border-radius: 10px;
	box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, .3);
	font-family: var(--alt-font);
}
article:first-child{margin-top:1rem}
article+article {
	border-top:10px solid;
	border-image: url('/style/cork-board-round.png') 27 round;
	border-radius: 10px;
	}
.flexarticlecont article {
	border-top:10px solid;
	border-image: url('/style/cork-board-round.png') 27 round;
	border-radius: 10px;}
.box {
  color:#26170d;
	background-color: #9c8673;
	background-image: url('https://i.imgur.com/SY309qB.png');
	border:10px ridge #645243;
}
.submenu {
  border-top:none;
	border-image: none;
	background-color: rgba(0, 0, 0, .7);
	background-image: none;
  color: #ff984f;
	border-radius:0 0 4px 4px;
	margin-top:0;}
article.submenu h2, article.submenu h3, article.submenu a {
  font-size: 1rem;
  color: #ff984f;}
article.submenu:first-child {
	margin-top:0;}
.top {
  max-width:fit-content;
  border-top: var(--main-border);
  border-radius: 4px 0 4px 0;
  border-bottom:none;
  margin-top:1.5rem;
  padding-left:2rem;
  padding-right:2rem;
}
.top+article {margin-top:0}
.submenu h2 {
  color: #ff984f;}
p{
	line-height:100%;}
article>p {
  max-width:95%;
}
article h2{ 
	color: #032626;
	font-family: var(--alt-font);}
.titlebar {
  width:90%;
	color: #D57661;
	background-color: rgba(0, 0, 0, .7);
	background-image: none;
	font-size:.875rem;
  text-align:center;
	border-radius:4px 4px 0 0;
	padding:.4rem;}
h3{ 
	color: #032626;
	font-size:1.125rem;}
h4{ 
	color: #032626;
	font-size:1.0625rem;}
	h4.sub {font-size:1rem;}
h5{ 
	color: #032626;
	font-size:.875rem;}
h6{ 
	color: #032626;}
.hborder {
  border:7px solid #fff;
  border-radius:4px;
	box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, .3);
  background-color:#fff}
.hborder:hover {
  border-color:#fff;
  transform: rotate(2deg)}
.hborder:active {
  transform: rotate(-2deg)}
.hborder h5{
  margin:0px;
  padding-top:.4rem;
  padding-bottom:.1rem;}
.hborder img {vertical-align: bottom;}
a:hover .hborder {border-color: #fff}
.innerborder {border:1px solid #dbdbdb}
.column {
  max-width:fit-content;
  text-align:left;}
hr {
  border:1px dashed #1c5232;
}
footer {
  color:#fff
}
.headimg{
  margin-top:-.6rem;
	transition: .5s ease-out;}
.headimgcont {
  height:1rem;
  width:100%;
  text-align:center;
  margin:0;
	transition: .5s ease-out;
}
.headimgcont+article{margin-top:0}

.headimgcont+article.submenu{
  margin-top: .7rem;}
@media screen and (min-width: 2048px) {
body {
	background-size: cover;}
}
@media screen and (max-width: 1020px) {
main {
	grid-template-areas:
		"sidenav body";
	grid-template-columns: minmax(11rem,12.2rem) minmax(0,2.5fr);
	transition: .5s ease-out;
	}
}
@media screen and (max-width: 1000px) {
article {
  border: 10px solid;
	border-image: url('/style/cork-board-round.png') 27 round;
	border-radius: 10px;
}
}
@media screen and (max-width: 680px) {
main {
	grid-template-areas:
		"body";
	grid-template-columns: minmax(0,2.5fr);}
article {
  border: 10px solid;
	border-image: url('/style/cork-board-round.png') 27 round;
	border-radius: 10px;
}
.navmenu {
	background-color: rgba(0, 0, 0, 0.9);
}
.headimg{
  margin-top:.2rem;
	transition: .5s ease-out;}
.headimgcont {
  height:1.8rem;
	transition: .5s ease-out;}
	}