@font-face{
	font-family: "Great Vibes";
	/*src: url(./fonts/GreatVibes-Regular.ttf) format('truetype');*/
	src: url(./fonts/GreatVibes-Regular.woff2) format('woff2');
}
@font-face{
	 font-family: "Bebas Neue";
	 src: url(./fonts/BebasNeueRegular.woff2) format('woff2');
}
@font-face{
	 font-family: "Josefin";
	 src: url(./fonts/JosefinSlab-VariableFont_wght.woff2) format('woff2');
}

:root{
	--width: 80svw;
	/**--height: min(calc(100vh - 100px - 50px - 25vh),70vh);*/
	--height: 60svh;
	--wallWidth: 80svw;
	--wallHeight: 65svh;
	--boxWidth: min(15svw,15svh);
	--boxHeight: min(15svw,15svh);
	/**font-size: clamp(12px,max(1vw, 1vh), 20px);*/
	font-size: calc(16px * max(1vw, 1vh) / 16);
	}

/* SCROLLBAR */
::-webkit-scrollbar {width: 2px;}
scrollbar {width: 30px;}
::-webkit-scrollbar-track {background: rgba(255,255,255,0.5);}
scrollbar-track {
	width: 200px;
	background: rgba(255,255,255,0.5);}
::-webkit-scrollbar-thumb {
  background:goldenrod; 
  border-radius: 10px;
	}
scrollbar-thumb {
  width: 200px;
  background: red; 
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
	}

/* SELECTION/ HIGHLIGHT */
::selection {
	color: wheat;
	text-shadow: 0px 0px 1px rgba(10,10,0);
	background: rosybrown;
	}

*, *::before, *::after
{
	box-sizing: border-box;
}

body {
	width: 100vw;
	height: 100svh;
	margin: 0px;
	padding: 0px;
	font-size: 1rem;
	overflow: hidden;
	background: teal;/**rgb(10,10,0);*/
	max-height: 100svh;
	position: fixed;
	top: 0px;
	left: 0px;
	}
body *{
	font-family: "Josefin";
	font-weight: bold;
	}
	
/* Background Color Changer */
#backgroundColorChangerScreen{}
#backgroundColorChangerScreen > h2{
	color: goldenrod;
	text-shadow: 0px 0px 1px black;
	}
#bgColorSelect{
	width: 50%;
	height: 25%;
	border: solid black 2px;
	}
#bgColorSelect:hover{ 
	cursor:pointer;
	border: gold solid 2px;}

/* Background Close Button*/	
#closetoo{
	position: absolute;
	display: block;
	width: 100vw;
	height: 100vh;
	left: 0vw;
	top: 0vh;	
	background: rgba(0,0,0,0);
	}
	
/* Viewport Content */	
#viewport {
	position: absolute;
	width: var(--width);
	height: var(--height);
	top: 50%;
	left: 50%;
	margin-left: calc(var(--width) / -2);
	margin-top: calc(var(--height) / -2);
	background-color: rgba(10,10,0, 0.6);
	background-image: radial-gradient(at 50% 50%, rgba(10,10,0, 0.5) 55%, rgba(255,255,255,0));
	border: groove 2px goldenrod;
	border-right: ridge 2px goldenrod;
	border-bottom: ridge 2px goldenrod;
	border-radius: 50px;
	box-shadow: 0px 0px 20px darkgrey, 0px 0px 5px dimgrey;
	box-sizing: border-box;
	overflow: hidden;
	z-index: 10;
	}
#viewport *{
	transform-style: preserve-3d;
	box-sizing: border-box;
	}
#camera{
	position: absolute;
	width: 0px;
	height: 0px;
	top: 50%;
	left: 50%;
	perspective:  max(90vw, 90vh);
	perspective-origin: 50% 80%;
	}
#scene {
	position: absolute;
	width: var(--width);
	height: var(--height);
	left: 50%;
	top: 50%;
	margin-left: calc(var(--width) / -2);
	margin-top: calc(var(--height) / -2);
	transform-style: preserve-3d;
	pointer-events: none;
	transform: rotateY(-315deg);	
	}
/* VITAL MISC. */
label{
	pointer-events: auto;
	border: none;
	}
label:hover{ cursor: pointer;}	
a{
	pointer-events: auto;
	color: floralwhite;
	text-shadow: 0px 0px 2px black;
	text-decoration: underline dashed 1px;
	}
a:hover{ 
	color: floralwhite;
	cursor: pointer;
	text-decoration: underline solid 1px;
	}	

/* HEADER and ACCOUNT*/
#header{
	position: absolute;
	width: 100vw;
	height: 5svh;
	top: 0px;
	}
#header label{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	text-shadow: 0px 0px 3px black;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 2.5rem;
	box-sizing: border-box;
	color: darkgoldenrod;
	text-shadow: 0px 0px 1px black, 0px 0px 10px gold, 0px 1px 1px rgb(10,10,0);
	background-image: linear-gradient(to left, saddlebrown,  darkgoldenrod, goldenrod, gold, goldenrod, darkgoldenrod, saddlebrown); 
	border: none;
	box-shadow: 0px 0px 2px black;

	}
#header label:hover{
	box-shadow: 0px 0px 2px black, 0px 0px 10px gold, 0px 0px 25px Darkred ;
	}
/* ACCOUNT LOGIN, REGISTRATION AND CONTACT */	
#myAccount{
	width: 100%;
	top: 0px;
	left: 0px;
	overflow-y: scroll;
	font-family: "Josefin";
	font-size: 1.5rem;
	font-weight: bold;
	color: rgb(10,10,0);
	background-color: rgba(218, 165, 32,0.85);
}
#myAccount*{
	color: rgb(10,10,0);
	}
#myAccount a{ 
	color: rgb(10,10,0);
	text-shadow: 0px 0px 10px antiquewhite;
	}
