* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-image: url('/ui/fullbgtest.png');
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: cover; 
  background-attachment: fixed;
  color: black;
  font-family: "Comic Neue", "LXGW WenKai Mono TC", Verdana;
  text-align: justify;
  font-size: 1rem;
  height: 100%;
  display: flex;
  justify-content: center; 
  align-items: center; 
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
/* Headers */
	h1 {
		font-family: "Protest Revolution", sans-serif;
		padding: 0;
        margin: 0;
        color: #32522b;
        text-align: center;
	}
	h2 {
		font-family: "Protest Revolution", sans-serif;
		color: #4f6e48;
        padding: 0;
        margin: 0;
	}
	h3 {
		font-family: "Protest Revolution", sans-serif;
        text-align: center; 
        font-size: 1.5rem;
        color: #32522b;
        padding: 0;
        margin: 0;
	}
/* unvisited link */
	a:link {
	color: rgb(42, 90, 50);
	}
	/* visited link */
	a:visited {
	color: rgb(2, 143, 2);
	}
	/* mouse over link */
	a:hover {
	color: rgb(114, 221, 114);
	}
	/* selected link */
	a:active {
	color: blue;
	}
    
.container {
  width: 70vw;
  max-height: 90vh;
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: center;
}

nav {
  background-color: #FFF7E7;
  border: 20px solid black;
  border-image: url('/ui/layoutpieces2.png') 100 / 30px / 9px repeat;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  gap: 1rem;
}

.main {
  display: flex;
  gap: 1.5rem;
  padding: 1rem;
}

.leftbar {
  width: 250px;
  background-color: #FFF7E7;
  border: 20px solid black;
  border-image: url('/ui/layoutpieces2.png') 100 / 30px / 9px repeat;
  padding: 0.5rem;
}
.content {
  flex: 1;
  background-color: #FFF7E7;
  border: 20px solid black;
  border-image: url('/ui/layoutpieces3.png') 100 / 30px / 9px repeat;
  padding: 0.5rem;
}
.boxbox {
    display: flex;
    gap: 1rem;
}
.box {
    flex:1;
}
footer {
  background-color: #ffffff70;
  padding: 0.5rem;
  text-align: center
}
.homebutton {
        position: fixed;
        bottom: 0; 
        right: 0;  
        z-index: 999;
        }
  button {
    margin: 0;
    padding: 0;
  }
  .button {
		width: 5rem; 
		height: auto;
		margin: 0;
	}
    .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;}
@media (max-width: 700px) {
    body {
        overflow: scroll;
        font-size: .75rem;
    }
    .boxbox {
        display: inline-block;
    }
  .main {
    flex-direction: column;
  }
  .leftbar {
    width: 100%;
  }
  .box {
    display: inline;
  }
  nav {
    flex-direction: column;
    align-items: center;    
  }
  .homebutton,.frontdecal {
        display: none;
        }
.button {
		width: 3rem; 
		height: auto;
		margin: 0;
	}
}