.ocs-page {
	text-align: center;
}

/* oc landing page stuff! */

.charselect {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;
}

.char-img { /* this might need to get specified to sth later depending on how it works with other images */
	padding: 5px;
	width: 33%;
	img {
		width: 100%;
	}
}

#alpha-recap {
	position: relative;
	img {
	width: 100%
	}
}

.recap-text {
		p {
		left: 45%;
		position: absolute;
		top: 8px;
		font-family: Comic Sans MS, 'Nunito', sans-serif;
		color: white;
		-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: black;
		font-size: 20px;
		font-weight: bold;
		line-height: 21px;
	}
}

/* for oc profiles! */

#profile-navigation {
	display: flex;
	justify-content: center;
}

#profile-navigation li a {
	color: white;
}

.profile-navbar {
    justify-content: space-evenly;
	display: flex;
	padding-left: 0;
	flex-wrap: wrap;
}

.profile-navbar li {
	margin-right: 15px;
	background-color: var(--kibpink);
}

.profile-navbar li:last-child {
	margin-right: 0;
}

.profile-category {
	float: left;
	display: block;
	padding: 5px 10px;
	border-radius: 30px;
}

.page{
   display: none;
} 

.page:target {
  display: initial;
}

.page:target ~ .initial  {
  display: none;
}

table.attributes {
  border-spacing: 5px;
  width: 50%; 
}

table.attributes th, table.attributes td {
  text-align: center;
  vertical-align: middle;
  padding: 6px 8px;
  border-radius: 20px;
}

th {
	background-color: var(--kibpink);
	color: white;
	border: 2px solid var(--kibborderpink);
}

td {
	background-color: #f1f1f1;
	border: 2px solid #bfb2b2;
}

table.stats {
	margin: auto;
	margin-top: 15px;
	width: 80%;
}

table.stats th, table.stats td {
	border-radius: 10px;
	text-align: center;
	vertical-align: middle;
	padding: 5px 0px;
	max-width: 50px;
}

ul.profile-list {
	text-align: left;
	padding-left: 17px;
	margin: 0;
}

ul.trivia-list {
	padding-left: 0;
	margin: 16px;
	margin-top: 0;
}

#profile-container {
	display: flex;
	justify-content: space-evenly;
}

#profile-container .attributes, .stats {
	align-self: center;
}

img.profile-img {
	width: 45%;
	align-self: center;
}

.profile-desc {
	padding-top: 20px;
	padding-bottom: 5px;
}

.personality-div {
	padding: 10px 0;
}

.personality-img-left, .personality-img-right {
	width: 25%;
	margin-bottom: 10px;
	border-radius: 10px;
	border: 3px solid var(--kibdarkpink);
}

.circle-img {
	border-radius: 50%;
	shape-outside: circle(); /* I may get rid of this depending on how hard it is to read. but we'll see! */
}

.personality-img-left {
	float: left;
	margin-right: 20px;
}

.personality-img-right {
	float: right;
	margin-left: 20px;
}

.personality-para-left {
	clear: right;
	margin: 0;
	margin-bottom: 10px;
}

.personality-para-right {
	clear: left;
	margin: 0;
	margin-bottom: 10px;
}

.relationships-img {
	float: left;
	width: 20%;
	margin-bottom: 10px;
	margin-right: 20px;
	border-radius: 10px;
	border: 3px solid var(--kibdarkpink);
}

.relationships-h1 {
	margin-bottom: 0;
	text-decoration: underline;
}

.relationships-h2 {
	margin: 0;
	margin-bottom: 5px;
	color: black;
	font-weight: normal;
	font-size: 20px;
}

.clear-div {
	clear: both;
}

            @media only screen and (max-width: 1000px) {
				.recap-text {
					p {
						position: initial;
						font-style: italic;
						text-align: center;
						font-family: 'Nunito', sans-serif;
						-webkit-text-stroke-width: 0;
						color: black;
					}
				}
				
				#profile-container {
					flex-direction: column;
				}
				
				.profile-category {
					min-width: 30%;
					text-align: center;
				}
				
				.profile-navbar li {
					margin-right: 0;
					border: 1px solid white;
				}
				
				table.attributes {
					order: 2;
					width: 75%;
					background-color: #dbd9d9;
					border-radius: 30px;
					padding: 5px;
					margin: 10px;
				}
				
				.stats {
					order: 3;
					background-color: #dbd9d9;
					border-radius: 20px;
					padding: 7px 10px;
					margin: 0px;
				}
				
				table.stats {
					width: 90%;
				}
				
				table.stats th, table.stats td {
					max-width: none;
				}
				
				.profile-img {
					order: 1;
					margin: auto;
				}
				img.profile-img {
					width: 60%;
				}
				
				.personality-img-left, .personality-img-right {
					float: none;
					margin: auto;
					margin-bottom: 20px;
					width: 50%;
					display: block;
				}
				
				.relationships-img {
					float: none;
					margin: auto;
					margin-bottom: 20px;
					width: 50%;
					display: block;
				}
				
			}