@import url('https://fonts.googleapis.com/css2?family=Kumar+One&display=swap');
/* ------------------------------RESET------------------------------ */
* {
	box-sizing: border-box;
}
html,body {
	margin: 0;
	padding: 0;
	scrollbar-color: #abbe34 #1c1c1c;
	scrollbar-width: thin;
}
body {
	background: #cbcbcb;
	color: #222;
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	line-height: 1.6;
	background: url('bg.png') fixed #333;
	cursor: default;
}
a {
	text-decoration: none;
	color: inherit;
}
::selection {
	background-color: black;
	color: white;
}
/* ------------------------------CONTAINER------------------------------ */
.container {
	width: 100%;
	max-width: 700px;
	margin: 30px auto;
	background: #fffef7;
	border: 2px dashed #7f1c9c;
	box-shadow: rgba(255, 255, 255, 0.2) 0px 15px 85px 0px;
}
/* ------------------------------TITLE + NAVIGATION------------------------------ */
.topbar {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	background-color: #000;
	position: sticky;
	top: 0;
	z-index: 1000;
}
.site-title {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	text-transform: uppercase;
	font-family: "Kumar One", serif;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	transform: translateY(6px);
}
.site-title a {
	color: white;
	text-decoration: none;
	transition: color .15s ease-in-out;
}
.site-title a:hover {
	color: #89d6a7;
}
/* ------------------------------NAVIGATION------------------------------ */
.menu {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
}
.menu a {
	display: flex;
	align-items: center;
	padding: 0 15px;
	color: #fff;
	background-color: #000;
	border-bottom: 3px solid transparent;
	text-decoration: none;
	transition:background-color 0.25s ease,border-color 0.25s ease;
}
.menu a:hover {
	background-color: #686868;
}
/* individual hover border colors */
.menu a:nth-child(1):hover {
	border-bottom-color: #c82f34;
}
.menu a:nth-child(2):hover {
	border-bottom-color: #d9862b;
}
.menu a:nth-child(3):hover {
	border-bottom-color: #abbe34;
}
.menu a:nth-child(4):hover {
	border-bottom-color: #47996f;
}
.menu a:nth-child(5):hover {
	border-bottom-color: #21b6d1;
}
.menu a:nth-child(6):hover {
	border-bottom-color: #7f1c9c;
}
/* ------------------------------CURRENT PAGE------------------------------ */
.menu a:nth-child(1).current {
	background-color: #c82f34;
	border-bottom-color: #c82f34;
}
.menu a:nth-child(2).current {
	background-color: #d9862b;
	border-bottom-color: #d9862b;
}
.menu a:nth-child(3).current {
	background-color: #abbe34;
	border-bottom-color: #abbe34;
}
.menu a:nth-child(4).current {
	background-color: #47996f;
	border-bottom-color: #47996f;
}
.menu a:nth-child(5).current {
	background-color: #21b6d1;
	border-bottom-color: #21b6d1;
}
.menu a:nth-child(6).current {
	background-color: #7f1c9c;
	border-bottom-color: #7f1c9c;
}
/* ------------------------------HEADER IMAGE------------------------------ */
.header {
	width: 100%;
	overflow: hidden;
}
.header img {
	display: block;
	width: 100%;
	max-width: 700px;
}
/* ------------------------------FANATICALLY------------------------------ */
.fan-owned-category-nav a,.fan-joined-category-nav a {
	color: white !important;
	background: rgba(20,20,20,1) url(bg.jpg) !important;
	border-radius: 0 !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border: 0 !important;
}
.fan-owned-category-nav .fan-cat-active,.fan-joined-category-nav .fan-cat-active {
	background: #7f1c9c !important;
}
.fan-joined-category-nav a::before, .fan-owned-category-nav a::before, .fan-size-nav a::before {
	display: none;
}
.fan-donate-toggle, input[type=text], input[type=password], input[type=url], input[type=email], input[type=file], textarea, select {
	background: #f2f1f1 !important;
	border: 0;
	color: inherit;
	font-family: inherit;
	box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2);
	border: 2px dashed #7f1c9c;
}
input[type=text]:hover, input[type=password]:hover, input[type=url]:hover, input[type=email]:hover, input[type=file]:hover, textarea:hover, select:hover,input[type=text]:focus, input[type=password]:focus, input[type=url]:focus, input[type=email]:focus, input[type=file]:focus, textarea:focus, select:focus {
	background: #dccde1 !important;
	border-radius:0px !important;
}
.fan-donate-toggle {
	display: block;
	width: fit-content !important;
	background-color: #222 !important;
	color: #fff;
	padding: 4px 6px !important;
}
.fan-form button[type=submit] {
	padding: 8px 22px;
	background: #222;
	color: #fff;
	font-family: inherit;
	font-size: medium;
}
/* ------------------------------CONTENT------------------------------ */
.content {
	padding: 20px;
}
h1 {
	margin:0 0 10px;
	text-align: center;
	font-family: "Kumar One", serif;
	background: url(stripe.gif);
	text-shadow: 1px 4px 1px rgba(0,0,0,0.16);
	text-transform: uppercase;
	letter-spacing: 3px;
	padding: 12px 0 8px;
	line-height: 1;
	font-size: 1.8rem;
	font-weight: 400;
	border-bottom: 2px solid black;
}
h2 {
	background: url(stripe.gif);
	text-align: center;
	font-family: "Kumar One", serif;
	text-shadow: 1px 4px 1px rgba(255, 255, 255, 1);
	border-bottom: 1px solid black;
	font-size: 1.2rem;
	padding: 10px 0 5px;
	line-height: 1;
}
h3 {
	font-family: "Kumar One", serif;
	font-size: 1rem;
}
h3 a {
	padding-top: 4px !important;
}
strong, b {
	color: #7f1c9c;
}
u {
	text-decoration: none;
	color: #ca0b7b;
	border-bottom:1px dashed #ca0b7b;
}
p i, p em {
	color: #d9862b;
	font-family: Georgia, 'Times New Roman', Times, serif;
	letter-spacing: 1px;
}
.content a, .fan-owned-category-nav a {
	color: #222;
	padding: 1px 4px;
	text-decoration: none;
	background-color: #89d6a7;
	transition: background .2s ease-in-out, color .2s ease-in-out;
	background-image: url(noisy.png);
}
.content a:hover {
	color: #fff;
	background-color: #000;
	background-image: url(bg.jpg);
}
.content a:active, .content a:focus {
	color: #fff;
	background-color: #ca0b7b;
}
/* Links containing images */
.content a:has(img) {
	padding: 0;
	background: none;
}
.content a:has(img):hover {
	background: none;
}
.text-center {
	text-align: center;
}
.updates p {
	font-size: 0.9rem;
}
.credits ul {
	list-style-type: square;
}
.credits li {
	display:inline-block;
	width:49%;
}
blockquote.collective-stats {
    padding: 5px 10px;
    background: #212121;
    color: #e3e3e3;
	margin: 5% 2%;
}

