* {
  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: .85rem;
  display: flex;
  justify-content: center; 
  align-items: center;     
  height: 100vh;           
  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;
        margin-top: 2rem;
	}
	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;
}
.house {
  width: 70vw;
  max-height: 90vh;
  margin: 0;
  padding: 0;
  background-color: #a1876e;
  border: 20px solid black;
  border-image: url('/ui/layoutpieces4.png') 100 / 30px / 9px repeat;
}

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;
  height: 650px;
  gap: 1.5rem;
  padding: 1rem;
}
.leftbar {
  width: 500px;
  background-color: #FFF7E7;
  border: 20px solid black;
  border-image: url('/ui/layoutpieces2.png') 100 / 30px / 9px repeat;
  padding: 0.5rem;
}
.signboard {
  flex: 1;
  background-color: #a1876e;
  border: 20px solid black;
  border-image: url('/ui/layoutpieces1.png') 100 / 30px / 9px repeat;
  padding: 0.5rem;
  overflow: scroll;
  padding-right: 1.25rem;
}

.content {
  flex: 1;
  background-color: #FFF7E7;
  border: 20px solid black;
  border-image: url('/ui/layoutpieces3.png') 100 / 30px / 9px repeat;
  padding: 0.5rem;
  padding-right: 20px;
  overflow: scroll;
}
.housecontent {
  flex: 1;
  padding: 0.5rem;
  padding-right: 20px;
  overflow: scroll;
}
.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;
	}
  .buttonally {
		width: 200px; 
		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;}
/* Shop */
    button {
    border: none;
    background: none;
    padding: 0;
    }
    .item {
    width: 100px;
    height: auto;
    margin-left:auto;
    margin-right:auto;
    }
    .itemlist {
    overflow: scroll; 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(auto, 1fr);
    }
    .itemlist2 {
    overflow: scroll; 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-rows: repeat(auto, 1fr);
    }
  
/* List */
 ol {
  padding-bottom: 0.5rem;
 }
 li {
  padding-bottom: 0.5rem;
  font-size: 1.75vh;
  font-weight: bold;
 }
 ul {
  padding-top: 0.5rem;
  color: #190e41;
 }
/* Summary Details */
    details {
      padding-top: 0.5rem;
      color: #190e41;
    }
    summary {
      padding-bottom: 0.5rem;
      color: black;
      font-size: 2vh;
    }
@media (max-width: 700px) {
    body {
        overflow: scroll;
        font-size: .75rem;
    }
    .boxbox {
        display: inline-block;
    }
  .main {
    flex-direction: column;
  }
  .content {
    min-height: 300px;
    min-width: 250px;
  }
  .leftbar {
    width: 100%;
  }
  .box {
    display: inline;
  }
  .homebutton,.frontdecal, aside {
        display: none;
        }
.button {
		width: 4rem; 
		height: auto;
		margin: 0;
	}
}