rakkapy/static/theme.css

body
{
	/*part3*/
	background-color: #9999ff;
	
	margin: 0px;
	padding: 0px;
	
	/*Move navbar to the bottom and use flex to reorder it to the top, so it isn't as intrusive without CSS.
	Thanks to @heftig:archlinux.org (matrix) for showing me this.*/
	display: flex;
	flex-direction: column;
}

nav
{
	/*Positioning and no-scroll tricks*/
	position: sticky;
	top: 0px;
	
	/*Stupid fix for a stupid bug*/
	left: 0px;
	
	width: 100%;
	border: 1px solid;
	display: inline-block;
	
	background-color: #9999ff;
	order: 1; /*flex thing*/
}

main
{
	/*Another stupid fix for another stupid bug.
	If you use position:fixed, it just vanishes from its original spot
	and there's no standard syntax for telling it to not do this;
	to leave a blank space where it was instead.*/
	/*Yay, fixed by position:sticky*/
	/*margin-top: 40px;*/
	/*Hmm: https://www.w3schools.com/cssref/func_attr.asp*/
	
	/* Made in 2 minutes (including login+open) to demonstrate efficiency
	   vs advanced libraries. Make of that what you will. */
	background-color: #cccccc;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid;
	text-align: center;
	order: 2; /*flex thing*/
}

main *
{
	text-align: center;
}

ul.nav
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

li.navpiece
{
	/* Another stupid fix for YET ANOTHER stupid bug. This is how you vertically align text in an element.*/
	max-width:100px;
	display:table;
	float:left;
	position:relative;
}

a.navpiece/*, div.navpiece Apparently this wasn't doing anything either.*/
{
	text-decoration-line:none;
	display: table-cell;
	text-align: center;
	vertical-align:middle;
	font-size: 16px; /* This wasn't actually doing anything, apparently.*/
	padding: 10px;
	
	/*part1*/
	color: #0000ff;
	background-color: #cccccc;
}

/*a,a:hover
{
	style: none;
	color: inherit;
	text-decoration: none;
}
I might need this again later, but for now, it's okay...*/

a.navpiece:hover
{
	/*part2*/
	background-color: #0000ff;
	color: #cccccc;
}

li.navpiece>div
{
	display:none;
	position:absolute;
	top:100%;
	left:0%;
	width:100%;
	text-align:center;
}

li.navpiece:hover>div
{
	display:inline;
}

li.right
{
	float:right;
}

h1
{
	text-align:center;
}

.foot
{
	background-color: #cccccc;
	float: right;
	margin-left: auto;
	margin-right: 0; /* Need to set this for flex thing*/
	border: 2px solid;
	text-align: center;
	order: 3; /*flex thing*/
}

.tick
{
	color: #dddddd;
}