* {
  box-sizing: border-box;
}

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

.container {
  display: grid;
  width: 90vw;
  height: 90vh;
  place-content: center;
  column-gap: 3vw;
  row-gap: 3vh;
  grid-template-areas:
  "nav nav nav"
  "aside main main"
  "foot foot foot";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

main, aside, section, footer {
    margin: 0;
    padding-right: 1rem;
}

nav {
    grid-area: nav;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: .25rem;
    background-color: #FFF7E7;
    border: 20px solid black;
    border-image: url('/ui/layoutpieces2.png') 100 / 30px / 9px repeat;
    overflow: scroll;
    background-color: #FFF7E7;
}
main {
    grid-area: main;
    background-color: #FFF7E7;
    border: 10px solid black;
    border-image: url('/ui/layoutpieces3.png') 100 / 40px / 25px repeat;
    overflow: scroll;
}
aside {
    grid-area: aside;
    background-color: #FFF7E7;
    border: 10px solid black;
    border-image: url('/ui/layoutpieces3.png') 100 / 40px / 25px repeat;
    overflow: scroll;
}
section {
    grid-area: sect;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}
footer {
    grid-area: foot;
    background-color: #ffffff70;
    padding: 0.5rem;
    text-align: center
}
/* Images */
img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, a:link, a:visited, a:hover,a:active {
    text-shadow: none;
}
/* Headers */
	h1 {
        font-size: 3rem;
		font-family: "Protest Revolution", sans-serif;
		padding: 0;
        margin: 0;
        color: #32522b;
        text-align: center;
	}
	h2 {
        font-size: 1.5rem;
		font-family: "Protest Revolution", sans-serif;
        text-align: center;
		color: #6c8b65;
        padding: 0;
        margin: 0;
	}
	h3 {
		font-family: "Protest Revolution", sans-serif;
        text-align: center; 
        font-size: 1.25rem;
        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;
	}
/* Div Dividing */
    .nest {
        display: flex;
        gap: 1rem;
    }
    .egg {
        flex: 1; 
        padding: .5rem;
    }
.button {
		width: 5rem; 
		height: auto;
		margin: 0;
	}
/* Catalogue Grid */
    .item {
    width: 100px;
    height: auto;
    margin-left:auto;
    margin-right:auto;
    }
    .itemlist2 {
    overflow: scroll; 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(auto, 1fr);
    }

/* Media Phone */
@media (max-width: 700px) {
    body {
        overflow: scroll;
        font-size: .75rem;
        display: flex;
    }
    .container {
        width: 100vw;
        height: 100vh;
        display: grid;
        row-gap: .5vh;
        column-gap: .5vw;
        padding: 10px;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas:
        "nav"
        "aside"
        "main"
        "foot";
    }
}