@font-face{
	font-family: utdr-font;
	src: url(fonts/utdr.woff2);
}
:root{
	--width: 80%;
	--main-border-colour: #84c6e2;
	--main-border: 5px groove var(--main-border-colour);
}
table, th, td {
  border: 1px solid black;
}

.textbox{ /* undertale textbox, probably only used for landing page */
	border: 8px solid white;
	margin: auto;
	background-color: black;
	color: white;
	text-align: center;
	font-family: utdr-font;
	width: 75%;
}

body{ /* background elements */
	background-color: #719c92;
	background: url(images/pattern_bg.gif), linear-gradient(0deg,rgba(136, 176, 150, 1) 0%, rgba(166, 219, 131, 1) 100%);
	background-size: 104px, cover;
	background-attachment: scroll, local;
	min-height: 100vh;
}

header{ 
	background: linear-gradient(180deg,rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0) 42%, rgba(163, 255, 244, 0.67) 100%), url(images/bg_tiles.png);
	min-height: 200px;
	width: var(--width);
	text-align: left;
	margin: auto;
	margin-bottom: 5px;
	border-style: outset;
	border-color: var(--main-border-colour);
}

#timestamp{
	margin: 5px;
	float: right;
	font-style: italic;
	color: aliceblue;
}

main{
	background: #ffffff;
	background: url(images/tiles_128x128.bmp);
	background-repeat: repeat;
	background-size: 10%;
	border: var(--main-border);
	width: 55%;
}

aside{
	background: rgb(186, 255, 202);
	border: var(--main-border);
	width: 20%;
	padding: 2px;
}

#flex{ /* flexbox my beloved */
	width: var(--width);
	height: 67vh;
	margin: auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

#bodyframe{
	width: 100%;
	height: 100%;
}



/* i know over-commenting is bad but i'm new here and it's a good reference without having to open 50 w3schools tabs ok */