#myAccount label h2, #myAccount .myAccount-link{ 
	width: 100%;
	height: 20%;
	font-family: "Great Vibes" !important;
	font-size: 2.5rem;
	color: goldenrod;
	text-shadow: 0px 0px 1px black, 0px 0px 10px saddlebrown, 0px 0px 2px black;
	border: none;
	
	}
#myAccount label h2:hover,#myAccount .myAccount-link:hover{ 
	cursor: pointer;
	color: antiquewhite; 
	}
#myAccount fieldset{ border: dashed 2px black;}	

#responseContent{
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	display: flex;
	justify-content: center;
	align-items: safe center;
	padding: 10px;
	overflow-y: scroll;
	flex-wrap: wrap;
	}
#responseContent input:not(input[type=submit]), #responseContent textarea, #responseContent select{ 
	margin-bottom: 10px;
	color: floralwhite;
	font-size: 2rem;
	text-shadow: 0px 0px 1px rgb(10,10,0);
	background-color: rgba(10,10,0,0.9); 
	border: none;
	border-bottom: 5px darkgoldenrod solid;
	}
/*
#responseContent textarea {
	padding: 10px;
	font-size: 2rem;
	color: floralwhite;
	background-color: rgba(10,10,0,0.9); 
	border: solid 5px darkgoldenrod;
	border-radius: 5px;
	}
*/
#responseContent input[type=text]{ background-color: floralwhite;}
#responseContent li{list-style-type:none;}
#responseContent li a{
	font-size: 2rem;
	color: antiquewhite;
	text-decoration: none;
	}
#responseContent li a:checked{ display: none;}
#responseContent button, input[type=submit]{
	padding: 5px;
	margin: 10px;
	margin-top: 15px;
	font-size: 1.5rem;
	color: goldenrod;
	text-shadow: 0px 0px 2px black;
	background-color: rgba(10,10,0,0.8);
	border: groove 3px goldenrod;
	border-right: ridge 3px goldenrod;
	border-bottom: ridge 3px goldenrod;
	border-radius: 10px;
	}
#responseContent button:hover, input[type=submit]:hover{ cursor: pointer;}
#responseContent p
{
	flex-shrink: 0;
	width: 100%;
}

#myAccountToggle:checked ~ #info{display: block;}
#myAccountToggle:checked ~ #info #myAccount{display: block;}
#myAccountToggle:checked ~ #info .action{display: none;}

@-webkit-keyframes fade {
  0% { opacity:0 } 
  50% {opacity:0.5 }
  100% {opacity:1 }
}

@keyframes fade { 
  0% { opacity:0 } 
  50% {opacity:0.5 }
  100% {opacity:1 }
}

/** dashboard menu */
.woocommerce-MyAccount-navigation{ position: relative; }
.woocommerce-MyAccount-navigation *{ margin-top: 10px; }

.woocommerce-MyAccount-navigation ul
{
	
	display: none;
	padding: 0;
	list-style-type: none;
	/*border: double 5px goldenrod;
	transform: translateY(50px);
	transition: transform 2s ease-in-out;
	transform-origin: 10%;
	transform-style: preserve-3d;*/
}

/** https://stackoverflow.com/questions/9367852/how-do-i-centre-absolutely-positioned-content-of-unknown-width */

#tgei-wc-menuToggle:checked ~ ul{
	position: fixed;
	width: var(--width);
	height: var(--height);
	top: 50%;
	left: 50%;
	margin-top: calc(var(--height) / -2);
	margin-left: calc(var(--width) / -2);
	padding-bottom: 20px;
	display: grid;
	grid-template-columns: auto;
	border: solid 5px rgba(0,0,0,0);
	background: rgba(0,0,0,0.9);
	border-radius: 50px;
	box-sizing: border-box;
	}
#tgei-wc-menuToggle ~ ul li{
	color: rgb(10,0,0);
	background-color: rgba(10,10,0,0.5);
	padding: 10px;
	border-bottom: 2px darkgoldenrod dotted;
	}
#tgei-wc-menuToggle ~ ul li a{
	width: 100%;
	height: 100%;
	text-shadow: 0px 0px 1px black;
	}
#tgei-wc-menuToggle ~ ul li:first-child{
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	}
#tgei-wc-menuToggle ~ ul li:last-child{
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	border-bottom: none;
	}
#tgei-wc-menuToggle:checked ~ ul li a:hover{
	color: goldenrod;
	text-shadow: 0px 0px 1px black;
 }

#tgei-wc-menuToggle ~ label h1
{
	font-family: Great Vibes;
	color: darkgoldenrod;
	text-shadow: 1px 0px saddlebrown;
	background-color: goldenrod;
	background-image: linear-gradient(to bottom, goldenrod, gold, darkgoldenrod);
}
#tgei-wc-menuToggle:checked ~ label h1{ display: none; }

/*menu close button*/
#tgei-wc-menuToggle:checked ~ label:after
{
	content: 'Close';
	font-family: Great Vibes;
	color: darkgoldenrod;
	text-shadow: 1px 0px saddlebrown;
	background-color: goldenrod;
	background-image: linear-gradient(to bottom, goldenrod, gold, darkgoldenrod);
}
#tgei-wc-menuToggleLabel:hover{
	cursor: pointer;
	text-shadow: 2px 1px 5px red;
	}
.formToggle{ display: none; }
.formToggle + form{	display: none; }
.formToggle:checked + form{	display: block; }
.formToggleLabel:hover{
	/*
	border: 2px groove black;
	border-radius: 20px;
	*/
	cursor: pointer;
	}
/* THE ORDER */
/* Shopping Basket List Button */
#basket{
	position: absolute;
	width: fit-content;
	height: 3svh;
	top: 1svh;
	right: 10vw;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
	color: floralwhite;
	background-color: black; 
	border-radius: 50px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	}
#basket div{
	display: flex;
	justify-content: center;
	align-items: center;
	color: floralwhite;
	}
