body {
  background-image: url('/ui/fullbgtest.png');
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: cover; 
  background-attachment: fixed;
  overflow: hidden;
  color: black;
  font-family: "Comic Neue", "LXGW WenKai Mono TC", Verdana;
  display: flex;
  justify-content: center; 
  align-items: center; 
  min-height: 90vh;
  text-align: justify;
  font-size: 13px;
}

ol {
  margin: 0;
}

li {
  margin-bottom: 10px;
}

button {
  border: 0;
  background: none;
  }

.homebutton {
  position: fixed;
  bottom: 0; 
  right: 0;  
  z-index: 999;
  }

.frontdecal {
  position: fixed;
  pointer-events: none; /* Lets you click through image and interact regardless of z-index. */
  width: 100%;
  height: 100%;
  bottom: 0; 
  left: 0;  
  z-index: 900;
  }

.allyimg {
	width: 200px;
	height: auto;
}

/* tablet/phone */
@media(max-width:800px){
  body {
    grid-template-columns: 1fr;
    }
  .frontdecal {
    display: none;
    }
}

/* Grid Body */
.container {
  width: 900px;
  display: grid;
  grid-template-columns: 1fr;
  grid-templare-rows: 1fr;
  grid-template-areas: 
    "head"
    "main"
    "footer"
  ;
  }

/* Main Content Sections */
main {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background-color: #FFF7E7;
  padding-right: 20px;
  height: 500px;
  overflow: auto;
  }

footer {
  grid-area: footer;
  }

/* Grid Div Styling */
.bamboo {
  border: 30px solid black;
  border-image: url('/ui/layoutpieces2.png') 100 / 40px / 5px repeat;
  z-index: 98;
  }

.foot {
  grid-column: span 4;
  background: #ffe5b8;
  text-align: center;
  justify-content: center;
  }

.full {
  grid-column: span 4;
  }

.half {
  grid-column: span 2;
  padding-left: 5px;
  padding-right: 5px;
  }
.fourth {
  grid-column: span 1;
  padding-left: 5px;
  padding-right: 5px;
  }
.third {
  grid-column: span 3;
  padding-left: 5px;
  padding-right: 5px;
  }

/* Headers */
h1 {
  font-family: "Protest Revolution", sans-serif;
  font-size: 50px;
  }
h2 {
  font-family: "Protest Revolution", sans-serif;
  color: gray;
  }
h3 {
  font-family: "Protest Revolution", sans-serif;
  }

/* Details aka Q&A */
details {
  font-size: 14px;
  padding-bottom: 20px;
}

summary {
  font-size: 20px;
  color: gray;
  background-color: #fae8c8;
  font-family: "Protest Revolution", sans-serif;
}

/* Draggable Divs */
.dragarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transform-origin: top left; 
  }

.draggable {
	border-radius: 10px;
	position: relative;
	z-index: 100;
	box-shadow: 0 0 10px black;
	background-color: #FFF7E7;
	border: 5px solid #ffe5b8;
  }

.draggable.about {
	top: 15em;
	left: 35em;
	position: absolute;
	box-sizing: border-box;
	overflow:scroll;
  }

.draggable.locals {
	top: 15em;
	left: 35em;
	position: absolute;
	box-sizing: border-box;
	overflow:scroll;
  }

.draggable.allies {
	top: 15em;
	left: 35em;
	position: absolute;
	box-sizing: border-box;
	overflow:scroll;
  }

.mainbody {
    height:500px;
    width:500px;
    border-width:1px 0;
    overflow:auto; 
    text-align: justify;
    padding-right: 20px;
	  padding-left: 10px;
    padding-top: 10px;
}
.maingridbody {
	height: 500px;
	width: 700px;
	overflow:auto; 
  text-align: justify;
	padding-right: 20px;
	padding-left: 10px;
	padding-top: 5px;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.header {
  height: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: -5px;
	padding-left: 5px;
	padding-right: 5px;
	justify-content: center;
	background-color: #ffe5b8;
}