/*FEATURED*/
/*FRAMES*/

.featured-regular-outline {
	height: 100px;
	background: black;
	padding: 3px;
	margin-right: 10px;
	}
.featured-regular {
	transition: opacity 0.5s ease-in-out;
	height: 94px;
	width: 160px;
	}

.featured-top-outline {
	height: 106px;
	clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 6% 100%);
	background: black;
	padding: 3px;
	top: -10px;
	position: relative;
	}
.featured-top {
	clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 6% 100%);
	transition: opacity 0.5s ease-in-out;
	height: 100px;
	width: 174px;
	}

.featured-middle-outline {
	height: 106px;
	clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 6% 100%);
	background: black;
	padding: 3px;
	position: relative;
	}
.featured-middle {
	clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 6% 100%);
	transition: opacity 0.5s ease-in-out;
	height: 100px;
	width: 162px;
	}

.featured-bottom-outline {
	height: 106px;
	clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 6% 100%);
	background: black;
	padding: 3px;
	top: 10px;
	position: relative;
	}
.featured-bottom {
	clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 6% 100%);
	transition: opacity 0.5s ease-in-out;
	height: 100px;
	width: 150px;
	}

.featured-left-outline {
	height: 106px;
	clip-path:polygon(0% 0%, 100% 0%, 89% 100%, 0% 100%);
	background: black;
	padding: 3px;
	left: 6px;
	position: relative;
	}
.featured-left {
	clip-path:polygon(0% 0%, 100% 0%, 89% 100%, 0% 100%);
	transition: opacity 0.5s ease-in-out;
	height: 100px;
	width: 165px;
	}

.featured-center-outline {
	height: 106px;
	clip-path:polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
	background: black;
	padding: 3px;
	position: relative;
	}
.featured-center {
	clip-path:polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
	transition: opacity 0.5s ease-in-out;
	height: 100px;
	width: 180px;
	}

.featured-right-outline {
	height: 106px;
	clip-path:polygon(11% 0%, 100% 0%, 100% 100%, 0% 100%);
	background: black;
	padding: 3px;
	left: -6px;
	position: relative;
	}
.featured-right {
	clip-path:polygon(11% 0%, 100% 0%, 100% 100%, 0% 100%);
	transition: opacity 0.5s ease-in-out;
	height: 100px;
	width: 165px;
	}



/*NONE*/
.featured-null {
	height: inherit;
	background-position: center;
	background-size: 5px 5px;
	background-image: var(--dot-dark);
	transition: opacity 0.5s ease-in-out;
	background-color: var(--secondary);
	}
.featured-null::after {
	content: "";
	inset: 0;
	background-image: url(./files/static.gif);
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	background-position: center;
	height: inherit;
	display: block;
	background-size: cover;
	}
.featured-null:hover::after {
	opacity: 1;
	}




/*		GAMES		*/




/*PERSONALITY TEST*/
.featured-personality {
	height: inherit;
	background-position: center;
	background-size: cover;
	background-image: url(./files/featured_personality.gif);
	transition: opacity 0.5s ease-in-out;
	}
.featured-personality::after {
	content: "";
	inset: 0;
	background-image: url(./files/featured_personality_prev.gif);
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	background-position: center;
	height: inherit;
	display: block;
	}
.featured-personality:hover::after {
	opacity: 1;
	}

/*CHARACTER CREATOR*/
.featured-creator {
	height: inherit;
	background-position: center;
	background-size: cover;
	background-image: url(./files/featured_creator.gif);
	transition: opacity 0.5s ease-in-out;
	}
.featured-creator::after {
	content: "";
	inset: 0;
	background-image: url(./files/featured_creator_prev.gif);
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	background-position: center;
	height: inherit;
	display: block;
	}
.featured-creator:hover::after {
	opacity: 1;
	}