html, body {
	height: 100%;
	width:100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;    
	-ms-user-select: none;   
	user-select: none;
	-webkit-touch-callout: none; 
  
}
* {
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline: none;
}
body {
  height: 100%;
  position: fixed;
}
#back-drop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; 
  z-index: 1; 
  pointer-events:auto;
}

#lowbar{
	width:100%;
	height:12vmin;
	position:absolute;
	display:flex;
	flex-direction:row;
	flex-wrap:no-wrap;
	justify-content:space-between;
	align-items:center;
	background-color:black;
	z-index:4;
	bottom:0vmin; 
	mix-blend-mode:overlay;
	column-gap:2vmax;
	padding:0;
	margin:0;
	opacity:0;
	transition:opacity .5s ease;
	filter:invert(1);

}

.item{

	display:flex;
	flex-direction:row;
	justify-content:flex-end;
	align-items:center;
	padding:0;
	margin:0;
	column-gap:1vmax;
}
.item img{
	width:4vmin;
	height:auto;
	opacity:1;
	padding:0;
	margin:0;
	transform: translate(0.5vmin,0.3vmin) rotate(90deg);
}
#real-logo{

	margin-left:2vmin;
	height: 70%;
	aspect-ratio:1024/560; 
	filter:invert(1) contrast(200%);
	opacity:.92;
	align-self:center;

}
#lowbar h2{
	font-family: "Arial", sans-serif;
	font-weight: 100;
	font-size: 4vmin;
	color:white;
	opacity:1;
	line-height:1;
	margin:0;
	padding:0;
	opacity:.7;
	letter-spacing:-0.05em;
	white-space: nowrap;
	cursor: pointer;
}
#lowbar h4{
	font-family: "Arial", sans-serif;
	font-weight: 100;
	font-size: 3.6vmin;
	color:white;
	line-height:1;
	margin:0;
	padding:0;
	opacity:.65;
	letter-spacing:-0.05em;
	white-space: nowrap;
	cursor: pointer;
}
#menu{
	display:flex;
	flex-direction:row;
	column-gap:2vmax;
	
}
#vert{
	display:flex;
	flex-direction:column;	
	row-gap:.8vmin;
	margin-right:3vmin;
}
#language-selector{
	display:flex;
	flex-direction:row;
	justify-content:flex-end;
	column-gap:1em;
}

#s, #e{
	background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  opacity:.6;

}
#welcome-rec{

	width:50vmin;
	background-color:#817b62;
	color:white;
	aspect-ratio: 1 / 1;      
	position:absolute;
	bottom:20vmin;
	right:1vmax;
	transform-origin: bottom right;
	transform:scale(0.8) translate(0,4vmin);
	padding:0;
	margin:0;
	z-index:4;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:space-around;
	opacity:0;
	transition:opacity .5s ease;
	row-gap:1.5vmin;
}
@font-face {
    font-family: "Arial";
    src: url("./fonts/arialbd.ttf") format("truetype");
    font-weight: 300;
    font-style:normal;
}
@font-face {
    font-family: "Arial";
    src: url("./fonts/arial.ttf") format("truetype");
    font-weight: 100;
    font-style:normal;
}
#welcome-rec h2{
	width:100%;
	font-family: "Arial", sans-serif;
	font-weight: 300;
	font-size: 5vmin;
	opacity:1;
	line-height:.85;
	padding:0;
	letter-spacing:-0.03em;
	text-align:left;
	word-spacing:0.2em;
	margin:2vmin;
	max-width: 16ch;	
	margin-bottom:0;
	flex-grow:2;
}
#welcome-rec h3{
	width:100%;
	font-family: "Arial", sans-serif;
	font-weight: 100;
	font-size: 2.5vmin;
	line-height:1;
	padding:0;
	opacity:.5;
	letter-spacing:0.02em;
	text-align:left;
	word-spacing:0.2em;
	margin:2vmin;
	max-width: 24ch;
	margin-top:0;
	margin-bottom:0.25vmin;
	flex-grow:2;
}
#close{
	flex-grow:3;
 display: flex;
  align-items: center;
  justify-content: space-between;
max-height:10%;
  width: 92%;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:2vmin;

  background-color: #ffffff;
  border: none;
  cursor: pointer;
	
  font-family: "Arial", sans-serif;

}
#close img{
  height: 4vmin;