/*Number of Items in the Basket*/
#numCartItems{
	border-radius: 50%;
	color: black;
	font-weight: bold;
	display: none;
	margin-left: 20px;
	background: goldenrod;
	aspect-ratio: 1;
	place-items: center;
	padding: 0.5rem 1rem;
}

#numCartItems[data-show="true"]
{
	display: inline-flex;
}

/* The Shopping List*/
#mybasket{
	height: 100%;
	max-height:100%;
	padding-top: 15px;
	font-family: "Josefin";
	font-size: 1.5rem;
	font-weight: bold;
	background: rgba(10,10,0,0.8);
	box-shadow: 0px 0px 5px black inset;
	overflow-y: none;
	/*scrollbar-color: lavender;*/
	display: none;
	grid-template-rows: 1fr min-content;
	grid-template-areas:
		"cart"
		"totals";
	}
#basketItems{
	grid-area: cart;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-height: 100%;
	/*font-size: 2;*/
	overflow-y: scroll;
	}
#basketItems *{
	color: floralwhite;
	text-shadow: 0px 0px 2px darkslategrey;}
.checkoutSection h3{
	padding: 5px;
	padding-top: 10px;
	color: goldenrod;
	text-shadow: 0px 0px 2px black, 0px 0px 2px darkslategrey, 1px 1px 3px saddlebrown;
	}
.checkoutSection > label{
	padding: 5px;
	padding-top: 10px !important;
	font-weight: bold;
	color: rgb(10,10,0);
	text-shadow: 0px 0px 1px whitesmoke;}
#totalAndCheckoutContainer > div:nth-child(2) > button:nth-child(1){
	margin-top: 15px;
	padding: 5px;
	padding-left: 20px;
	padding-right: 20px;
	color: goldenrod;
	text-shadow: 0px 0px 2px black;
	background-color: rgba(10,10,0,0.8);
	border:groove 3px goldenrod ;
	border-right:ridge 3px goldenrod ;
	border-bottom:ridge 3px goldenrod ;
	border-radius: 10px;
	}
#totalAndCheckoutContainer > div:nth-child(2) > button:nth-child(1):hover{cursor: pointer;}

.checkoutSection input, .checkoutSection select, .checkoutSection textarea
{
	padding: 5px;
	font-family: "Josefin";
	font-size: 1.5rem;
	color: floralwhite;
	text-shadow: 0px 0px 2px darkslategrey;
	background-color: rgba(10,10,0,0.8);
	border:groove 3px goldenrod ;
	border-right:ridge 3px goldenrod ;
	border-bottom:ridge 3px goldenrod ;
	border-radius: 10px;
	}
#basketItems a{ 
	color: floralwhite;
	text-shadow: 0px 0px 2px darkslategrey;
	}
#basketItems a:hover{ 
	color: rgb(10,10,0);
	text-shadow: 0px 0px 2px whitesmoke;
	}
#basketItems table{ 
	width: 75%;
	max-width: 1000px;
	padding-top: 5vh;
	border-collapse: collapse;
	width: 100%;
	}
#basketItems table tbody tr{ 
	width: 100%;
	padding-top: 5vh;
	border-collapse: collapse;}

/* items */
#basketItems button{
	color: brickred;
	text-shadow: none;
	font-size: 1.5rem;
	background: none;
	border: none;
	}
/*Quantity*/
#basketItems input[type="number"]{
	width: 80px;
	text-align: center;
	color: goldenrod ;
	font-size: 2rem;
	font-weight: bold;
	text-shadow: none;
	background: none;
	border: none;
	border-bottom: solid 5px rgb(250, 235, 215);
	}
/* no arrows for quantity*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
/* to delete */
.highlightRowTr{ background: rgb(10,10,0); }
/* list reorder */
#TGEI_CartOrganizer_SelectedItem{
	padding-left: 10px;
	align-items: center;
	background-color:rgba(218, 165, 32,0.5);
	border: none;
	transform: scaleY(0) scaleX(0);
	transition: transform .10s ease-in-out;
}
/*#TGEI_CartOrganizer_SelectedItem img,*/
#TGEI_CartOrganizer_SelectedItem button, 
#TGEI_CartOrganizer_SelectedItem input,
#TGEI_CartOrganizer_SelectedItem tr > td:nth-child(5),
#TGEI_CartOrganizer_SelectedItem a,
{
	display: none;
	}
#TGEI_CartOrganizer_trPlaceHolder td
{
	background-color: goldenrod;
	height: 10px;
}
#cartItemsContainer > table > tbody > tr > td > button{
color: rgba(178,34,34,0.5);}

#basketItems .moveCartItem{
	justify-content: center;
	align-items: center;
	color: goldenrod ;
	font-size: 2.5rem;
	font-weight: bold;
	text-shadow: none;
	}
.moveCartItem:hover{ cursor: pointer;}
.moveCartItem:checked{ cursor: pointer;}

/*Subtotal*/
#basketItems table tfoot td{
	padding-top: 20px;
	font-weight: bold;
	}
#totalsContainer{
	grid-area: totals;
	display: flex;
	justify-content: center;
	align-content: cernter;
	align-items: center;
	color: floralwhite;
	background-color: rgba(10,10,0,0.8);
	border-top: solid 2px black;
	}
/*Paypal*/
#paypalContainer{
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 50px;
	margin-bottom: 20px;
	}	
#paypal-button-container{
	background: rgba(248, 248, 255, 1);
	padding: 20px;
	border-radius: 20px;
	}
#checkoutToggle:checked ~ #info{display: block;}
#checkoutToggle:checked ~ #info #checkoutPage{display: block;}
#checkoutToggle:checked ~ #info .action{display: none;}

/* SEARCH */
#searchboxContainer{
	position: absolute;
	width: 30vw;
	top: 6svh;
	left: 35vw;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	}
