/*image settings*/
img {
  image-rendering: optimizeSpeed; 
}

#puppyWindow {
  position: absolute;
  top: 2.5vh;
  left: 6vw;
  width: 23vw;
  min-width: 120px;
  height: auto;
  z-index: 99;
}
#puppyWindow:hover {
  rotate: -5deg;
}
#mainContainer:has(:not(.active) > a:hover) #puppyWindow {
  rotate: -2.5deg;
}
#kibby{
  position: absolute;
  bottom: 0;
  right: 7vw;
  z-index: 99;
  width: 20vw;
  min-width: 100px;
  height: auto;
}
/*end image settings*/

/*textured border box*/
.woodBorder {
  padding: 0 1vw 0;
  background-color: var(--pink-brown);
  background-image: url("../assets/wood_pattern.webp");
  background-blend-mode: multiply;
  width: fit-content;
  margin: auto;
  border: solid var(--bright-pink);
  border-width: 0 10px 0;
}
/*grid*/
#mainContainer {
  display: grid;
  height: 100vh;
  width: 60vw;
  grid: 
	"header header" 3fr
	"navigation main" 90vh
	"footer footer" 1fr
	/minmax(100px, 20%) 1fr;
}
/*buttons*/
.menuContainer{
  grid-area: navigation;
  background-color: rgba(255,255,255,0.1);
  overflow: hidden;
}
#mainContainer .menuContainer .menu {
  margin-bottom: 1%; height: 99%;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
}
/*tab styling*/
#mainContainer .menuContainer .menu .tabs {
  background: var(--pink);
  font-size: 2.6rem;
  border-radius: 5px 0 0 5px;
  writing-mode: sideways-lr;
  margin: 0 0 10px 0;
  box-shadow: -7.5px 2.5px 0px 2.5px var(--bright-pink);
  z-index: 1;
  padding: 25px 10px 25px 10px;
}
#mainContainer .menuContainer .menu .tabs:has(a:hover) {
  background: var(--pink-white);
  box-shadow: -7.5px 6px .25px 0px var(--bright-pink);
  font-size: 3rem;
  border-radius: 7px 0 0 7px;
}
#mainContainer .menuContainer .menu :not(.active) a:hover {
  color: var(--pink-brown) !important;
}
#mainContainer .menuContainer .menu .active {
  background: var(--pink-white);
  box-shadow: -7.5px 6px .25px 0px var(--bright-pink);
  font-size: 3rem;
  z-index: 10;
  border-radius: 7px 0 0 7px;
}
/*end buttons*/

/*page view*/
#mainContainer .pageDisplay {
  grid-area: main;
  border-radius: 10px 0 0 10px;
  box-shadow: -10px 0px 0px 0px var(--bright-pink);
  background: var(--pink-white);
  z-index: 5;
  padding: 20px;
  overflow-y: scroll;
}
/*end page viewing box*/

/*blank header and footer (can be changed at any point)*/
header {
  grid-area: header;
}

footer {
  grid-area: footer;
}

/*phone display settings*/
@media (max-width: 1000px){
	#puppyWindow{
		left: 1vw;
		top: 1vw;
		min-width: 100px;
	}
	#kibby{
		right: 0;
		min-width: 75px;
	}
	.woodBorder {
		border: none;
	}
	#mainContainer {
		display: grid;
		height: 100vh;
		width: 98vw;
		grid: 
			"header" 2fr
			"navigation" minmax(20px, 12vh)
			"main" 82vh
			"footer" 1fr
			;
	}
	#mainContainer .menuContainer .menu {
		margin-right: 3%; width: 97%;
		height: 100%;
		flex-direction: row-reverse;
	}
	#mainContainer .menuContainer .menu .tabs {
		writing-mode: horizontal-tb;
		box-shadow: -.1em -.05em 0px .1em var(--bright-pink);
		border-radius: 5px 5px 0 0;
		margin: 0 0 0 10px;
		padding: 8px 21px 8px 21px;
		font-size: 1.7rem;
	}
	#mainContainer .menuContainer .menu .tabs:has(a:hover) {
		box-shadow: -.15em -.1em .25px 0 var(--bright-pink);
		border-radius: 7px 7px 0 0;
		font-size: 2rem;
	}
	#mainContainer .menuContainer .menu .active {
		box-shadow: -.15em -.1em .25px 0 var(--bright-pink);
		border-radius: 7px 7px 0 0;
		font-size: 2rem;
	}
	#mainContainer .pageDisplay {
		box-shadow: 0 -.2em 0 0 var(--bright-pink);
		border-radius: 10px 10px 0 0;
		padding: 5px;
		border-top: 5px solid var(--pink-white);
	}
}

@media (max-width: 400px){
	#mainContainer .menuContainer .menu .tabs {
		box-shadow: -.1em -.05em 0px .1em var(--bright-pink);
		margin: 0 0 0 7px;
		padding: 5px 10px 5px 10px;
		font-size: 1.2rem;
	}
	#mainContainer .menuContainer .menu .tabs:has(a:hover) {
		box-shadow: -.15em -.1em .25px 0 var(--bright-pink);
		border-radius: 7px 7px 0 0;
		font-size: 1.5rem;
	}
	#mainContainer .menuContainer .menu .active {
		box-shadow: -.15em -.1em .25px 0 var(--bright-pink);
		border-radius: 7px 7px 0 0;
		font-size: 1.5rem;
	}
	#mainContainer .pageDisplay {
		box-shadow: 0 -.2em 0 0 var(--bright-pink);
		border-radius: 10px 10px 0 0;
		padding: 5px;
	}
}