body {
    height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-image: url('greenmat.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;   
  background-attachment: fixed;
}

h1,h2,h3,p{
  color:#E2DC5C;
}

a{
 color:#bc95e7;
 text-decoration:none;
}

#container {
  background-color: #586221;
  width: 800px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

#header {
  background-color:#400A0A;
  text-align:center;
  padding:5 0 0 0;
}

#content{
  flex: 1;
  display: flex;
  padding: 10px;
}

#nav{
  width: 130px;
  border-right: 2px solid #E2DC5C;
  padding-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
}

#nav .selected{
  font-weight:900;
  color:#9e65dd
}

.has-submenu > a {
  display: inline-block;
}

#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#nav li {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 80px;
  background-color: #400A0A;
  padding: 0;
  margin: 0;
  list-style-type: none;
  border: 1px solid #bc95e7;
  min-width: 140px;
  z-index: 100;
}

.log-page #main img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
}

.has-submenu:hover .submenu {
  display: block;
}

.submenu a {
  display: block;
  padding: 5px;
  color: #bc95e7;
  text-decoration: none;
}

.submenu a:hover {
  background-color: #bc95e7;
  color: #400A0A;
}

#main{
  flex: 1;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 15px;
}

#footer{
  clear:both;
  background-color:#400A0A;
  width:800px;
  text-align:right;
  color:#495c2E;
}