#searchBox{
	padding: 5px;
	font-size: 1.25rem;
	color: antiquewhite;
	text-align: center;
	background: rgb(10,10,0,0.9);
	border: solid 2px black;
	border-radius: 50px;
	}
#searchBox:active{ 
	border: solid 2px darkslategrey;
	box-shadow: 0px 0px 10px gold;
	}
#searchBox::placeholder{ text-align: center;}
#searchDiv form input[type="submit"],
.woocommerce-EditAccountForm > p > label > span{
	color: goldenrod;
	border: none;
	}


/* Category Search List*/
#categoryToggleLabel{
	position: absolute;
	width: 10%;
	height: 5%;
	left: 45%;
	top: unset;
	bottom: 0;
	font-size: 2rem;
	color: rgba(0,0,0,0.5);
	background-color: black;
	border-top: groove 2px goldenrod;
	border-left: groove 2px goldenrod;
	border-right: ridge 2px goldenrod;
	border-bottom: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	box-sizing: border-box;
	text-align: center;
	z-index: 100;
	opacity: 0;
	}
#categoryToggleLabel:hover{ cursor: pointer;  }

/* Search Results */
#searchDiv{
	width: 100%;
	height: 50px;
	display: flex;
	align-content: flex-start;
	justify-content: center;
	top: 0px;
	left: 0px;
	flex-wrap: wrap;
	transition: height 1s linear;
	overflow: hidden;
	padding-top: 1rem;
	background: rgba(255, 250, 240, 0);
}
#searchFilterToggle{
	display: none;
}
#searchFilters{
	width: 100%;
}

#searchFilterLabel{
	padding: 5px;
	border-radius: 5px;
	background: black;
	color: goldenrod;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1.25rem;
	margin-left: 10px;
	height: fit-content;
}

#categoryNav{
	display: flex;
	top: 5%;
	width: 100%;
	height: 0px;
	min-height: 0px;
	justify-content: center;
	align-content: start;
	box-sizing: border-box;
	background: rgba(255, 250, 240, 0.9);
	overflow-y: scroll;
	transition: height 1s linear;
	flex-wrap: wrap;
	}
#categoryItems{
	width: 100%;
	margin-top: 0px;
	padding: 0px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	/*grid-column-gap: min(1vw, 10px);
	grid-row-gap: min(1vw, 10px);*/
	grid-auto-rows: max-content;
	justify-content: center;
	align-content: center;
	}
/* The Items */

.categoryItem{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	outline: 3px dotted floralwhite;
	background-color: rgba(10,10,0,0.9);
	}
.categoryItem:hover{
	background: rgba(255, 250, 240, 0);
	border: 3px solid rgba(255, 250, 240, 0);
	}

.categoryItem button img{
	min-height: 150px;
	max-width: 100%;
	aspect-ratio: 8.5 / 11; 
	}

.categoryItem button{
	width: 100%;
	padding-top: 10px;
	color: floralwhite;
	font-size: 1rem;
	font-weight: bold;
	text-shadow: 0px 0px 1px floralwhite;
	background-color: rgba(255, 250, 240,0);
	}

/*product image*/
.categoryItem button:first-child{
	min-height: 300px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: rgba(10,10,0,0);
	border: none;
	}
.categoryItem button:first-child:hover{
	background-color: rgba(255, 250, 240,0);
	}
/*pricetag*/	
.categoryItem button:nth-child(2){
	width: 96%;
	margin-left: 1%;
	margin-top: 0px;
	margin-bottom: 2px;
	background: rgba(10,10,0,0.9);
	border: none;
	/*border-top: 1px dashed antiquewhite;*/
	border-radius: 20px;
	}
.categoryItem button:nth-child(2):hover{
	cursor: pointer;
	
	}

/* FOOTER */
#footer{
	position: absolute;
	width: 100vw;
	height: 10vh;
	bottom: calc(-10vh + 4rem);
	left: 0%;
	padding-top: 1rem;
	font-family: "Josefin";
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	color: rgba(10,10,0,0);
	text-shadow: 0px 0px 1px black, 0px 1px 1px antiquewhite;
	box-sizing: border-box;
	z-index: 1;
	border-top: dashed 2px black;

	transform: rotate(0deg);
	transform-origin: 80%;
	transition: transform .5s ease-in-out;

	}
#footer a{ 
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 5px;
	color: floralwhite;
	text-shadow: 0px 0px 1px black, 0px  1px 2px grey;
	text-decoration: none;
		}
#footer:hover{ 
	transform: rotate(1deg);
	transform-origin: 80%;
	transition: transform .5s ease-in-out;
	}	

/*WELCOME*/
#dearvisitor{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.8);
	border-radius: 50px;
	display: none;
	}

#explore{
	position: absolute;
	width: calc(100% + 100px);
	height: 5rem;
	left: -50px;
	bottom: 20%;
	background: crimson;
	display: flex;
	justify-content: center;
	color: floralwhite;
	border-left: ridge 2px goldenrod;
	border-right: groove 2px goldenrod;
	animation-duration: 1.5s;
	animation-direction: alternate;
	animation-timing-function: ease;
	animation-name: pulse;
	animation-iteration-count: infinite;
	animation-play-state: running;
	z-index: 10;
	align-items: center;
	}

#explore span{
	position: relative;
	top: 0.5rem;
}
/* Opening Animation */
@keyframes introduction{
	0%{
	transform: 
	rotateY(0deg);}
	100%{
	transform: 
	rotateY(-315deg);}
}
@keyframes pulse{
	0%{text-shadow: 0px 0px 5px floralwhite;}
	100%{ text-shadow: 0px 0px 5px gold;}
}
#welcome:checked~#viewport #camera #scene{
	animation: introduction 8s ease-in-out;
	animation-fill-mode: forwards;
}
#welcome:checked ~ .turn{ display: none;}
#welcome:checked ~ #closetoo{ display: none;}
#welcome:not(:checked) ~ #turnback{ display: block;} 
#welcome:not(:checked) ~ #turnaround { display: none;} 
#explore:hover{ cursor: pointer;}

