*{ box-sizing: border-box; }

body{ font-family: "PixelOperator"; 
	text-align: justify;
	color: rgb(247,243,239);
	width: 55vw;
	margin: auto;
	margin-top: 1em;
	margin-bottom: 1em; 
	background: url("images/bg/autumn_leaves_autumn_leaves_1-dithered.jpg") repeat;
	background-size: cover;
}
body p{ margin: 0; 
  margin-top: 2px;
}
footer{ font-size: 0.8em; }
h6{ font-size: 1.5em; 
  font-family: 'PixelOperatorSC';
  font-weight: normal;
  margin: 0;
  margin-bottom: 5px;
  display: inline-block;
}
a{ color: inherit; }
a:hover{ font-weight: bold; }
#wrapper{ background-color: rgba(11,13,6,.83); 
	border-radius: 10px;
	padding: 1em;
}

section{ display: flex;
	flex-direction: row;
	width: 100%;
	gap: 0.5em;
	margin-bottom: 15px;
}

nav{ width: calc(60% - 10px); }

ul{ list-style-type: none;
	padding-left: 0; 
	margin: 0;
}
nav > h6, nav ul li{ padding: 5px;
	border-bottom: solid 1px;
	margin: 0;
	width: 100%;
	padding-left: 10px; 
}

section > div, nav{ border: solid 1px rgba(247,243,239,1); 
  border-radius: 4px;
}
#main{ border: none; 
	filter: none;
}

section > div{ padding: 10px; }

#two > div{ width: 30%; }

#three > div{ width: 50%; 
	text-align: center;
}

#updates{ text-align: left;
	max-height: 25vh;
	overflow: hide;
}
#updateText{ max-height: calc(100% - 2em);
	overflow: scroll;
}
#updateText > p{ border-top: 1px solid; 
	padding-top: 5px;
	margin-bottom: 5px;
}
#updates .dates{ font-weight: bold;
	font-family: 'PixelOperatorSC';
}

.waveLet{ display: inline-block;
	animation-delay: var(--n);
	animation: wave 1.3s linear var(--n) infinite forwards;
}

@keyframes wave{ 
	0%{ transform: translateY(0) }
	25%{ transform: translateY(-1.3px) }
	50%{ transform: translateY(0) }
	75%{ transform: translateY(1.3px) }
	100%{ transform: translateY(0) }
}

/* RESPONSIVE */
@media only screen and (max-width: 800px) {
	body{ width: 100vw;
		padding: 0 1em 0 1em;
	}
}