* {
  box-sizing: border-box;
}

body {
  color: black;
  font-family: "Comic Neue", "LXGW WenKai Mono TC", Verdana;
  text-align: justify;
  font-size: 1rem;
  margin: 0;
  padding: 0;
  width: 100vw;
  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;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

img {
  max-width: 100%;
  height: auto;
}
/* Headers */
	h1 {
		font-family: "Protest Revolution", sans-serif;
		padding: 0;
        margin: 0;
        color: #291d97;
        text-align: center;
        font-size: 2rem;
	}
	h2 {
		font-family: "Protest Revolution", sans-serif;
		color: #291d97;
        padding: 0;
        margin: 0;
	}
	h3 {
		font-family: "Protest Revolution", sans-serif;
        text-align: center; 
        font-size: 1.5rem;
        color: #291d97;
        padding: 0;
        margin: .5rem;
	}
/* unvisited link */
	a:link {
	color: #291d97;
	}
	/* visited link */
	a:visited {
	color: #291d97;
	}
	/* mouse over link */
	a:hover {
	color: #3463ff;
	}
	/* selected link */
	a:active {
	color: #291d97;
	}

.page {
    width: 99vw;
    height: 99vh;
    margin: 0;
    display: grid;
    overflow: hidden;
    box-sizing: border-box;
    grid-template-columns: 200px 1fr auto;
    column-gap: 1rem;
    grid-template-rows: 35px 1fr auto auto 150px;
    row-gap: .25rem;
    grid-template-areas: 
    "side top top top"
    "side main main main "
    "side main main main"
    "side main main main"
    "moon foot credit menu"
    ;
}
.top {
    grid-area: top;
    margin: 0;
    padding: 0;
}
.main {
    grid-area: main;
    padding: 1rem;
    overflow: hidden;
    view-transition-name: page-content;
}
.left {
    grid-area: side;
}
.leftbox {
    display: inline-block;
    border: 2px solid #3E8CEC;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.445);
    margin: .25rem;
    padding: .5rem;
    font-size: .85rem;
    width: 200px;
}
.moon {
    grid-area: moon;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
}
.foot {
    grid-area: foot;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.credit {
    grid-area: credit;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu {
  grid-area: menu;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0;
  margin: .5rem;
  font-size: .85rem;
  text-align: center;
}
.bamboo {
  background-color: #FFF7E7;
  border: 20px solid black;
  border-image: url('/ui/layoutpieces2.png') 100 / 30px / 9px repeat;
}
.scroll {
  background-color: #FFF7E7;
  border: 20px solid black;
  border-image: url('/ui/layoutpieces3.png') 100 / 30px / 9px repeat;
}

/* Div Dividing */
    .nest {
        display: flex;
        gap: 1rem;
        margin: 0;
        padding: 0;
    }
    .egg {
        flex: 1; 
        margin: .25rem;
        padding: .5rem;
        padding-right: 1rem;
        height: 75vh;
        overflow: scroll;
    }

.button {
    width: 75px; 
	height: auto;
	margin: 0;
}

/* 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);
    }
    .shopnav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    font-size: .85rem;
    gap: .5rem;
    text-align: center;
    justify-content: center;
    }
    .chatbox {
        position: relative;
        border: 2px solid #3E8CEC;
        border-radius: 1rem;
        background-color: rgba(255, 255, 255, 0.445);
        min-height: 14vh;
        padding: 1rem;
        margin: 0;
        font-size: .90rem;
    }
    .nametag {
        position: absolute;
        top: -3.2rem;
        left: 14rem;
        background-image: url(/ui/nametag.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 250px;
        height: auto;
        padding: .5rem;
        margin: 0;
    }
    .portraitimg {
        width: auto; 
        height: 60vh; 
        margin: auto; 
        margin-bottom: -.2vh; 
        padding: 0;
        display: block;
        margin-right: auto;
        margin-left: 0;
    }
    .bulktext {
        margin-top: 0;
    }

/*=== https://codepen.io/kiruu/pen/XWdYrEa  ===*/
.secret {
  display: flex;
  position: absolute;
  top: 5vh;
  left: 32vw;
  color: rgb(15, 15, 17);
  height: auto;
  width: auto;
  margin: 0;
  padding: .25rem;
  width: auto;

  -webkit-animation-duration: 40s;
  animation-duration: 40s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  animation-delay: 20s;

  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* Bubble */
.bubble {
	position: absolute;
	font-size: 1.25vh;
	background: #d1f3e6;
	border: 2px solid #3E8CEC;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.445);
	width: 150px;
	height: auto;
  border-radius: 13px;
  padding: 0.5rem;
}

.bubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 1.406em solid transparent;
	border-bottom-color: #3E8CEC;
	border-top: 0;
	margin-left: -1.406em;
	margin-top: -1.406em;
}


/* Tablet */

/* Phone */
@media (max-width: 700px) {
    body {
    height: auto;
    width: auto;
    overflow: scroll;
    font-size: .75rem;
    }
    .page {
    width: auto;
    height: auto;
    margin: 0;
    padding: .25rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: .25rem;
    grid-template-areas: 
    "top"
    "menu"
    "main"
    "side"
    "foot"
    ;
}
    .nest {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        margin-top: .75rem;
        padding: 0;
    }
    .egg {
        flex: 1; 
        display: flex;
        flex-direction: column;
        padding: .25rem;
        margin: .5rem;
        overflow: scroll;
    }
.moon, .credit {
    display: none;
}
.top {grid-area: top; height: 50px;}
.top, .main, .left, .foot {
    padding: 0;
    margin: 0;
    width: 90vw;
}
.main {grid-area: main;}
.left {grid-area: side;}
.leftbox {
    display: grid;
    border: 2px solid red;
    border-radius: .5rem;
    background-color: pink;
    font-size: .75rem;
    width: auto;
}
.foot {grid-area: foot;
    display: inline-block;
}
.menu {grid-area: menu;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .25rem;
    margin: .25rem;
    width: 90vw;
    justify-content: center;
}
/* 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);
    }
    .shopnav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    font-size: .85rem;
    gap: .5rem;
    text-align: center;
    justify-content: center;
    }
    .chatbox {
        position: relative;
        border: 2px solid pink;
        border-radius: 1rem;
        background-color: rgba(255, 255, 255, 0.445);
        min-height: 15vh;
        padding: 1rem;
        margin: 0;
        font-size: .90rem;
    }
    .nametag {
        position: absolute;
        top: -2.25rem;
        left: 1rem;
        border-radius: .5rem;
        background-color: pink;
        padding: .25rem;
        margin: 0;
    }

.bamboo {
  display: flex;
  background-color: #FFF7E7;
  border: 10px solid black;
  border-image: url('/ui/layoutpieces2.png') 100 / 20px / 9px repeat;
}
.scroll {
  display: flex;
  background-color: #FFF7E7;
  border: 20px solid black;
  border-image: url('/ui/layoutpieces3.png') 100 / 30px / 9px repeat;
}
}

/* Animation Doesn't work on Firefox yet.
@media(prefers-reduced-motion: no-preference){
    @view-transition {
    navigation: auto;
}

::view-transition-group(page-content) {
    animation-duration: 1s;
    animation-timing-function: ease;
}

::view-transition-old(page-content){
    animation-name: slide-out;
}
::view-transition-new(page-content) {
    animation-name: slide-in;
}
@keyframes slide-out {
    to {
        translate: -100vw;
    }
}
@keyframes slide-in {
    from {
        translate: 100vw;
    }
}
} */