/** 2023 Copyright LUHELE LLC (tm) - Fifty and Naughty · Lucy Helen Lear **/

@font-face {
    font-family:"Lexend";
	src:url("Lexend.woff2") format("woff2");
	font-weight:400;
	font-style:bold;
	font-display:swap;
}

:root {
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;	
	--CornRad:6px;
	--FontFamily:Lexend;
	--FontSize:15px;
	--Padding:6px;
}

.preload-images {
	background-image: url(img/P-CoverTitle.svg), url(img/P-Cover01.webp), url(img/P-Cover02.webp), url(img/L-CoverTitle.svg), url(img/L-Cover01.webp), url(img/L-Cover02.webp);
}

@media all and (orientation:portrait) {
	:root {
		--title:url(img/P-CoverTitle.svg);
		--bgimg01:url(img/P-Cover01.webp);
		--bgimg02:url(img/P-Cover02.webp);
	}

	.News {
		top:69%;
		min-width:354px;
	}
}

@media all and (orientation:landscape) {
	:root {
		--title:url(img/L-CoverTitle.svg);
		--bgimg01:url(img/L-Cover01.webp);
		--bgimg02:url(img/L-Cover02.webp);
	}
	
	.News{
		top:16%;
	}
}

@keyframes AnimBgd {
    0%		{background-position:0% 100%}
    50%		{background-position:100% 10%}
    100%	{background-position:0% 100%}
}

@keyframes AnimPics {
	0%		{background-image:var(--title), var(--bgimg01)}
	25%		{background-image:var(--title), var(--bgimg01)}
	50%		{background-image:var(--title), var(--bgimg02)}
	75%		{background-image:var(--title), var(--bgimg02)}
	100%	{background-image:var(--title), var(--bgimg01)}
}

html {
	margin:0px;
	border:0px;
	height:100%;
	overflow:hidden;
	background:linear-gradient(107deg, #1270EB, #F875D8, #FE4949);
	background-size:600% 600%;
	animation:AnimBgd 17s ease infinite;
	font-family:var(--FontFamily);
	font-size:var(--FontSize);
}

body {
}

.Cover {
	position:fixed;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	background-repeat:no-repeat;
	background-position:center;
	background-image:var(--title), var(--bgimg01);
	background-size:contain;
	animation:AnimPics 27s ease infinite;
	z-index:1;
}

.Overlay {
	display:none;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	overflow:hidden;
	background:rgba(0, 0, 0, 0.69);
	z-index:100;
}

.Spinner {
	display:flex;
	xdisplay:none;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
	border:12px solid rgba(180,129,180,0.69);
	border-radius:50%;
	border-top:12px solid #DD2476;
	width:69px;
	height:69px;
	animation:Spinner 3s linear infinite;
	z-index:1000;
}



.News {
	background:linear-gradient(-69deg, #FF00FFAA, #FF7FFFAA, #FF7F77AA, #AA2769AA);
	background-size:400% 400%;
	animation:Ani_News 15s ease infinite;
	display:flex;
	position:absolute;
	left:50%;
	text-align:center;
	font-size:27px;
	transform:translate(-50%,-50%);
	border:1px solid #AA7777;
	border-radius:12px;
	padding:16px;
	xpadding-left:27px;
	xpadding-right:27px;
	z-index:100;
}


@keyframes Ani_News {
	0% {background-position:0% 50%;}
	50% {background-position:100% 50%;}
	100% {background-position:0% 50%;}
}


.News a {
	mix-blend-mode:difference;
	color:#F9629F;
	text-decoration:none;
}

@keyframes Spinner {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}

@keyframes rotate {
  0% {transform:rotate(0deg)}
  25% {transform:rotate(90deg)}
  50% {transform:rotate(180deg)}
  75% {transform:rotate(270deg)}
  100% {transform:rotate(360deg)}
}

@keyframes resize1 {
  0% {transform:scale(0.5)}
  33% {transform:scale(1.5)}
  66% {transform:scale(2)}
  100% {transform:scale(0.5)}
}

@keyframes flip {
  0% {transform:rotateY(0deg)}
  25% {transform:rotateY(90deg)}
  50% {transform:rotateY(180deg)}
  75% {transform:rotateY(270deg)}
  100% {transform:rotateY(360deg)}
}

#Spin1 {
  width:100px;
  height:100px;
  animation:resize 5s infinite linear;
}

#Spin2 {
  width:100px;
  height:100px;
  animation:rotate 2s infinite linear;
}

#Spin3 {
  width:100px;
  height:100px;
  animation:flip 3s infinite linear;
}

/** ======================================================================= **/


/** ======= Menu ========================================================== **/
/** ======= Menu Aligments ================================================ **/

.MenuTop {
	top:var(--Padding);
}

.MenuRight {
	right:var(--Padding);
	text-align:right;
}

.MenuRight .MenuItem::before {
	Content:"\00a0\00a0\00a0";
}

.MenuRight .MenuItem::after {
	xContent:"\00a0";
}

.MenuBottom {
	bottom:var(--Padding);
}

.MenuLeft {
	left:var(--Padding);
}

.MenuLeft .MenuItem::before {
	Content:"\00a0";
}

.MenuLeft .MenuItem::after {
	Content:"\00a0\00a0\00a0";
}

/** ======= Menu Button =================================================== **/

@keyframes menushow {
	from {display:inline-block;opacity:0;transform:translateY(36px)}
	to {transform:opacity:1;translateY(0px);}
}

@keyframes menuhide {
	from {display:inline-block;opacity:1;}
	to {display:none;opacity:0;}
}

.Menu {
	position:fixed;
	width:36px;
	height:36px;
	z-index:50;
}

