* {
  box-sizing: border-box;
}
@font-face {
	font-family: pixelfont;
	src: url(pixelify-sans-v3-latin-regular.woff2);
}
header { 
  text-align: center;
  padding: 0px;
}

body {
  background-image: url("starsbackground.gif");
}

footer {
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  border: 10px #E5C54C;
  border-style: solid solid solid solid;
  margin-left: 200px;
  margin-right: 200px;
}

h1 {
    color: #E5C54C;
    text-shadow: 0 0 3px #FFF5D0;
    text-align: center;
    font-family: pixelfont;
}

h2 {
    color: #E5C54C;
    text-shadow: 0 0 3px #FFF5D0;
    text-align: center;
    font-family: pixelfont;
}

h5 {
	color: #E5C54C;
    text-align: center;
    font-family: pixelfont;
}

ul {
	font-family: pixelfont;
	font-size: 20px;
    color: #FFF5D0;
	list-style-type: square;
}

p {
  color: #FFF5D0;
  text-align: center;
  font-family: pixelfont;
  font-size: 20px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

/* edit me later plspls */
table, th, td { 
  background-color: black;
  color: aliceblue;
  padding: 5px;
  text-align: center;
  border-bottom: 2px solid aliceblue; 
  border-collapse: collapse;
}

a:link, a:visited {
  color: #FFF5D0;
  font-family: pixelfont;
  padding: 5px;
  text-align: center;
  display: inline-block;
}

a:hover, a:active {
  background: rgba(255, 245, 208, 0.5);
}

.container {
   display: flex;
   flex-wrap: nowrap;
   margin-left: 200px;
   margin-right: 200px;
}


.side {
  flex: 20%;
  background-color: black;
  border: 10px #E5C54C;
  border-style: solid hidden hidden solid;
  padding: 20px;
}

.letext {
  flex: 80%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px;
  width: 90%;
  border: 10px solid #E5C54C;
  border-style: solid solid hidden solid;
}

/* there will be specific shit for the picture formatting later */
.art {
  flex: 80%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 15px;
  width: 90%;
  border: 10px solid #E5C54C;
  border-style: solid solid hidden solid;
}

.landing {
  flex: 80%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 7px;
  margin: 0px 200px 0px 200px;
  width: 70%;
  border: 10px solid #E5C54C;
  border-style: solid;
}

/* stuff for home page */

.top {
    flex: 100%;
    background: rgba(0, 0, 0, 0.7);
	margin: 0px 200px 0px 200px;
    height: 80px;
    border: 10px solid #E5C54C;
    border-style: solid solid hidden solid;
}

.leftside {
     flex: 40%;
     background: rgba(0, 0, 0, 0.7);
     padding: 5px;
	 overflow-x: hidden;
     border: 10px solid #E5C54C;
     border-style: solid hidden hidden solid;
}

.rightside {
     flex: 40%;
     background: rgba(0, 0, 0, 0.7);
     padding: 5px;
	 overflow-x: hidden;
     border: 10px solid #E5C54C;
     border-style: solid solid hidden hidden;
}

.subcontain {
     background: rgba(255, 245, 208, 0.3);
     margin: 5px 5px;
     padding: 5px;
	 width: 90%;
     height: 280px;
     overflow: scroll;
	 overflow-x: hidden;
	 margin: 10px 0px 10px 30px;
     border: 6px double rgba(229, 197, 76, 0.5);
}

.subcontain2 {
     background: rgba(255, 245, 208, 0.3);
     margin: 5px 5px;
     padding: 5px;
     width: 90%;
     height: 350px;
	 overflow: scroll;
	 overflow-x: hidden;
	 margin: 10px 0px 10px 30px;
     border: 6px double #E5C54C;
}
/*for images, and borderless containers*/
.subcontain3 {
	padding: 0px;
}

.blinkies {
	padding: 0px;
	height: 300px;
}

#statuscafe {
    padding: .5em;
    background-color: rgba(255, 245, 208, 0.4);
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}