blockquote.collective-stats a, footer a {
	background: url(bg.png);
	color: white;
}

blockquote.collective-stats b {
	color: #a122c7;
}

applause-button {
    display: inline-block;
    width: 38px !important;
    vertical-align: middle;
    margin-left: 6px;
}

applause-button .style-root {
    flex-direction: row-reverse;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

applause-button .clap-count {
    font-size: 0.9rem;
    white-space: nowrap;
}

.fan-joined-listing-item img {
	padding: 6px !important;

	
	background: url(stripe.gif) !important;
}
.fan-joined-listing-item img:hover {
	padding: 6px !important;
		background: #b7b7b7 !important;
}

.fan-affiliates-list a {
    display: inline-block;
    line-height: 0;
}

.fan-affiliates-list img {
    display: block;
}


/* ------------------------------FANLISTING GRID------------------------------ */
.fan-owned-category-heading {
	display: none;
}
.owned-listing-item {
	margin-bottom: 20px;
}
.owned-listings {
	width: 100%;
	margin-top: 30px;
}

@media (max-width: 600px) {
	.owned-listing-item {
		flex-direction: column;
		align-items: stretch;
	}
	.owned-listing-item a:has(img) {
		width: 100%;
	}
	.owned-listing-item a:has(img) img {
		width: 100%;
	}
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    align-items: start;
}

.image-grid .fan-owned-category-group,
.image-grid .fan-owned-listings-list {
    display: contents;
}

.image-grid .owned-listing-item {
    display: block;
    width: auto;
    margin: 0;
}

.image-grid .owned-listing-item a:has(img) {
    display: block;
    width: fit-content;
    margin: auto;
}

.image-grid .owned-listing-item img {
    display: block;
    width: 100%;
    max-width: 150px !important;
    height: auto;
	opacity: 0.85;
	padding:10px;
	background: #ccc;
}

.image-grid .owned-listing-item img:hover {
    display: block;
    width: 100%;
    max-width: 150px !important;
    height: auto;
	opacity: 1;
	padding:10px;
	background: url(stripe.gif);
}

.content img {
	opacity: 0.85;
}
.content img:hover {
	opacity: 1;
}

.affiliate-item img {
	padding:6px;
	background: url(stripe.gif);
}
.affiliate-item img:hover {
	padding:6px;
	background: #b7b7b7;
}
.fan-affiliates-list {
	text-align: center;
}

@media (max-width: 600px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 350px) {
    .image-grid {
        grid-template-columns: 1fr;
    }
}






/* ------------------------------FOOTER------------------------------ */
.footer {
	padding: 10px 20px;
	text-align: center;
	background-color: black;
	border-top: 1px solid #ddd;
	color: white;
	font-size: 12px;
	font-style: italic;
}
.footer a {
	font-weight: 600;
}
/* ------------------------------MOBILE------------------------------ */
@media (max-width: 700px) {
	.container {
		border: 0px;
		margin: 0;
	}
	.topbar {
		flex-direction: column;
	}
	.site-title {
		width: 100%;
	}
	.menu {
		width: 100%;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.menu a {
		padding: 10px 15px;
	}
	.content {
		padding: 25px 20px;
	}
	.footer {
		padding: 20px;
	}
	h1 {
		font-size: 1.4rem;
	}
}