@import url('https://fonts.googleapis.com/css2?family=Amarante&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amarna:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Germania+One&display=swap');

/* Ahoy! Welcome to my stylesheet. I plan to comment everything, but understand that this entire thing is a bit of a mess. I probably could optimize this, but that sounds like work I'm not willing to do right now. */

/*general styling*/
* {
	box-sizing: border-box;
}

body {
	background-color: #282145;
	background-image: url('Images/starrybgpurple.png');
	color: white;
	font-family: Amarna;
}

.content {
	width: 1220px;
	padding: 8px 20px 0px 20px;
	margin: 15px 15px 0px 15px;
}

/*header*/
.header {
	display: flex;
	flex-direction: row;
	justify-content: left;
	height: 190px;
	background-image: url('Images/stars4.gif');
	color: white;
	align-items: center;
	text-align: left;
	padding: 10px 30px 10px 30px;
	border-radius: 10px;
}

.title {
	background: linear-gradient(to bottom, #F2CF89, #C3A34D);
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}

/*row flexboxing*/
.flexrow {
	display: flex;
}

.leftrow {
	flex: 25%;
	padding: 10px;
}

.midrow {
	flex: 50%;
	padding-top: 10px;
}

.rightrow {
	flex: 25%;
	padding: 10px;
}

.aboutrowleft {
	flex: 75%;
	padding: 10px;
}

.aboutrowright {
	flex: 25%;
	padding: 10px;
}

/*left row index*/
.picture {
	background: rgba(0, 0, 0, 0.8);
	height: fit-content;
	width: 275px;
	margin-bottom: 17px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
	overflow: hidden;

}
.sitebutton {
	background: rgba(0, 0, 0, 0.8);
	height: fit-content;
	width: 275px;
	margin-bottom: 17px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
	overflow: hidden;

}

.sitebuttontext {
	text-align: center;
}

.linksbar {
	background: rgba(0, 0, 0, 0.8);
	height: fit-content;
	margin-bottom: 17px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
}

.sitesbar {
	background: rgba(0, 0, 0, 0.8);
	height: 340px;
	margin-bottom: 17px;
	border: 2px solid #C3A34D;
	border-radius: 5px;

}

/*mid row index*/
.welcome {
	background: rgba(0, 0, 0, 0.8);
	height: fit-content;
	margin-bottom: 17px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
}

.status {
	background: rgba(0, 0, 0, 0.8);
	height: fit-content;
	margin-bottom: 17px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
}

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

.statuscafe {
	flex: 50%;
	margin: 15px;
}

#statuscafe {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

.midrowsplit {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.currently {
	flex: 50%;
	margin-right: 5px;
	margin-bottom: 17px;
	background: rgba(0, 0, 0, 0.8);
	height: 400px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
}

.todo {
	flex: 50%;
	margin-left: 5px;
	margin-bottom: 17px;
	background: rgba(0, 0, 0, 0.8);
	height: 400px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
}

.updates {
	background: rgba(0, 0, 0, 0.8);
	height: 480px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
	overflow-y: auto;
	overflow-x: hidden;
}

/* right row index*/
.navbox {
	background: rgba(0, 0, 0, 0.8);
	height: fit-content;
	margin-bottom: 17px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
}

.webrings {
	background: rgba(0, 0, 0, 0.8);
	height: 340px;
	margin-bottom: 17px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
	overflow-y: auto;
	overflow-x: hidden;
}

.misc {
	background: rgba(0, 0, 0, 0.8);
	height: 340px;
	margin-bottom: 17px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
	overflow-y: auto;
	overflow-x: hidden;
}

footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	background: rgba(0, 0, 0, 0.8);
	height: 100px;
	margin-top: 25px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	width: 100%;
}

/*OC styling*/
.ocs {
	background: rgba(0, 0, 0, 0.8);
	height: fit-content;
	margin-bottom: 17px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
}

.imagerow {
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 15px;
	padding-top: 5px;
	align-items: flex-end;
}
.imagerow > figure {
	text-wrap: wrap;
	max-width: 280px;
}
.imagerow > figure > img {
	max-width: 240px;
	height: auto;
	margin: 0px 15px;
}

.imagerow > figure > a > img {
	max-width: 240px;
	height: auto;
	margin: 0px 15px;
}

.ocs > h3 {
	font-size: 30px;
	margin: 10px 10px 5px 10px;
	font-family: Germania One;
}

/*about styling*/
.about {
	background: rgba(0, 0, 0, 0.8);
	height: fit-content;
	margin-bottom: 17px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
}

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

.bioinfo {
	flex: 75%;
}

.biopic {
	flex: 25%;
}

.bioinfo>p {
	font-size: 20px;

}

.biopic>img {
	width: 275px;
	height: auto;
	margin: 15px;
}

#favs>ul {
	font-size: 18px;
}

