@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');

* {
	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 {
	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;
}

/*left row*/
.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;

}

.linksbar {
	 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;
}

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

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

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

.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 */
.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%;
}

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;
}

.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;
}

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

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

.divider {
	text-align: center;
}

	@media screen and (max-width: 500px) {
		.flexnav, .flexrow {
			flex-direction: column;
		}
		.content {
			max-width:100%;
			padding: 0px;
		}
		h1 {
			font-size: 60px;
		}
		.headerdecor {
			left: 350px;
		}
			
	}	
@media screen and (min-width: 1000px) {
		body {
	        position:absolute;
        left: 50%;
        transform: translateX(-50%);
}
	}