/* Hello, traveller */

/* Colours */

/* Default Theme*/
:root, [data-selected-theme="dark"] {
	--background: #001219;
	--text: #A6D4D4;
	--link: #f2ad68;
	--link-hover: #fc9126;
	--main: linear-gradient(90deg, rgba(9, 44, 57, 0.6), rgba(0, 22, 26, 0.6));
	--border: #719fb0;
	--sidebar: linear-gradient(270deg, rgba(9, 44, 57, 0.6), rgba(0, 22, 26, 0.6));
	--navigation: linear-gradient(90deg, rgba(15, 30, 55, 0.4), rgba(147, 173, 159, 0.4));
	--content: #012e40;
	--scrollbar: #001219;
}

/* Light Theme */
[data-selected-theme="light"] {
	--background: #FCDBB7;
	--text: #9D300B;
	--link: #BD250A;
	--link-hover: #F33312;
	--main: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 30%, rgba(255, 224, 188, 0.6));
	--border: #a6200a;
	--sidebar: linear-gradient(270deg, rgba(255, 255, 255, 0.6) 30%, rgba(255, 224, 188, 0.6));
    --navigation: linear-gradient(90deg, rgba(255, 142, 69, 0.4), rgba(255, 239, 200, 0.4));
	--content: #F5E1CB;	
	--scrollbar: #FCDBB7;
}

/* Cyberpunk Theme */
[data-selected-theme="cyber"] {
	--background: linear-gradient(0deg, rgb(7,14, 20) 60%, rgb(82, 0, 0));
	--text: #952D2C;
	--link: #1B9298;
	--link-hover: #dbb51a;
	--main: rgba(7, 8, 13, 0.3);
	--border: #9d3633;
	--sidebar: rgba(7, 8, 13, 0.3);
    --navigation: linear-gradient(90deg, rgb(51, 1, 0), rgb(0, 30, 36));
	--content: #190F17;	
	--scrollbar: #1F0101;
}
 /* Theme Switcher */
.theme-switcher {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin: 0.8rem;
	font-size: 1.312rem;
}

button[data-theme] {
	background-color: var(--background);
	color: var(--text);
	border: solid 1px var(--border);
	padding: 0.5rem;
	font-family: BFA;
}
		
button[data-theme]:is(:hover, :focus) {
  box-shadow: 0 0 0 1px var(--text) inset;
}

/* Fonts */
@font-face {
	font-family: AGBook;
	src: url('../fonts/AG-Book-Rounded-Regular.otf');
}

@font-face {
	font-family: BFA;
	src: url('../fonts/BatmanForeverAlternate.ttf');
}

@font-face {
	font-family: Rising;
	src: url('../fonts/Rising.ttf');
}

@font-face {
	font-family: AgencyB;
	src: url('../fonts/AgencyB.ttf');
}

/* Core Layout */

body {
	font-family: AGBook, sans-serif;
	min-height: 100vh;
	margin: 0 auto;
	min-height: 100vh;
	color: var(--text);
	font-size: 1rem;
	background: var(--background);
	background-repeat: no-repeat;
    background-attachment: fixed;
	box-sizing: border-box;
}

.wrapper {
	min-height: 80vh;
	margin: 3vh 10vh;
	display: flex;
}

.sidebar {
	background: var(--sidebar);
	border: solid 1px var(--border);
	border-right: none;
	border-top: none;
	flex: 10%;
}

.tab {
	background: var(--sidebar);
	border: solid 1px var(--border);
	border-bottom: none;
	border-left: none;
}

.side-wrapper {
	min-height: 95%;
	display: flex;
	flex-direction: column;
    justify-content: space-around;
	align-items: center;
	text-align: center;
}

.navigation {
	font-family: Rising;
	font-size: 0.7rem;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: center;
	gap: 0.6rem;
	margin-top: 5vh;
	margin-right: 2.5rem;
}

.navigation li {
	padding: 0.6rem;
	background: var(--navigation);
	border: solid 1px var(--border);
	transition-delay: 5ms;
	transition: all 200ms ease;
}

.navigation li:hover {
	transform: scale(0.9);
}

.navigation a {
	color: var(--text);
	text-decoration: none;
}

.navigation a:hover {
	color: var(--text);
	text-decoration: none;
}

.breadcrumbs {
	font-family: monospace;
	margin-top: 2vh;
	display: block;
	text-align: center;
}

.breadcrumbs .current-page {
	font-weight: bold;
	color: var(--link-hover);
}

.music-player {
	margin: 2vh;
	font-family: monospace;
	font-size: 0.7rem;
	padding: 0.6rem;
	border: solid 1px var(--border);
	text-align: center;
}

.music-player audio {
	border: solid 1px var(--border);
	filter: opacity(50%);
}

.container {
	background: var(--main);
	border: solid 1px var(--border);
	border-left: none;
	flex: 70%;
	margin-top: 5vh;
}

