/* basic page stuff */

body {
color: #FFFFFF;
background-color: #000000;
background: url('underwater.png') no-repeat center fixed;
background-size: cover;
font-family: 'Forum', cursive;
font-size: 20px;
}

a:link, a:visited {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
}

a:hover, a:focus {
color: #00161d;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
  flex-basis: 100%;
}

@media screen and (min-width: 800px) {
  .column {
    flex: 1;
  }
}

/* major section IDs and single-use text styles */

#wrap {
margin: 0px auto;
max-width: 800px;
}

#version {
color: #FFFFFF;
text-align: center;
font-family: 'Tangerine', cursive;
text-shadow: 1px 1px #00161d;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
letter-spacing: 5px;
font-size: 50px;
}

/* headings */

h1 {
text-align: center;
font-size: 70px;
font-family: 'Forum', cursive;
text-shadow: 2px 2px #00161d;
padding-bottom: 0px;
margin-bottom: 0px;
}

h2 {
font-size: 30px;
font-family: 'Modern Antiqua', cursive;
text-shadow: 2px 2px #00161d;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk8AEAAFIATgDK/mEAAAAASUVORK5CYII=);
border-radius: 15px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 40px;
margin-top: 10px;
margin-bottom: 10px;
letter-spacing: 10px;
}

h3 {
font-family: 'Forum', cursive;
font-size: 30px;
text-shadow: 2px 2px #00161d;
letter-spacing: 10px;
text-align: center;
}

h4 {
font-size: 22px;
font-family: 'El Messiri', sans-serif;
text-shadow: 2px 2px #00161d;
letter-spacing: 2px;
font-variant: small-caps;
}

/* text, paragraph, and link classes */

.bodytext {
line-height: 40px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
text-shadow: 1px 1px #00161d;
}

.bodytext a {
color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}

.prettytext {
	font-family: 'Tangerine', cursive;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 2px;
	padding: 5px;
}

.links {
text-align: center;
line-height: 40px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNMP36mHgAGEgJ7w+bAYwAAAABJRU5ErkJggg==);
border-radius: 10px;
padding: 5px;
margin-top: 30px;
margin-bottom: 30px;
}

.capitals {
font-family: 'Tangerine', cursive;
text-shadow: 2px 2px #00161d;
font-size: 50px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 0px;
margin-bottom: 0px;
letter-spacing: 5px;
padding-left: 50px;
}

a.buttons {
	color: #00161d;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
	padding-left: 5px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
	text-decoration: none;
	font-family: 'El Messiri', sans-serif;
	font-size: 22px;
}

a.buttons:hover, a.buttons:focus {
	color: #FFFFFF;
	background-color: #00161d;
	border-radius: 10px;
	text-decoration: none;
}

a.forcedlinks {
color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}

a.friendbuttons {
	color: #FFFFFF;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNMP36mHgAGEgJ7w+bAYwAAAABJRU5ErkJggg==);
	padding: 10px;
	border-radius: 10px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
	text-decoration: none;
	font-family: 'Tangerine', cursive;
	font-size: 35px;
	font-weight: bold;
	line-height: 70px;
}

a.friendbuttons:hover, a.friendbuttons:focus {
	color: #00161d;
	text-decoration: none;
}

a.linkbuttons {
	color: #FFFFFF;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNMP36mHgAGEgJ7w+bAYwAAAABJRU5ErkJggg==);
	padding: 10px;
	border-radius: 10px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
	text-decoration: none;
	font-family: 'Modern Antiqua', cursive;
	font-size: 18px;
	line-height: 50px;
}

a.linkbuttons:hover, a.linkbuttons:focus {
	color: #00161d;
	text-decoration: none;
}

a.possible {
	color: #00161d;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=); 
	border-radius: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
	padding-left: 5px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
	text-decoration: none;
	font-family: 'El Messiri', sans-serif;
	font-size: 22px;
}

a.possible:hover, a.possible:focus {
	color: #00161d;
	background-color: #FFFFFF;
	border-radius: 10px;
	text-decoration: none;
}