body {
	background-color: #E0B0FF;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

div#tildes {
	position:absolute;
	top: 0px;
	left: 0px;
	word-break:break-all;
	background-color:black;
	color: #E0B0FF;
	z-index: -1;
	font-size:120%;
	letter-spacing:.75em;
}

#table-container {
  overflow:auto;
}

table {
  overflow-x: scroll;
}

section {
	font-family: monospace;
	background-color: black;
	color:#E0B0FF;
}

section#summary p {
	font-size:150%;
}

section#summary ul {
	font-size:150%;
}

section#header {
	margin-top:5%;
	text-align:center;
	font-size:150%;
	margin-right:2%;
	margin-left:1%;
}

section#summary {
	padding-left:10%;
	padding-right:10%;
	margin-right:2%;
	margin-left:1%;
}

#weird-boxes section {
	padding: 0 2ch;
	margin-top: 2em;
	border: 1px solid #e0b0ff30; /* if there isn't a border the layout goes nuts.
	if you don't want a visible border just make it black */
}

section#join {
	margin-left: max((100% - 60ch) * .2, 0ch);
	max-width: 40ch;
}

section#users {
	margin-left: auto;
	margin-right: max((100% - 38ch) * .25, 0ch);
	max-width: 30ch;
}

section#blog {
	margin-left: auto;
	margin-right: auto;
	max-width: 38ch;
}

section#donate {
	margin-left: max((100% - 38ch) * .25, 0ch);
	max-width: 30ch;
}

section#lostkey {
	margin-left: auto;
	margin-right: max((100% - 60ch) * .2, 0ch);
	max-width: 60ch; /* would look better if it was thinner, but the dialog
	would need to be slightly rephrased */
}

#lostkey ul {
	padding-left: 2ch;
}

section#footer {
	margin: auto;
	margin-top: 4em;
	text-align: center;
	max-width: 50ch;
}

section#pi {
  text-align:right;
	margin: auto;
	margin-top: 40em;
	text-align: center;
	max-width: 4ch;
	margin-right: max((100% - 10ch) * .2, 0ch);
}

a {
	text-decoration: none;
	font-weight:bold;
	color:blueviolet;
}

a:hover {
    animation: rainbow 1s infinite;
}

@keyframes rainbow {
    20%{color: red;}
    40%{color: orange;}
    60%{color: yellow;}
    80%{color: green;}
    100%{color: blue;}
}