:root {
	--discord-primary:			#bbd0ff		/*#5865F2*/;
	--twitch-primary: 			#CAB8FF		/*#9146FF*/;
	--youtube-primary:			#ffadad		/*#FF0000*/;
	--instagram-primary:		#F5B0CB		/*#FF0069*/;
	--bluesky-primary: 			#98D6EA		/*#0066fe*/;
	--primary-font-color:		#FFFFFF;
	--secondary-font-color:		#E1E5F9;
	--primary-font:				'Berkshire Swash';
	--primary-background-color: #181818;
	
}

/*.test{
  position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.doll > div{
	display: flex;
	justify-content: end;
}

.test > div{
	position: absolute;
	display: flex;
	justify-content: center;
	top: 0;
	right: -30%;
	width: 100%;
	transform: rotate(45deg);
	background-color: grey;
	border-color: #444444FF;
	border-style: dashed;
	border-width: 2px;
	border-left-width: 0;
	border-right-width: 0; 
}*/

@font-face {
    font-family: 'Heartless';
    src: url('fonts/Heartless.woff2') format('woff2'),
        url('fonts/Heartless.woff') format('woff'),
        url('fonts/Heartless.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Berkshire Swash';
    src: url('fonts/BerkshireSwash-Regular.woff2') format('woff2'),
        url('fonts/BerkshireSwash-Regular.woff') format('woff'),
        url('fonts/BerkshireSwash-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;	
}

body{
	display: flex;
	flex-direction: column; 
	background-color: #181818;
	margin: 0px;
	font-family: 'Berkshire Swash';
}

.showcase-caption{
	width: 100%;
	text-align: center;
	color: var(--secondary-font-color);
	flex-shrink: 0;
	font-family: 'Heartless';
	font-size: 60px;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	letter-spacing: 0.8rem;
	text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px,
				-5px 0 black, 0 5px black, 5px 0 black, 0 -5px black;
	margin: 30px 0px 0px 0px;
	user-select: none;
	-webkit-user-select: none;
}

.scrolling-background{
	position: fixed; 
	width: 100%; 
	height: 100%; 
	z-index: -1; 
	background-color: #262626;
	background-image: linear-gradient(
          rgba(0, 0, 0, 0.25), 
          rgba(0, 0, 0, 0.25)
        ),url("images/background.gif");
	background-repeat: no-repeat;
}

.spiderweb{
	position: absolute;
	width: 100px;
	user-select: none;
	-webkit-user-select: none;
}

.top-left{
	top: 0px;
	left: 0px;
}

.bottom-right{
	bottom: 0px;
	right: 0px;
}

.sticky{
	position: sticky;
	top: 0px;
}

.socials-showcase{
	display: flex;
	padding: 2rem;
	transform: scale(2) translate(-50%,-50%)
}

.spaced{
	margin: 5px !important;
}

.close{
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: white;
	font-family: 'Heartless';
	font-weight: bold;
	font-size: 18px;
	text-decoration: none;
	text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px,
				-5px 0 black, 0 5px black, 5px 0 black, 0 -5px black;
}

.view-centered{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.background-close{
	width:100vw;
	height:100vh;
	display:block;
	position:absolute;
	z-index:-1
}

.socials-showcase::after{
	color: rgb(100,100,100);
	margin: 20px 0px 0px 0px;
	font-size: 14px;
	content: "click outside to close";
}

.popup-title{
	font-size: 30px;
	letter-spacing: 0.5rem; 
	margin: 0px 0px 10px 0px;
}

.popup{
	position: fixed;
	width: 100vw;
	height: 100vh;
	visibility: hidden;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	z-index: 2;
}

.popup:target{
	visibility: visible;
	opacity: 1;
}

.main-menu {
	display: flex;
	width: 100%;
	margin: 0px;
	padding: 0px;
	z-index: 1;
	height: 20vh;
	align-items: start;
	background-color: rgba(0,0,0,0);
	box-shadow: inset 0px 110px 100px -40px black;
}

.main-menu > a{
	flex-grow: 1;
	text-decoration: none;
	color: white;
	text-align: center;
}

.main-menu > a > p{
	margin: 2rem 0;
}

.logo{
	align-self: center;
	width: 400px;
	filter: drop-shadow(0 0 2rem rgb(100, 100, 100));
	align-self: start;
	border: none;
}

.doll-showcase{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}

.doll{
	display:flex;
	flex-direction: column;
	margin: 20px;
	justify-content: end;
	align-items: center;
}

.streamer-caption:hover {
  box-shadow: rgba(200, 200, 200, 0.5) 0 1px 30px;
  transition-duration: .1s;
}

.doll-image{
	width: 100%;
	margin: 10px 0px;
	filter: drop-shadow(0 0 2rem rgb(100, 100, 100));
	max-width: 200px;
}

.caption{
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 10px 10px;
	margin: 0px;
	color: white;
	width: fit-content;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
	cursor: pointer;
	flex-shrink: 0;
	transition: all .5s;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	z-index: 0;
	text-decoration: none;
}

a.link::before{
	content: "🔗";
}

a.link-button{
	display: flex;
	-webkit-clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);
	clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);
	border-radius: 8px;
	border-style: none;
	box-sizing: border-box;
	padding: 0 1.5rem 0 0;
	text-shadow: rgba(0, 0, 0, 0.7) 0 3px 8px;
	width: unset;
	align-self: stretch;
	justify-content: unset;
}

.twitch{
	color: #FFFFFF;
	background-color: var(--twitch-primary);
}

.twitch:before{
	content: url("images/brands/twitch_icon_white.svg");
	width: 1rem;
	padding: 0 0.5rem 0 1rem;
}

.twitch:after{
	content: "Twitch";
	padding: 10px 10px;
}

.bluesky{
	color: #FFFFFF;
	background-color: var(--bluesky-primary);
}

.bluesky:before{
	content: url("images/brands/bluesky_icon_white.svg");
	width: 1rem;
	padding: 0 0.5rem 0 1rem;
}

.bluesky:after{
	content: "Bluesky";
	padding: 10px 10px;
}

.instagram{
	color: #FFFFFF;
	background-color: var(--instagram-primary);
}

.instagram:before{
	content: url("images/brands/instagram_icon_white.svg");
	width: 1rem;
	padding: 0 0.5rem 0 1rem;
}

.instagram:after{
	content: "Instagram";
	padding: 10px 10px;
}

.youtube{
	color: #FFFFFF;
	background-color: var(--youtube-primary);
}

.youtube:before{
	content: url("images/brands/youtube_icon_white.svg");
	width: 1rem;
	padding: 0 0.5rem 0 1rem;
}

.youtube:after{
	content: "Youtube";
	padding: 10px 10px;
}

.discord{
	color: #FFFFFF;
	background-color: var(--discord-primary);
}

.discord:before{
	content: url("images/brands/discord_icon_white.svg");
	width: 1rem;
	padding: 0 0.5rem 0 1rem;
}

.discord:after{
	content: "Discord";
	padding: 10px 10px;
}

.emote-showcase{
	display:flex;
	flex-direction: column;
	margin: 20px;
	padding: 20px;
	justify-content: end;
}

.emote{
	display: flex;
	margin: 0px 0px 30px 0px;
	flex-direction: column;
	align-items: center;
}

.emote-gallery{
	flex-shrink: 1;
	flex-wrap: wrap;
	padding: 20px;
}

.emote-gallery > img{
	max-width: 72px;
	filter: drop-shadow(0 0 1rem rgb(100, 100, 100));
	margin: 20px;
}

.container{
	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
	border:solid 5px rgba(0, 0, 0, 1);
	background-color: rgba(24, 24, 24, 0.8);
	flex-direction: column;
	align-items: center;
}