/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background: url(contents/sparklespace.gif);
  font-family: monospace;
  color: white;
   
}


container {
	width: 400px; height: 1000px; border: 2px blueviolet; margin: 0 auto; 
}

h1   {
	float: center;
  font-family: monospace;
  color: white;
  
}

p    {
  float: center;
  font-family: monospace;
  color: white
  
}

li {
  float: left;
  display: inline;
  font-family: monospace;
}

a {
  background-color: #ffffff;
  font-family: monospace;
}

ul {
    font-family: monospace;
}

hr { 
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
} 

.navbar {
  background-color: black;
  float: left;
  border-style: solid;
  border-color: #FFFFFF;
  width: 150px;
  height: 150px;
  padding: 5px;
  margin: 200px 50px 100px;
}

.main {
  background-color: black;
  border-style: solid;
  border-color: #FFFFFF;
  width: 1450px;
  height: 800px;
  padding: 20px;
  margin-left: 300px;
  overflow: auto;
}

.infobox {
 background-color: #171717;
 border-style: solid;
 border-color: #FFFFFF;
 margin-left: -600px;
 width: 350px;
 height: 200px;
}

.innerbox {
  background-color: #080808;
  width: 300px;
  height: 130px;
  
}

.homeabout {
 margin-top: 30px;
 margin-left: 300px; 
 width: 900px;
 height: 100px;

  
}

.protagbox {
  background-color: black;
  width: 700px;
  height: 220px;
  
}

.antagbox {
  background-color: black;
  
  width: 700px;
  height: 200px;
  
}

.sidebox {
  background-color: black;
  width: 700px;
  height: 300px;
  
}


h1 {
 color: white;
 
}

h2 {
  color: white; 
}


.row {
  display: flex;
}

.column {
  flex: 20%;

} 


#img {
  float: left;
  margin-right: 10px;
}
  
#hyeon {
  display: block;
}

#conflict {
 display: block; 

}

#kimchi {
 display: block; 
}

#shub {
  display: block;
}

#further {
  display: block;
}

#vac {
  display: block;
}

#cl {
  display: block;
}

#vol {
  display: block;
}
