/*about tab styling*/
.tab {
	overflow: hidden;
	margin: 0px 5px;
}

.tab button {
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	background: linear-gradient(to bottom, #F2CF89, #C3A34D);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 2px solid #C3A34D;

}

.tab button.active {
	background: linear-gradient(to bottom, #f6ddaa, #d5bf82);
}

.tabcontent {
	display: none;
	background: rgba(0, 0, 0, 0.8);
	height: 840px;
	margin-bottom: 17px;
	border: 2px solid #C3A34D;
	border-radius: 5px;
	overflow-y: auto;
	overflow-x: hidden;
}

/*text styling*/
h1 {
	font-size: 96px;
	font-family: Amarante;
}

h2 {
	margin: 0px;
	padding: 5px;
	color: black;
	text-shadow: 1px 1px 1px #ffffff;
	font-family: Germania One;
}

h3 {
	margin: 10px;
}

h4 {
	margin: 10px;
	background: linear-gradient(180deg, rgba(149, 112, 179, 1) 0%, rgba(87, 63, 107, 1) 100%);
	text-shadow: 1px 1px 1px #000000;
	padding: 2px;
	border-top-left-radius: 1px;
	border-bottom-right-radius: 1px;
	border-bottom-left-radius: 7px;
	border-top-right-radius: 7px;
}

p {
	margin: 10px;
}

a {
	color: lemonchiffon;
	text-decoration-style: dashed;
}

li {
	list-style-image: url('Images/batpixel4.gif');
	margin: 15px 0px;
}

figure {
	margin: 0px;
}

/*nav buttons*/
.button {
	display: flex;
	flex-direction: column;
	background: linear-gradient(to bottom, #FFE4AA, #B89250);
	border: 2px solid #FFE4AA;
	padding: 5px 32px;
	margin: 8px 10px;
	text-align: center;
	width: 230px;
	border-radius: 30px;
	font-family: Germania One;
	font-size: 25px;
	color: black;
	text-decoration: none;

}

.button:hover {
	background: linear-gradient(to bottom, #FFF7E6, #C2A26B);
}


nav {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/*images*/
.headerdecor {
	position: absolute;
	left: 1150px;
	top: 140px;
	height: 65px;
	width: auto;
}

.sidepic {
	width: 275px;
	height: auto;
}

.divider {
	text-align: center;
}

/*Status.cafe stuff*/
.statusbox > img {
	max-width: 280px;
	height: 170px;
	width: auto;
	margin: 10px 20px;
	margin-left: auto;
	
}

/*slapdashed mobile support*/
@media screen and (max-width: 500px) {

	.flexnav,
	.flexrow, .statusbox	{
		flex-direction: column;
	}

	.content {
		max-width: 100%;
		padding: 5px;
		margin: 0px;
	}

	h1 {
		font-size: 60px;
	}

	.headerdecor {
		left: 350px;
	}

	.divider>img {
		max-width: 340px;
		height: auto;
	}

	.bio {
		flex-direction: column-reverse;
	}
	
	.imagerow {
		flex-direction: column;
	}
}

@media screen and (min-width: 1000px) {
	body {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}