aspect-ratio:1;
  transform: rotate(180deg);

  margin-right:2vmin;
}
#close-text{
  font-weight: 300;
  font-size: 3vmin;
  color: #817b62;
  line-height: 1;
  white-space: nowrap;
  margin-left:2vmin;
}
#collection{
  width: 80%;
  height: 40cqh;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity:0;
  pointer-events: none;
  z-index: 6;
  border: none;
  mix-blend-mode: normal;
  transition:opacity .5s ease;
}
#tut{
	font-family: "Arial", sans-serif;
	font-weight: 100;
	font-size: 2.5cqh;
	color:white;
	opacity:0;
	line-height:1;
	padding:0;
	letter-spacing:-0.02em;
	position:absolute;
	width:fit-content;
	height:fit-content;
	z-index:7;
	top: 55%;
	left: 50%;
	text-align:center;
	transform: translate(-50%, -40%);
	transition:opacity .2s ease;
	pointer-events:none;
	background-color:#817b62;
	padding:1.25%;
}
#hscroll{

	width:80%;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	padding:0;
	position:absolute;
	height:fit-content;
	z-index:7;
	top: 58%;
	left: 50%;
	opacity:.5;
	transform: translate(-50%, -40%);
	transition:opacity .2s ease;
}
#hscroll img{
	width:8vmax;
	max-width:120px;
	aspect-ratio:1;
	transition:opacity .2s ease;
	cursor:pointer;
	pointer-events:auto;
}
#backward{
	transform: rotate(0.5turn);

}
.searchInput {

    padding: 0.5vmin 0.25vmin ;
    width: 30%;
    height: 4vmin;
    position: fixed;
    top: 2.75%;
    left: 0;     
    right: 0;    
    margin-left: auto;
    margin-right: auto;
    z-index: 20;
    display: block;  
    border:none;
    opacity:0;
    color:white;
    transition:opacity .3s ease;

}
.searchInput::placeholder {
    color: white;      
    opacity: 0.3;      
}
#blury{
	   background-color: #817b62;

	   opacity:0;
	   border-radius:0.09vmax;
	   display:flex;
	   justify-content:flex-end;
	   transition:opacity .3s ease;
}
#blury img{
	height:100%;
	aspect-ratio:1;
	margin-right:2%;
	transform:scale(1.01);
	filter:invert(1);
}
#box{
	   background-color: transparent;
	   font-family: "Arial", sans-serif;
	font-weight: 100;
	font-size: 4vmin;
	padding-left:2vmax;
	opacity:.7;
		
}
@media (orientation: portrait) {
.searchInput {

    padding: 0.5vmin 0.25vmin ;
    width: 55%;
    height: 3.2vmax;
    position: fixed;
    top: 0;
    left: 0;    
    right: 0;     
    margin-left: auto;
    margin-right: auto;
    margin-top:2.6vmax;
    z-index: 20;
    display: block; 
    border:none;
    opacity:0;
    color:white;
    transition:opacity .3s ease;

}
#blury{
	   background-color: #817b62;
	   opacity:0;
	   border-radius:0.09vmax;
	   transition:opacity .3s ease;
	   
}
#box{
	   background-color: transparent;
	   font-family: "Arial", sans-serif;
	font-weight: 100;
	font-size: 3.0vmax;
		
}
#lowbar{
	transform:scale(1.02);
	transform-origin:bottom center;
}
#lowbar h2{
	font-family: "Arial", sans-serif;
	font-weight: 100;
	font-size: 4.5vmin;
	color:white;
	opacity:1;
	line-height:1;
	margin:0;
	padding:0;
	opacity:.7;
	letter-spacing:-0.05em;
	white-space: nowrap;
	cursor: pointer;
}	
#welcome-rec{

	width:50vmin;
	background-color:#817b62;
	color:white;
	aspect-ratio: 1 / 1;      
	position:absolute;
	bottom:24vmin;
	right:1vmax;
	transform-origin: bottom right;
	transform:scale(1.2) translate(0,4vmin);
	padding:0;
	margin:0;
	z-index:4;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:space-around;
	opacity:0;
	transition:opacity .5s ease;
	row-gap:1.5vmin;
}	
#tut{
	font-family: "Arial", sans-serif;
	font-weight: 100;
	font-size: 2.5cqh;
	color:white;
	opacity:0;
	line-height:1;
	padding:0;
	letter-spacing:-0.02em;
	position:absolute;
	width:fit-content;
	height:fit-content;
	z-index:7;
	top: 55%;
	left: 50%;
	text-align:center;
	transform: translate(-50%, -25%);
	transition:opacity .2s ease;
	pointer-events:none;
	background-color:#817b62;
	padding:1.25%;
}	

#hscroll{

	width:80%;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	padding:0;
	position:absolute;
	height:fit-content;
	z-index:7;
	top: 58%;
	left: 50%;
	opacity:.5;
	transform: translate(-50%, -25%);
	transition:opacity .2s ease;
}	
	
}