main {
	grid-template-columns: 12.2rem minmax(0,63.8rem) 12.2rem;
  }
  article{
  padding-right:4.5rem}
.talkbox {
	text-align:left;
	border: var(--double-border);
	border-radius:4px;
	padding:.6rem;
}
.talkbox p {margin-bottom:0}
.buttonbox{
	height:33px;
	overflow:hidden;
	text-align:center;
	margin:.6rem auto;
}
.flexcontainer {
	display:flex;
	flex-wrap:wrap;
	align-items: stretch;
	justify-content:center;
	flex-align:flex-start;
	gap: 1rem;
	margin-bottom:1rem;
}
.flexcontainerbaseline {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
	align-content:space-around;
	flex-align:baseline;
	gap: .6rem;
	padding:.6rem;
}
.flexpadbox {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
	align-content:space-around;
	padding:.6rem 1rem;
	gap: .2rem;
	grid-row-gap: .4rem;
	text-align:center;
	margin:auto;
}
#myLinks {
  padding:.6rem 0;
  flex-direction:column;
  gap: .1rem;}
.shoutbox {
	width:27rem;
	height:15.125rem;
	transition: .5s ease-out;
}
.shoutboxframe {
	width:100%;
	height:15.125rem;
}
.changelogbox {
	max-width:27rem;
	transition: .5s ease-out;
	border:4px inset #333;
	box-sizing: border-box;
}
.changelogheader {
  position:relative;
	font-family: 'Consolas', Monospace;
	font-size: 0.75rem;
	padding-bottom:.2rem;
	padding:.4rem;
	border:1px solid #000;
	background-color: #111111;
}
.changelog {
	font-family: 'Consolas', Monospace;
	background: #111111;
	height:14.05rem;
	overflow-y:scroll;
	scrollbar-width:thin;
	padding:0 0.875rem .4rem .4rem;
	text-align: left;
	font-size: .75rem;
	border:1px solid #000;
	line-height:150%;
}
.changelog p:first-child{margin-top:.2rem}
.bar {
	font-size:0.875rem;
	font-family: 'Consolas', Monospace;
	background: rgba(0, 0, 0, .8);
	text-align:center;
	padding:.4rem 0;
}
.body .bar{
	border-radius: .4rem .4rem 0 0;
}
.noteblock {
	width:14.58rem;
	height:15.125rem;
	box-sizing: border-box;
}
#todo {height:unset}
.window{
	font-family: 'Consolas', Monospace;
	font-size:0.75rem;
	background: var(--bg-scan), #333;
	color:#fff;
	width:100%;
	height:13.4rem;
	display:flex;
	flex-direction:column;
	text-align:center;
	border:var(--double-border);
	border-top:none;
	box-sizing: border-box;
}
.window a {
	border-bottom:var(--double-border);
  overflow:hidden;
  flex-basis:0 1 50%;
  }
.window img {
	opacity:80%;
	width:100%;
  }
.linkbox {
	font-family: 'Consolas', Monospace;
	width:13rem;
	box-sizing: border-box;
	text-align:center;
}
#linkDisplay {
	background-image: var(--bg-scan);
	border:var(--double-border);
	border-top:none;
  text-align: center;
  margin: auto;
  padding:.4rem 0;
	height: 15rem;
	box-sizing: border-box;
  }
#linkDisplay .screenlink {margin:.4rem 0}
#linkDisplay img {margin:.12rem .2rem}
.bborder {
	border:4px double #222;
	box-sizing: border-box;
}
.note {
	font-size:0.875rem;
	background-image: url('grid.png');
	border:solid 1px #000;
	border-radius:0 0 .4rem .4rem;
	padding:.4rem;
	box-sizing:border-box;
	height: 15rem;
}
.lpad {
	margin:0;
	margin-left:.4rem;
	text-align:left;
}
ul{
  text-align:left;
  margin:auto;
  padding: 0 0 0 15%;
}
.list {
	height:9.4rem;
	margin-top:0.4rem;
	margin-bottom:0;
	overflow-y:scroll;
	scrollbar-width: thin;
}
.marqueeholder{
  display: block;
  position: relative;
  width: 91%;
  margin: -1.13rem 1rem;
  }
marquee {
	padding:.4rem 0 .2rem 0;
	background-image: var(--bg-scan);
	border: var(--double-border);
	behavior:alternate;
}
.side {
	font-family: 'Consolas', Monospace;
	position:relative;
	grid-area: side;
	font-size:0.875rem;
	box-sizing:border-box;
}
.sidelog {
	position:relative;
  width:15rem;
	margin:auto;
	left:-3.8rem;
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	background-image: var(--bg-scan);
	border: var(--double-border);
	margin: 1rem 1rem 1rem 0; 
	padding-bottom:.4rem;
	z-index:1;
}
.sidelogbox {
	width:100%;
	box-sizing: border-box;
}
.sidelogbox:first-child .bar {
	margin:0;}
.imgbox {
	display:flex;
	justify-content:center;
	align-items: center;
	margin:auto;
	text-align:center;
	height:9rem;
	width:100%;
	box-sizing: border-box;
	overflow:hidden; 
	opacity: 80%;
}
.menumush {
  opacity:1;
	position:absolute;
	margin-left:-47px;
	margin-top:74px;
	transition: .5s ease-out;
}
.menumushb {
  visibility: hidden;
	position:absolute;
}
#todocorner {position:absolute; left:10px; bottom:5px;}
footer {margin: 0 auto 1rem;}
@media screen and (max-width: 93rem) {
.menumush {
  opacity:0;
	transition: .1s;}
}
@media screen and (max-width: 77.125rem) {
main {
	grid-template-columns: 12.2rem 1fr 12.2rem;
	grid-template-areas:
		"sidenav body side" ;
  }
#myLinks {height:9rem;box-sizing: border-box;}
article {
  border-right: var(--main-border);
}
}
@media screen and (max-width: 74rem) {
main {
	grid-template-areas:
		"sidenav body"
		"sidenav side";
	grid-template-columns: minmax(11rem,12.2rem) 1fr;
	transition: .5s ease-out;
	}
article {
	border-right: none;
	padding-right:1rem;
}
.headernav {
  max-width:100%;
  border-left:none;
  border-right:none;}
.sidelog {
	width:100%;}
.sidelogbox {
	width:50%;
}
.sidelogbox:nth-of-type(2),.sidelogbox:nth-of-type(4) {
	border-left:var(--double-border);
}
.nocollapse {
	width:100%
}
.sidelog { 
	position:static;
	margin:auto;
	}
.marqueeholder{
   display: block;
   position: static;
   width: 95%;
   margin: 1rem auto;
  }
#linkBack{padding:2rem 1rem;}
}
@media screen and (max-width: 60rem) {
.shoutbox {
	background:#000000;
	width:100%;
}
.changelogbox {
	max-width:100%;
}
.linkbox,.noteblock{
	flex-basis:47.6%;}
.flexcontainer{gap:.8rem;margin-bottom:0}
#linkDisplay{
  height:15rem;
  overflow-y:scroll;
	scrollbar-width: thin;}
#animal{order: 2;}
.shoutbox{order: 1;}
#art{order: 3;}
.changelogbox{order: 4;}
.linkbox{order: 5;}
#todo{order: 6;}
}
@media screen and (max-width: 42.5rem) {
main {
	grid-template-areas:
		"body"
		"side";
	grid-template-columns: minmax(0,2.5fr);}
.side {
	border-left:none;
}h {
  visibility: hidden;}
  .list {
  height: 8.4rem;}
#todocorner {left:-5px;}
}