.title-position {
	color: var(--orange);
}

.fanfic-container {
	padding: var(--margin);
	display: flex;
	/* flex-direction: column; */
	gap: var(--margin);
}

/* FANFICTION */

.filter-rating {
	padding: 0;
}

#btns {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
/* .fanfic-container #viewAll {
	border: 2px solid var(--green);
} */

.fanfic-container #viewAll.active {
	background-color: var(--orange);
	border-color: var(--orange);
}
/* .fanfic-container .filter-button.view-all.inactive {
	color: var(--green);
} */
.fanfic-container .filter-button.selected, .fanfic-container #viewAll.selected {
  background-color: var(--orange);
}

.fanfic-container .filter-button.active {
  background-color: var(--orange);
  color: var(--white);
}

#fanfiction-grid {
	display: flex;
	flex-direction: column;
	gap: var(--gutter);
	width: calc(100vw - 20vw);
}

.fic-container {
	display: flex;
	gap: var(--gutter);
}

.fic-img img {
	width: 100px;
	border-radius: 5px;
}

.fic-content {
	display: flex;
	justify-content: space-between;
	gap: var(--margin);
	flex: 1;
}

.fic-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	min-width: 0; /* prevents overflow from long text */
}
.fic-info {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	font-size: var(--small-text);
	font-weight: 700;
	text-transform: uppercase;
}
.fic-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	font-size: var(--small-text);
	font-weight: 700;
	text-transform: uppercase;
}

.fic-links {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 200px;
	flex-shrink: 0;
	align-self: flex-start;
}
.fic-platforms {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.fic-platforms a {
	padding: 5px 7px;
	border-radius: 5px;
	border: 1px solid var(--grey);
	text-decoration: none;
	font-size: var(--small-text);
	cursor: pointer;
	font-weight: 500;
}
.fic-platforms a:hover {
	background-color: var(--orange);
	color: var(--white);
	border-color: var(--orange);
}
.fic-note {
	font-size: var(--small-text);
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.fic-note span {
	font-weight: 700;
	text-transform: uppercase;
}


/* FILTER */

.filter-container {
	/* position: fixed; */
	width: 20vw;
	height:fit-content;
	/* max-height: 80vh; */
	/* overflow-y: auto; */
	border: 1px solid var(--grey);
	border-radius: 5px;
	padding: var(--gutter);
	padding-right: calc(var(--gutter) + 5px);
	display: flex;
	flex-direction: column;
	gap: var(--gutter);
}

#search-container {
	/* max-width: calc(20vw - 40px); */
	justify-content: unset;
	width: 100%;
}

#viewAll {
	font-size: var(--med-text);
	border: 1px solid var(--grey);
	padding: 5px 7px;
	border-radius: 5px;
	cursor: pointer;
	width: 100%;
	transition: all 0.2s;
}

#viewAll.active {
	background-color: var(--orange);
	color: var(--white);
	border-color: var(--orange);
}
.filter-button.view-all.inactive {
	background-color: var(--white);
}

.filter-container h3 {
	text-transform: uppercase;
	font-size: var(--med-text);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--grey);
}

.filter-span {
	display: flex;
	flex-direction: column;
}
.filter-group {
	padding: 10px 0;
	display: flex;
	flex-direction: column;
}

.filter-button {
	background-color: transparent;
	border: none;
	padding: 5px 7px;
	border-radius: 5px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	text-align: center;
	font-size: var(--med-text);
}

.filter-button:hover {
	background-color: var(--grey);
}

.filter-button.selected, #viewAll.selected {
  background-color: var(--orange);
  color: var(--white);
}

.filter-group {
	display: flex;
	flex-direction: column;
}

.filter-container p {
	font-size: var(--small-text);
	font-weight: 400;
	font-style: italic;
}

.type-filter .filter-group {
	flex-direction: row;
	gap: 5px;
}
.type-filter {
	display: flex;
	gap: var(--gutter);
	align-items: baseline;
}
.type-filter .filter-group button {
	border: 0.5px solid var(--grey);
}
.type-filter .filter-button.selected {
	border: 0.5px solid var(--orange);
}

#toggle-mature {
  border: 1px solid var(--grey);
}



@media (max-width: 1050px) {

	.filter-container {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
	}

	#search-container {
		width: 100%;
	}
	#search-bar {
		width: 100%;
	}

	#btns {
		width: 100%;
	}

	#fanfiction-grid {
		gap: 30px;
	}

	.fanfic-container {
		flex-direction: column;
	}

	.fic-container {
		gap: 30px;
	}

	.fic-content {
		flex-direction: column;
		gap:var(--gutter);
	}
	.fic-links {
		max-width: 100%;
		gap:var(--gutter);
	}
	.fic-platforms {
		display: flex;
		flex-direction: row;
		gap: var(--gutter);
	}
}

@media (max-width: 750px) {

	.filter-container {
		width: 100%;
		flex-direction: column;
	}
	.fanfic-container {
		flex-direction: column;
	}
	.filter-container, #fanfiction-grid {
		width: 100%;
	}

	.fic-container:not(:last-child) {
	border-bottom: 1px solid var(--grey);
	padding-bottom: var(--margin);
}
}

@media (max-width: 450px) {

#search-container {
	margin-bottom: var(--gutter);
}

.fic-container {
	flex-direction: column;
}

.fic-img img {
	width: 100%;
}
img[src="../images/ff covers/ff cover.jpg"] {
    display: none;
  }
}