/* Background-Color Changer */
#backgroundColorChangerToggle{
	width: 100vw;
	height: 100vh;
	background: transparent;
	display: block;
	position: fixed;
	}
#backgroundColorChangerScreen{
	display: none;
	background: rgba(10,10,10,0.5);
	}
#backgroundColorChanger:checked ~ #info{display: block;}
#backgroundColorChanger:checked ~ #info #backgroundColorChangerScreen{display: block;}
#backgroundColorChanger:checked ~ #info .action{display: none;}

/* VIEWING THE ROOM */
.turn{
	position: absolute;
	display: block;
	width: 6vw;
	max-width: 100px;
	height: 30vh;
	top: calc(50% - 30vh / 2);
	background-color: darkgoldenrod;
	box-shadow: 0px 0px 1px darkslategrey, 0px 0px 2px saddlebrown;
	z-index: 2;
	}
#turnaround{
	left: calc(10vw - min(6vw, 100px));
	background-image: linear-gradient( to left, saddlebrown,  darkgoldenrod 10%, goldenrod, gold 30%, goldenrod, darkgoldenrod);
	border-left: 1px solid goldenrod;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	}
#turnback{
	right: calc(10vw - min(6vw, 100px));
	background-image: linear-gradient( to right, saddlebrown,  darkgoldenrod 10%, goldenrod, gold 30%, goldenrod, darkgoldenrod);
	border-right: 1px solid goldenrod;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	}

/* Rotate Animation */
@keyframes endfacing{
	0%{
	transform:
	rotateY(-315deg);}
	100%{
	transform: 
	rotateY(-135deg);}
}
@keyframes backfacing{
	0%{
	transform: 
	rotateY(-135deg);}
	100%{
	transform: 
	rotateY(-315deg);}
}

#turn1:checked~#viewport #camera #scene{
	animation: endfacing 3s ease;
	animation-fill-mode: forwards;
}
#turn2:checked~#viewport #camera #scene{
	animation: backfacing 3s ease;
	animation-fill-mode: forwards;
}
#turn1:checked ~ #turnaround{ display: block;  }
#turn1:checked ~ #turnback  { display: none; }
#turn2:checked ~ #turnback  { display: block; }
#turn2:checked ~ #turnaround{ display: none;  }

/* THE ROOM */
.absolutely{
	position: absolute;
	width: 100%;
	height:100%;
	}

.wall{
	position: absolute;
	display: block;
	width: var(--wallWidth);
	height: var(--wallHeight);
	top: 50%;
	left: 50%;
	margin-left: calc(var(--wallWidth) / -2);
	margin-top: calc(var(--wallHeight) / -2);
	background-color: cornsilk;
	border-bottom: groove 8px saddlebrown;
	box-shadow: 0px 0px 2px dimgrey inset, 0px 0px 10px burlywood inset;
	transform-style: preserve-3d;
	box-sizing: border-box;
	backface-visibility: hidden;
	}
#endwall{
	transform: translateZ(calc(var(--wallWidth) / -2));
	-webkit-transform: translateZ(calc(var(--wallWidth) / -2));
	background: rgba(0,0,0,0);
	border:none;
	}
#backwall{ 
	transform: rotateY(180deg) translateZ(calc(var(--wallWidth) / -2));
	-webkit-transform: rotateY(180deg) translateZ(calc(var(--wallWidth) / -2));
	}
#leftwall { 
	transform: rotateY(-90deg) translateZ(calc(var(--wallWidth) / -2));
	-webkit-transform: rotateY(-90deg) translateZ(calc(var(--wallWidth) / -2));
	}
#rightwall{ 
	transform: rotateY(90deg) translateZ(calc(var(--wallWidth) / -2));
	-webkit-transform: rotateY(90deg) translateZ(calc(var(--wallWidth) / -2));}


.panel{
	position: absolute;
	width: var(--wallWidth);
	height: var(--wallWidth);
	top: 50%;
	left: 50%;
	margin-top: calc(var(--wallWidth) / -2);
	margin-left: calc(var(--wallWidth) / -2);
	transform-style: preserve-3d;
	box-sizing: border-box;
	backface-visibility: hidden;
	}
#ceiling{ 
	background-color: antiquewhite;
	box-shadow: inset 0px 0px 500px lightgray;
	transform: rotateX(-90deg) translateZ(calc(var(--wallHeight) / -2));
	-webkit-transform: rotateX(-90deg) translateZ(calc(var(--wallHeight) / -2));
	}
#floor{ 
	background-color: saddlebrown;
	background-image: repeating-linear-gradient( to top, burlywood 3%, antiquewhite, moccasin, tan 5%);
	background-size:  100% 100%;
	box-shadow: 10px 0px 500px rgba(30,20,10,0.5) inset;
	transform: rotateX(90deg) translateZ(calc(var(--wallHeight) / -2));
	-webkit-transform: rotateX(90deg) translateZ(calc(var(--wallHeight) / -2));
	}

/* THE ITEMS */
.frame{
	position: absolute;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	border: outset peru 5px;
	border-left: inset peru 5px;
	border-bottom: outset peru 5px;
	backface-visibility: hidden;
	z-index: 10;
	}

/*leftwall*/

#textures, #tissue{
	border: groove gold 5px;
	border-left: ridge gold 5px;
	border-bottom: ridge gold 5px;
	box-shadow: 1px 1px 2px 1px sienna;
	}

#textures{
	width: 16%;
	height: 25%;
	top: 25%;
	right: 40%;
	}
#tissue{
	width: 16%;
	height: 25%;
	bottom: 20%;
	right: 40%;
	}	