.content {
	margin-top: 3vh;
	max-height: 80vh;
	max-width: 100%;
	padding: 1rem;
	overflow: auto;
	scrollbar-color: var(--link) var(--scrollbar);
}	

footer {
	font-family: BFA, monospace;
	font-size: 1rem;
	text-align: center;
	margin-top: 2vh;
}

/* Galleries */

.media-gallery {
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
	padding: 0;
	gap: 0.5rem;
	margin-bottom: 5vh;
}

.media-gallery img {
	width: 9rem;
	opacity: 0.9;
	transition: transform 0.4s ease-in-out;
}

.media-gallery img:hover {
	transform: translateY(-15px);
}

/* Nonessential and Unique Elements */

.list-emphasis {
	list-style-type: none;
	text-align: left;
}

.list-emphasis li {
	padding: .7vw;
}

.list-emphasis span {
	color: var(--link-hover);
}

.fursona {
	float: left;
	margin-right: 3vh;
	margin-top: -2vh;
	transition: all 300ms ease-in-out;
  transition-delay: 5ms;
}

.fursona img {
	height: 33vw;
}

.fursona:hover {
   transform: rotate(-2deg);
}

.anthology-wrapper {
	max-width: 100vw;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 3vh;
	margin: 3vh;
}

.quotation {
	max-height: 40vh;
	font-family: monospace;
	text-align: right;
	padding: 1rem 2rem 1rem 2rem;
	background: var(--main);
	border: solid 1px var(--border);
	overflow: auto;
	scrollbar-color: var(--link) var(--scrollbar);
}

.quotation h1, .quotation h2 {
	font-family: monospace;
	font-size: 1rem;
	text-align: left;
}

.date {
	background-color: var(--content);
	padding: 5px;
	border-radius: 10%;
	margin-right: 1rem;
}

/* Dossier Page */

.dossier-wrapper {
    min-height: 80vh;
	margin: 3vh 10vh;
	display: flex;
	gap: 1vw;
	text-align: center;
}

.dossier-infobox {
	max-height: 80vh;
	flex: 10%;
	padding: 1rem;
	background: var(--main);
	border: solid 1px var(--border);
}

.dossier-infobox:nth-child(2) {
	flex: 20%;
}

.dossier-infobox:nth-child(3) {
	flex: 40%;
}
	
.dossier-content, .network-content {
	width: 95%;
	max-height: 75vh;
	display: inline-block;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 0.6rem;
	color: var(--text);
	background: var(--content);
	scrollbar-color: var(--link) var(--scrollbar);
}

.network-wrapper h1, .dossier-wrapper h1 {
	font-family: BFA;
	font-size: 1.75rem;
}

.network-wrapper h2, .dossier-wrapper h2 {
	font-family: BFA;
	font-size: 1.5rem;
}

.network-wrapper h3, .dossier-wrapper h3 {
	font-family: BFA;
	font-size: 1.25rem;
}

/* Network Page */

.network-wrapper {
	min-height: 35vh;
	margin: 3vh 10vh;
	display: flex;
	justify-content: space-around;
	gap: 2vh;
	text-align: center;
}

.neighbourhood, .box, .bookmarks {
	padding: 1rem;
	background: var(--main);
	border: solid 1px var(--border);
}

.neighbourhood {
	flex: 50%;
}

.box {
	flex: 20%;
}

.network-content {
	max-height: 25vh;
}

.bookmarks {
	flex: 10%;
	max-height: 55vh;
}

.bookmarks ul {
	padding: 0;
	list-style-type: none;
	margin-bottom: 4vh;
}

.bookmarks li {
	margin: 1.5vh 0;
}

.bookmarks a {
  text-decoration: none;
}

.bookmarks .network-content {
	max-height: 45vh;
}

#furryring, #autiring {
  display: flex;
  justify-content: center;
}

/* Tooltips and Definitions */

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px solid var(--link);
}

.tooltip .tooltip-text {
	visibility: hidden;
	width: 150px;
	background-color: var(--content);
	color: var(--link-hover);
	border: solid 1px var(--link);
	font-family: monospace;
	text-align: center;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -75px;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.tooltip:hover .tooltip-text, .tooltip:focus .tooltip-text {
	visibility: visible;
	opacity: 1;
}

/* Text Style */
a {
	color: var(--link);
}

a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

article h1, article h2, article h3 {
	font-family: AgencyB;
	text-align: center;
}

.external::after {
	content: "↱";
	display: inline-flex;
	margin-left: 5px;
}

.list-heading {
	font-family: inherit;
	font-weight: normal;
	font-size: 1rem !important;
}

/* Media Queries */ 
  @media screen and (max-width: 700px) {
  .wrapper, .dossier-wrapper, .network-wrapper {   
    flex-direction: column;
	gap: 1rem;
	margin: 2rem;
  }
  
  .sidebar, .container {
	border: solid 1px var(--border);
	margin: 1vw;
  }
  
  .fursona img {
	height: 40vh;
  }
 }