.MenuButton {
	display:inline-block;
	width:36px;
	height:36px;
	background-color:rgba(0,0,0,0.27);
	border:none;
	border-radius:var(--CornRad);
	padding:3px;
	cursor:pointer;
	-webkit-box-shadow: 40px 37px 19px -2px rgba(0,0,0,0.69);
	-moz-box-shadow: 40px 37px 19px -2px rgba(0,0,0,0.69);
	box-shadow: 6px 6px 19px -2px rgba(0,0,0,0.69);
}

.MenuButton:hover, .SocialButton:hover {
	background-color:#FFA4BD;
}

.Menu:hover .MenuButton, .Menu.hover .SocialButton {
	animation:menuhide 690ms;
	display:none;
}

.Menu:hover .MenuItems {
	animation:menushow 1s;
	display:inline-block;
}

/** ======= Menu Items ==================================================== **/

.MenuItems {
	display:none;
	position:fixed;
	width:auto;
	border-radius:var(--CornRad);
	background-color:rgba(0,0,0,0.27);
	box-shadow:0px 12px 12px 0px rgba(0,0,0,0.4);
	box-shadow: 6px 6px 19px -2px rgba(0,0,0,0.69);
}

.MenuItems .MenuItem {
	display:block;
	color:#FFFFFF;
	padding:6px;
	text-decoration:none;
}

.MenuItems .MenuItem:hover {
	color:#000000;
	background-color:#FFA4BD;
	border-radius:0px;
}

.MenuItems .MenuItem:first-child:hover {
	border-top-left-radius:var(--CornRad);
	border-top-right-radius:var(--CornRad);
}

.MenuItems .MenuItem:last-child:hover {
	border-bottom-left-radius:var(--CornRad);
	border-bottom-right-radius:var(--CornRad);
}

.MenuItems svg {
	width:30px;
	height:30px;
	vertical-align:middle;
	padding-left:6px;
	padding-right:6px;
}

.Menu hr {
	display:block;
	height:1px;
	border:0;
	border-top: 1px solid rgba(255,255,255,0.27);
	width:69%;
	xmargin-top:0.27em;
	margin-bottom:0.27em;
}

/** ======================================================================= **/


/** ======= Footer ======================================================== **/

.footer {
	position:absolute;
	display:inline;
	bottom:0px;
	left:0px;
	width:100%;
	height:18px;
	background-color:rgba(0,0,0,0.27);
	padding:3px 9px 0px 0px;
	font-family:var(--FontFamily);
	font-size:12px;
	color:#000000;
	text-align:center;
	z-index:10;

	width:348px;
	width:auto;
	margin:0;
	left:50%;
	transform:translate(-50%,0);
	border-top-right-radius:var(--CornRad);
	border-top-left-radius:var(--CornRad);
}

.footer .MenuItem {
	display:inline;
	color:#000000;
	cursor:pointer;
	margin-left:9px;
	margin-right:9px;
}

.footer .MenuItem:hover {
	color:#FFFFFF;
}

pre {
	font-family:var(--FontFamily);
	font-size:12px;
}


/** ======================================================================= **/

/** ======= PopUp Modules ================================================= **/

.Module {
	xdisplay:inline-block;
	display:none;
	position:absolute;
	top:calc(50%);
	left:calc(50%);
	transform:translate(-50%, -50%);
	border:0px none;
	border-radius:var(--CornRad);
	padding:12px;
	width:300px;
	height:auto;
	overflow:hidden;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	box-shadow:6px 21px 51px rgba(0,0,0,0.69);
	font-family:var(--FontFamily);
	text-align:justify;
	text-justify:inter-character;
	color:#FFFFFF;
	background-color:rgba(255,105,180,.27);
	z-index:200;
}

.Module h1 {
	font-size:21px;
	font-weight:bold;
	text-align:center;
}

.Module p {
	margin:18px;
}

.Module textarea, input {
	display:flex;
	color:#000000;
	background:#e0dede;
	width:80%;
	font-family:var(--FontFamily);
	font-size:var(--FontSize);
	margin:6px auto;
	padding:var(--Padding);
	border:none;
	border-radius:var(--CornRad);
	text-align:left;
	outline:none;
}

.Module button {
	position:relative;
	left:calc(50%);
	-ms-transform:translateX(-50%);
	transform:translateX(-50%);
	background-color:rgba(0,0,0,0.27);
	border:none;
	border-radius:var(--CornRad);
	color:#FFFFFF;
	text-align:center;
	text-decoration:none;
	cursor:pointer;
	box-shadow:0px 12px 12px 0px rgba(0,0,0,0.4);
	font-family:var(--FontFamily);
	font-size:var(--FontSize);
	padding:6px 12px 6px 12px;
	margin:12px 0px 18px 0px;
	max-width:80%;
}

.Module button:hover {
	color:#000000;
	background-color:#FFA4BD;
}

.Module ol {
	margin-left:6px;
	xpadding-right:6px;
}

.Module li {
	margin-left:-30px;
	padding-right:-30px;
	padding-top:15px;
}

.Info {
	width:80%;
	max-height:80%;
	font-size:12px;
	overflow-Y:auto;
}

.Terms, .Privacy {
	width:80%;
	max-height:80%;
	font-size:12px;
	overflow-Y:auto;
}	
	
textarea {
	resize:none;
	height:153px;
}




/** ======================================================================= **/

.S0 {
	display:inline-block;
}

.S1 {
	display:none;
}




.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	transform: translateY(100%);
	transition: transform 0.4s ease;
	background: rgba(0,0,0,0.8);
	color: white;
	padding: 10px;
	text-align: center;
	xz-index: 9999;
}

.footer.visible {
	transform: translateY(0);
}