#textures:hover, #tissue:hover{
	transform: rotateY(45deg) translateZ(10vw);
	transform-origin: 110% center;
	transition: transform 1s ease-in-out;
	box-shadow: 4px 2px 5px rgb(10,10,0);
	}
/*back wall*/
#fibrous,#warm,#white{
	border: none;
	border-top: 5px groove goldenrod;
	box-shadow: -1px 1px 3px rgba(10,10,0,0.5);
	}
#fibrous{
	width: 10%;
	height: 60%;
	top: 20%;
	right: 20%;
	}

#warm{
	width: 10%;
	height: 60%;
	top: 20%;
	right: 45%;
	}
#white{
	width: 10%;
	height: 60%;
	top: 20%;
	left: 20%;
	}
#fibrous:hover, #offwhite:hover, #white:hover{
	box-shadow: 0px 0px 30px rgb(250,250,220);
	}	

/* RIGHT WALL */
/* Wall Nook */
.nook{
	position: absolute;
	width:  20%;
	height: 15%;
	background-color: sienna;	
	box-sizing: border-box;
	backface-visibility: hidden;
	}


#boxes, #supplies, #collections {
	position: absolute;
	width:  20%;
	height: 15%;
	box-shadow: 0px 2px 5px saddlebrown;
	z-index: 100!important;
	}	
#boxes, #nook1{
	top: 25%;
	left: 40%;
	background-color: sienna;
	}	
#nook1{
	border-top: 10px solid tan;
	}	
#supplies, #nook2{
	top: 45%;
	left: 40%;
	background-color: darkslategrey;
	}
#collections, #nook3{
	top: 65%;
	left: 40%;
	background-color: sienna;
	}
#nook3{
	border-bottom: 10px solid tan;
	}

#supplies:hover, #collections:hover, #boxes:hover{
	transform: translateX(-20px);
	transition: transform .5s ease-in-out;
	transform-style: preserve-3d;
	}	
#letter{
	width: 10%;
	height: 40%;
	top: 30%;
	right: 45%;
	border: groove gold 5px;
	border-right: ridge gold 5px;
	border-left: solid gold 1px;
	border-bottom: solid gold 1px;
	border-radius: 5%;
	box-shadow: 1px 1px 2px 1px sienna;
	}
/* ENDWALL */
/* Chiyogami Wallpaper */
#spotlight{
	width: 45%;
	height: 100%;
	top: 0%;
	right: 0%;
	border: none;
	border-top: groove 5px burlywood;
	border-bottom: groove 8px saddlebrown;
	box-shadow: 0px 0px 5px burlywood inset;
	z-index: 9;
	}

/* The Door */
#doorframe{
	position: absolute;
	width: 55%;
	height: 100%;
	left: 0%;
	bottom: 0%;
	border-top: 5px solid tan;
	border-left: none;
	border-right: 10px solid burlywood;
	border-bottom: none;
	box-shadow: 0px 4px 5px dimgrey;
	z-index: 11;
	backface-visibility: hidden;
	}
#door{
	width: 100%;
	height: 100%;
	bottom: 0;
	background: rgba(0,0,0,0);
	border-top: 10px solid burlywood;
	border-left: 20px solid bisque;
	border-right: 20px solid bisque;
	border-bottom: 5px solid rgba(0,0,0,0);
	box-shadow: -3px 15px 10px rgb(10,10,0) inset;
	backface-visibility: hidden;
	}
/* Blackboard */
#aboutshop{	
	position: absolute;
	margin: none;
	padding: 0px !important;
	width: 25%;
	height: 40%;
	right: 10%;
	top: 30%;
	border-left: outset 4px darkgoldenrod;
	background: none;
	border-radius: 5px;
	box-shadow: 0px -2px 3px tan;
	backface-visibility: hidden;
	z-index: 10;
	 }
#aboutshop:hover{cursor: pointer;}
#shop{
	border-left: solid 10px burlywood;
	border-right: solid 5px burlywood;
	border-top: solid 5px burlywood;
	border-bottom: solid 5px burlywood;
	border-radius: 1px;
	box-shadow: 0px 3px 5px rgb(10, 10, 0);
	backface-visibility: hidden;
	}
#board{
	border-top: inset 2px tan;
	border-right: inset 5px darkgoldenrod;
	border-bottom: outset 2px tan;
	border-left: none;
	box-shadow: 5px 5px 20px darkgoldenrod inset;
	box-sizing: border-box;
	backface-visibility: hidden;
	}
#abouttoo{
	padding: 2px;
	font-size: 50%;
	background-color: rgba(47, 79, 79, 1);
	overflow: hidden;
	}
/* printer effect #abouttoo:hover *{
  overflow: hidden; 
  border-right: .15em solid orange; 
   white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: .5em;
  animation: 
    typing 20s steps(40, end);
	padding: 2px;
	font-size: 50%;
	background-color: rgba(47, 79, 79, 1);
	}*/
/*The Blackboard Text*/
#abouttoo *{
	position: relative;
	backface-visibility: hidden; }
#abouttoo p::first-letter{ font-size: 1rem; }
.aboutabfot{
	font-family: "Josefin";
	font-weight: bold;
	color: blanchedalmond;
	text-shadow: 0px 0px 1px black;
	text-align: center;
	background-color: rgba(47, 79, 79, 0.9);
	backface-visibility: hidden;
	}	
#abouttoo:hover #blackboardtext{
	font-weight: bold;
	}
/* The Blackboard Content */
#about{
	padding-left: 5%;
	padding-right: 5%;
	font-size: 2rem;
	justify-content: center;
	align-content: center;
	overflow-y: auto;
	}
/* A Box Full of Treasure */
#abfot{
	position: absolute;
	width: var(--boxWidth);
	height:  var(--boxHeight);
	bottom: 0%;
	right: 35%;
	transform: translateZ(calc((var(--boxWidth) / -2) - 5vw)) ;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	z-index: 110;
	}
