@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

html,body{
	font-family: "Fjalla One", sans-serif;
	color:#ffc44f;
	/*text-shadow:-1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;*/
	line-height:1.5;
	background-color:#000000;
	display:flex;
	align-items:center;
	justify-content:center;
}

h1,h2,h3{border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important; 
-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;}

.container{
	display:flex;	
	align-items:center;
	justify-content:center;
	top:0;
	left:0;
	} 
	
.portrait, .landscape{
	border-radius:20px;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
}

.overlay-popup, .overlay-popup2{
	z-index:1;
	background-color:rgba(0,0,0,0.6);
	position:fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
	display:none;
	align-items:center;
	justify-content:center;
}

.active-popup,.active-popup2{
	display:flex !important;
}
.click{
	display:flex;
	z-index:1;
	position:absolute;
	transform: translate(-462%,-103%);
	height:150px;
	animation-name: click;
    animation-duration: 30s;
    animation-iteration-count: 3;
	opacity:0;
    transition: none;
}

@keyframes click {
    0%   { opacity:0;}
	5%   { opacity:0;}
   20%   {opacity:1; }
   50%   {opacity:0; }
   100% { opacity:0; }
}
.desc{
	position:relative;
	display:flex;
	background-color:rgba(255,255,255,0.3);
	backdrop-filter: blur(20px);
	padding-bottom:5px;
	padding-left: 20px;
	padding-right:20px;
	border-radius:15px;
	box-shadow:5px 5px 15px rgba(0,0,0,0.3);
	height:355px;
	width:900px;
	text-align: justify;
}
.mensions{
	font-size:0.7rem;
	line-height:1.1;
	position:relative;
	display:flex;
	background-color:rgba(255,255,255,0.3);
	backdrop-filter: blur(20px);
	padding-bottom:5px;
	padding-left: 10px;
	padding-right:10px;
	border-radius:15px;
	box-shadow:5px 5px 15px rgba(0,0,0,0.3);
	height:115px;
	width:200px;
	transform: translate(40%,150%);
}

.desc button{
	border:0px;
	background-color:#4a2c06;
	color:#ffc44f;
	font-size:2rem;
	width:45px;
	height:45px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	position: absolute;
	top:-25px;
	right:-20px;
	cursor:pointer;
}

.mensions button{
	border:0px;
	background-color:#4a2c06;
	color:#ffc44f;
	font-size:2rem;
	width:45px;
	height:45px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	position: absolute;
	top:-15px;
	right:-10px;
	cursor:pointer;
}
@media (orientation: landscape) {
	
	.desc{
		font-size:1.1rem;
		line-height:1.6;
	}
	
	.portrait{
		display: none;
	}
	
	img{
		margin-top:0px;
	}
}

@media (orientation: portrait) {
	
	.click{
	z-index:1;
	display:flex;
	position:absolute;
	height:300px;
	transform: translate(-185%,-170%);
	animation-name: click;
    animation-duration: 30s;
    animation-iteration-count: 3;
	opacity:0;
    transition: none;
}
	.desc{
		font-size:2.2rem;
		line-height:1.5;
		backdrop-filter: blur(40px);
		background-color:rgba(255,255,255,0.3);
	/*	text-shadow:-2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black; */
		padding-bottom:5px;
		padding-left: 30px;
		padding-right:30px;
		border-radius:20px;
		box-shadow:10px 10px 30px rgba(0,0,0,0.3);
		height:1155px;
		width:950px;
	}
	
	.desc button,.mensions button{
		font-size:3rem;
		width:80px;
		height:80px;
		top:-45px;
		right:-25px;
	}
	
	.mensions{
		font-size:1.2rem;
		line-height:1.1;
		position:relative;
		display:flex;
		background-color:rgba(255,255,255,0.3);
		backdrop-filter: blur(40px);
		padding-bottom:5px;
		padding-left: 20px;
		padding-right:20px;
		border-radius:15px;
		box-shadow:10px 10px 30px rgba(0,0,0,0.3);
		height:205px;
		width:340px;
		transform: translate(80%,280%);
		
	}	
	.landscape{
		display: none;
	}
}