#treasure{
	position: absolute;
	width: 100%;
	height: 100%;
	border: dotted gold 2px;
	border-top: none;
	}

#abfot .box{
	bottom: 0%;
	left: 40%;
	margin-left: calc(var(--boxWidth) / -2);
	margin-top: calc(var(--boxHeight) / -2);
	background: rgba(184,134,11, 0.9);
	background-image: url(./img/metal2.jpg);
	background-size: cover;
	border: solid 2px goldenrod;
	box-shadow: 0px 0px 5px saddlebrown inset;
	}
.box:hover{cursor: pointer;}

.frontbox { transform: rotateY(360deg) translateZ(calc(var(--boxWidth)/ 2)); }
.backbox { transform: rotateY(180deg) translateZ(calc(var(--boxWidth) / 2)); }
.boxl { transform: rotateY(-90deg) translateZ(calc(var(--boxWidth) / 2)); }
.boxr { transform: rotateY(90deg) translateZ(calc(var(--boxWidth) / 2)); }
.boxfloor { 
	width: var(--boxWidth);
	height: var(--boxWidth);
	border: none;
	transform: rotateX(90deg) translateZ(calc(var(--boxWidth) / -2)); 
	}

/* INFORMATION */
#info{
	position: absolute;
	display: none;
	justify-content: center;
	align-content: center;
	width: var(--width);
	height: var(--height);
	top: 50%;
	left: 50%;
	margin-top: calc(var(--height) / -2);
	margin-left: calc(var(--width) / -2);
	direction: rtl;
	z-index: 10;
	}
.information{
	display: none;
	width: 100%;
	height: 100%;
	direction: ltr;
	font-family: "Josefin";
	font-size: 2rem;
	font-weight: normal;
	text-align: center;
	border: groove 3px goldenrod;
	border-right: ridge 3px goldenrod;
	border-bottom: ridge 3px goldenrod;
	border-radius: 50px;
	box-sizing: border-box;
	overflow-y: hidden;
	scrollbar-color: goldenrod rgba(105, 105, 105, 0.5);
	}

#closeX{
	position: absolute;
	width: 50px;
	top: calc(50% - var(--height) / 2 - 50px - 5px);
	left: calc(50% - 25px); 
	display: flex;
	justify-content: center;
	align-items: center;
	color: darkgoldenrod;
	font-size: 1.5rem;
	font-weight: bold;
	font-family: 'Changa', sans-serif;
	text-shadow: 0px 0px 1px black;
	background: rgba(0,0,0,0.8);
	z-index: 20;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	}

h1{
	font-family: Great Vibes;
	font-size: 2.5rem;
	color: floralwhite;
	text-shadow: 0px 0px 1px black, 0px 0px 2px darkslategrey, 0px 0px 1px black;
	}
p::first-letter{
	font-family: "Great Vibes";
	/**font-size: max(40px,4vw);*/
	font-size: 2.5rem;
	font-weight: bold;
	padding: none;
	}


/* BUTTONS AND LABELS */
.oneButton{ display: none;}
/* Action, Account Menu and Account Menu Close Buttons */
.action, #tgei-wc-menuToggle ~ label h1, #tgei-wc-menuToggle:checked ~ label:after{	
	position: fixed;
	width: 300px;
	height: min(10svh, 50px);
	bottom: calc(50% - var(--height) / 2 - min(10svh, 50px));;
	left: calc(50% - 300px / 2);
	margin: 0px;
	display: flex;
	justify-content: center;
	align-content: center;
	color: goldenrod;
	font-size: 1rem;
	text-align: center;
	background-color: black;
	border-bottom: ridge 2px goldenrod;
	border-left: groove 2px goldenrod;
	border-right: ridge 2px goldenrod;
	border-top: none;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-sizing: border-box;
	z-index: 10;
	overflow: hidden;
	flex-wrap: wrap;
	}
	
#forabout:checked ~ #info #about{ display: block;}
#forbasket:checked ~ #info #mybasket{ display: grid; }
#forbasket:checked ~ #turnback{display: none;}
#forbasket:checked ~ #turnaround{display: none;}
#forproduct:checked ~ #info #product {display: block;}
#forproduct:checked ~ #info .action[data-instock="false"] {display: none;}
/**************************/
/* For Pop-ups */
.open:checked ~ #info{animation: fade 1.5s ease-in;}
.open:checked~#info{ display: block; }
.open:checked~ .information{ display: block; }
#close:checked ~ #closetoo {display: none;}
#close:checked~#info{ display: none; }
#close:checked~.information{ display: none; }


#welcome:checked~ #info #dearvisitor{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	}
#welcome:checked~ #info #closeX{ display: none;}
/** to hide add button */
#welcome:checked ~ #info .action, 
#forabout:checked ~ #info .action{
	display: none;
	}

/* EFFECTS */
.frame:hover{cursor: zoom-in;}
.turn:hover {cursor: pointer;}


#closeX:hover{cursor: pointer;}
.action:hover{ 
	cursor: pointer;
	color: blanchedalmond;
	}



/* The typing effect

.tgei:hover, #header label:hover {
	cursor: pointer;
  overflow: hidden; /* Ensures the content is not revealed until the animation 
  border-right: .15em solid orange; /* The typwriter cursor 
  white-space: nowrap; /* Keeps the content on a single line 
  margin: 0 auto; /* Gives that scrolling effect as the typing happens 
  letter-spacing: .15em; /* Adjust as needed 
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}
 */
/* Product Page*/
#product #productInfoContainer{ 
	position: relative;
	width: 100%;
	height: 100%;
	background-color: rgba(10,10,0,0.5);
	box-sizing: border-box;
	}
#productInfo {
	position: absolute;
	top: 0;
	color: floralwhite;
	text-shadow: 0px 0px 1px darkslategrey;
	background-color: /*rgba(245, 245, 245, 0.8)*/rgba(10,10,0,0.5);
	overflow-y: scroll !important;
	box-sizing: border-box;
	padding-left: 5vh;
	padding-right: 5vh;
	}
#productInfo img.framed{
	border: outset 5px peru;
	border-left: inset 5px peru;
	border-bottom: inset 5px peru;
	}
#productInfo img:hover{ cursor: crosshair;}
.productNav{
	position: fixed;
	width: 5rem;
	height: 5rem;
	top: calc(50% - 5rem / 2);
	background: none;
	border:none;
	z-index: 1;

}
#productPrev{
	left: 10vw;
	padding-left: 5px;
}
#productNext{
	left: calc(90vw - 5rem);
	padding-right: 5px;
}
.productNav button{
	width: 100%;
	height: 100%;
	font-size: 5rem;
	color: antiquewhite;
	border: none;
	background: none;
	opacity: 1;
	display: grid;
	align-content: center;
	padding-inline-start: 0px;
	padding-inline-end: 0px;
	}
.productNav button:hover{ 
	cursor: pointer;
	color: goldenrod;}

/* Add to Cart and Checkout */
#actionButtons input[type="radio"]
{
	display: none;
}

#actionButtons button
{
	width: 100%;
	height: 100%;
	position: relative;
	display: none;
	background: transparent;
	font-size: 2rem;
	color: goldenrod;
	cursor: pointer;
	border: none;
}
#actionButtons button div
{
	position: absolute;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	display: none;
	top: 0px;
	left: 0px;
	color: goldenrod;
	min-height: 1.5rem;
}

#actionButtons button div:first-child
{
	display: flex;
}

.addToCart
{
	position: relative;
	height: 2rem;
	overflow: hidden;
}

.addToCart[data-instock="false"]
{
	pointer-events: none;
	cursor: not-allowed;
}

.addToCart[data-instock="false"] .addToCartDefault
{
	display: none;
}

.addToCart[data-instock="false"] .addToCartOutOfStock
{
	display: flex;
}

.addToCart div
{
	display: none;
	justify-content: center;
	width: 100%;
	height: 100%;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0px;
	left: 0px;
}

.addToCart div:first-child
{
	display: flex;
}

.addToCartSuccess
{
	background: teal;
}

.addToCartFailure
{
	background: crimson;
}

#actionButtonAddToCart:checked ~ #info #actionButtons .addToCart
{
	display: flex;
}

#actionButtonAddToCart:checked ~ #info #actionButtons .addToCart[data-instock="false"]
{
	pointer-events: none;
	cursor: not-allowed;
}

#actionButtonAddToCart:checked ~ #info #actionButtons .addToCart[data-instock="false"] .addToCartDefault 
{
	display: none !important;
}

#actionButtonAddToCart:checked ~ #info #actionButtons .addToCart[data-instock="false"] .addToCartOutOfStock
{
	display: flex;
}

#actionButtonCheckout:checked ~ #info #actionButtons #checkoutActions
{
	display: block;
}

#actionButtonCategoryNavToggle:checked ~ #info #actionButtons #categoryNavToggleActions
{
	display: block;
}

#actionButtonNone:checked ~ #info #actionButtons
{
	display: none;
}

#actionButtonDisabled:checked ~ #info #actionButtons button
{
	pointer-events: none;
	cursor: default;
}


/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --s: 50px; /*1.8em; /* the ribbon size */
  --d: .5em;  /* the depth */
  --c: .8em;  /* the cutout part */

  /*padding: var(--d) calc(var(--s) + var(--d) + .5em) 0;*/
  line-height: 1.8;
  background:
    linear-gradient(90deg,#0004 var(--d),#0000 0 calc(100% - var(--d)),#0004 0)
    50%/calc(100% - 2*var(--s)) 100% no-repeat;
  clip-path: polygon(0 0,var(--s) 0,calc(var(--s) + var(--d)) var(--d),calc(100% - var(--s) - var(--d)) var(--d),calc(100% - var(--s)) 0,100% 0,calc(100% - var(--c)) calc(50% - var(--d)/2),100% calc(100% - var(--d)),calc(100% - var(--s)) calc(100% - var(--d)),calc(100% - var(--s) - var(--d)) 100%,calc(var(--s) + var(--d)) 100%,var(--s) calc(100% - var(--d)),0 calc(100% - var(--d)),var(--c) calc(50% - var(--d)/2));
  background-color: coral; /* the main color */
  /**width: fit-content;*/
}
/** Animation Toggles */

#categoryToggle:checked ~ #categoryNav
{
	height: 100%;
}

#categoryToggle:checked ~ #productInfoContainer .productNav
{
	display: none;
}


#searchFilterToggle:checked ~ #searchDiv
{
	min-height: 100%;
	height: fit-content;
}

/* HTML: <div class="infoLoader"></div> */
.infoLoader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: infoLoaderAnimation 1s infinite linear;
}
@keyframes infoLoaderAnimation {to{transform: rotate(1turn)}}

#infoLoading
{
	background: rgba(0,0,0,0.8);
	justify-content: center;
	align-items: center;
	position: absolute;
}

#billingAddress label:nth-of-type(11)
{
	display: block;
	width: 0px;
	height: 0px;
	overflow: hidden;
	opacity: 0;
}

.myAccount-link
{
	text-decoration: none;
}

.myAccount-link:hover
{
	text-decoration: none;
}

#checkoutDetails div
{
	width: 100%;
}

.filterCategoryLabel span
{
	display: inline-block;
	padding: 5px;
	border: 5px solid grey;
	margin: 10px;
	color: antiquewhite;
	background: black;
	border: none;
	border-radius: 15px;
}
.filterCategoryLabel input:checked ~ span
{
	color: black;
	border: 2px solid rgb(10,10,0);
	background: rgba(218, 165, 32,0.9);
}