:root {
	--light-green: #baffd2;
	--light-blue: #8cd9f9;
	--light-pink: #ffb3f0;
	--light-purple: #a560ea;
	
	--orange: #ff8457;
	--yellow: #ffb47a;
	--green: #6af171;
	--teal: #3fb5a3;
	--blue: #65b9e6;
	--purple: #7b37bf;
	--pink: #ff4b82;
	
	--dark-green: #147680;
	--dark-blue: #004070;
	--dark-purple: #451b7b;
	--dark-pink: #a91f7a;
	
	--black: #150c39;
	--white: #ade7ff;
	--dark: rgba(21, 12, 57, 0.66);
	--light: rgba(140, 217, 249, 0.5);
	
	--primary-font: Comfortaa, sans-serif;
	--secondary-font: ConcertOne, sans-serif;
	--dyslexic-font: OpenDyslexic, sans-serif;
	
	--content-side-padding: 2.5vw;
	--heading-right-margin: 25%;
	--card-height: 200px;
	--box-shadow: 4px 4px var(--purple);
}

@font-face {
	font-family: Comfortaa;
	src: url("../fonts/Comfortaa-Variable.ttf");
}

@font-face {
	font-family: ConcertOne;
	src: url("../fonts/ConcertOne-Regular.ttf");
}

@font-face {
	font-family: OpenDyslexic;
	src: url("../fonts/OpenDyslexic.otf");
}

html {
	background: #142B73 url("../img/bushes_background.png") no-repeat fixed;
	background-size: 100vw;
	background-position: bottom center;
	
	color: var(--white);
	font-family: var(--primary-font);
	margin: auto 15%;
	overflow-x: hidden;
	scroll-behavior: smooth;
	
	/* Start of Scrollbar CSS */
	/* Firefox */
	scrollbar-width: auto;
	scrollbar-color: var(--white) #150c39;
	/* Chrome, Edge, and Safari */
	&:-webkit-scrollbar {
		width: 16px;
	}
	&:-webkit-scrollbar-track {
		background-color: var(--black);
	}
	&:-webkit-scrollbar-thumb {
		background-color: #328992;
		border-radius: 10px;
		border: 3px none #ffffff;
	}
	/* End of Scrollbar CSS */
}


/* MAIN STYLES */
/* containers */
body {
	background-color: var(--dark);
	margin: 0;
	min-height: 100vh;
	box-shadow: 5px 0 50px var(--dark);
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(30px);
}

main {
	padding: 0 var(--content-side-padding);
	position: relative;
	display: flex;
	flex-flow: column nowrap;
}

nav {
	background-color: var(--black);
	display: flex;
	flex-flow: column wrap;
	& a {
		display: block;
		color: var(--white);
		text-decoration: none;
		padding: 10px 15px;
		border: 1px solid var(--purple);
		border-width: 0 1px 1px 1px;
		&:hover {
			color: white;
			background: var(--purple);
		}
	}
	& .dropdown {
		position: relative;
		&:hover .dropdown-content {
			display: block;
		}
	}
	& .dropdown-content {
		display: none;
		width: 100%;
		background-color: var(--black);
		position: absolute;
		top: 0;
		right: -100%;
		z-index: 1;
		& a {
			background-color: var(--dark-purple);
			color: var(--light-pink);
			border-bottom: 1px solid var(--light-pink);
			&:hover {
				color: white;
				background: var(--purple);
			}
		}
		& :last-child {
			border-width: 0;
		}
	}
}

footer {
	background-color: var(--black);
	text-align: right;
	border-top: 2px solid var(--purple);
	border-bottom: 200px solid var(--black);
	padding: 15px var(--content-side-padding);
	margin-top: 100px;
	& > a, img {
		margin: 0 0 10px 10px;
	}
}

article {
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  & p {
    margin: 5px 0 0 0;
    padding: 0;
  }
}

details {
	padding-left: 0.5em;
	&.sub {
		border-left: 4px dotted var(--purple);
		margin-left: 1.75em;
		& summary {
			list-style-type: "⏵";
		}
	}
}

details[open] > summary {
  border-bottom: 2px solid var(--purple);
}

details.sub[open] > summary {
  list-style-type: "⏷";
}

summary {
  padding: 5px;
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  -moz-user-select: none;
  user-select: none; /* Standard syntax */
}

blockquote, .bubble {
  background: linear-gradient(to right, transparent, rgba(92, 208, 255, 0.25)), url("../img/arcade-glitter_tile.png") no-repeat 95%;
  background-position-y: bottom -15px;
  background-size: auto, 75px;
  
  border-left: 4px solid var(--purple);
  border-radius: 0 25px 25px 0;
  box-shadow: 5px 0 25px var(--dark);
  margin: 15px 40px;
  padding-left: 15px;
  & p {
    margin: 0;
    padding: 1em 1em 1em 0;
  }
}

heading-anchors:not(:defined) :is(h2,h3,h4,h5,h6):after {
	content: "#";
	padding: 0.25em;
	opacity: 0;
}

header {
	background: var(--dark-green);
	padding-left: var(--content-side-padding);
	margin-left: calc(var(--content-side-padding) * -1);
	margin-right: 25%;
	border-radius: 0 0 3em 0;
	& h1 {
		margin-right: 0;
	}
	& .info, a {
		color: var(--light-green);
		padding: 0.25em 0;
	}
}

/* text */
h1, h2, h3, h4 {
	font-family: var(--secondary-font);
	font-weight: normal;
	padding: 0.125em var(--content-side-padding);
	margin: 30px 0 0 calc(var(--content-side-padding) * -1);
	border-radius: 0 1em 1em 0;
}

h1 {
	color: var(--dark-green);
	background: var(--green);
	font-size: 42px;
	text-transform: uppercase;
	margin-right: var(--heading-right-margin);
	position: relative;
	&:after {
		content: "🟆";
		font-family: sans-serif;
		line-height: 1.2em;
		position: absolute;
		right: 0.75em;
	}
	&:first-child {
		border-top-right-radius: 0;
		margin-top: 0;
	}
	&:not(:first-child) {
		margin-top: 50px;
	}
	+ h2 {
		border-top-right-radius: 0;
		margin-top: 0;
	}
	+ section > h2:first-child {
		border-top-right-radius: 0;
		margin-top: 0;
	}
}

h2 {
	color: var(--light-pink);
	background-color: var(--purple);
	font-size: 30px;
	margin-right: calc(var(--heading-right-margin) * 1.5);
	+ a.ha + h3 {
		border-top-right-radius: 0;
		margin-top: 0;
	}
}

h3 {
	color: var(--light-purple);
	background-color: var(--black);
	font-size: 24px;
	margin-right: calc(var(--heading-right-margin) * 2);
	&:first-child {
		border-top-right-radius: 0;
		margin-top: 0;
	}
}

:not(nav, nav div) > a:not(.icon) {
	color: var(--light-green);
	text-decoration: underline solid var(--green) 1px;
	&:hover {
		color: var(--black);
		background-color: var(--green);
		text-decoration: none;
	}
	&:visited {
		color: var(--light-pink);
		text-decoration-color: var(--pink);
		&:hover {
			color: var(--black);
			background-color: var(--pink);
		}
	}
	&[href^="http"]:after {
		content: "\1F855";
		display: inline-block;
		position: relative;
		bottom: 0.1em;
		line-height: 0;
	}
}

p {
	padding: 0;
	+ ul {
		margin-top: -15px;
	}
}

p, span, a {
	line-height: 1.25em;
}

strong {
  letter-spacing: 0.05em;
  font-variant-caps: all-small-caps;
  color: var(--green);
}

/* other */
hr {
	border: none;
	border-top: 7.5px dotted var(--purple);
	margin: 4em 30%;
}


/* ID STYLES */
/* containers */
#banner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	background-color: var(--black);
	border-bottom: 2px solid var(--purple);
	& a:has(img) {
		flex: 1 1 80%;
	}
	& img {
		width: 100%;
		vertical-align: bottom; /* Trims excess height added by anchor tag. */
	}
	& nav {
		flex: 1 0 20%;
		max-height: 25vh;
	}
}

#card-collection {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

#survey {
	background: var(--black);
	width: 50%;
	border-left: 4px solid var(--green);
	text-align: center;
	padding: 0.5em;
	& label {
		display: block;
	}
	& input[type="range"] {
		-webkit-appearance: none;
		background: var(--white);
		outline: none;
		border-radius: 5px;
		height: 5px;
	}
	& input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb {
		-webkit-appearance: none;
		background: var(--dark-green);
		border: 1px solid var(--green);
	}
}

/* text */
#back-button {
	width: max-content;
	border: 2px solid var(--white);
	padding: 0.25em;
	border-radius: 0.5em;
	text-decoration: none;
	color: var(--white);
	margin: 1em 0 2em;
	display: inline-block;
	&:hover {
		background: var(--white);
		color: var(--black);
	}
}

/* CLASS STYLES */
/* containers */
.card {
	display: inline-block;
	max-height: var(--card-height);
	aspect-ratio: 5/6;
	border-radius: 15px;
	background-color: var(--black);
	box-shadow: var(--box-shadow);
	text-align: center;
	position: relative;
	transition: box-shadow 100ms, transform 250ms, color 250ms;
	& p {
		font-family: var(--secondary-font);
		font-size: 1.25em;
		position: absolute;
		width: 100%;
		top: 0.25em;
		background-color: var(--dark);
		text-shadow: 0.08em 0.08em var(--purple);
	}
	&:hover {
		transform: translateY(-0.75em);
		cursor: pointer;
	}
	&.active {
		transform: translateY(-1.25em) !important;
		color: white;
	}
}

.character-panel {
	background-color: var(--black);
	border-radius: 0 40px 40px 0;
	border-left: 4px solid var(--green);
	margin: 30px 0;
	padding: 20px;
	width: 630px;
	max-width: 100%;
	display: flex;
	flex-flow: column wrap;
	& p {
		margin: 0.5em 0;
	}
	& details {
		border: 2px solid var(--green);
		border-radius: 0 20px 20px 0;
		margin-top: 20px;
		& summary {
			font-family: var(--secondary-font);
			font-size: 18px;
			color: var(--green);
			list-style: none;
			&::after {
				content: " +";
				font-size: 32px;
				line-height: 0;
				position: relative;
				top: 5px;
			}
		}
		&[open] summary {
			border-bottom: none;
			&::after {
				content: " -";
				top: 3px;
				left: 1.32px;
			}
		}
	}
}

.cut-out {
  /* Use as base article style */
  display: block;
  width: 600px;
  margin: 15px 0;
  background-color: var(--black);
  border: 3px dotted var(--green);
  box-shadow: 5px 0 25px var(--dark);
  & h3 {
    background-color: var(--green);
    color: var(--dark-green);
    padding: 0.25em 0.75em;
    margin: 0.5em -13px;
    & a {
      color: var(--black);
      padding: 0.25em;
      text-decoration-color: var(--black);
    }
    & a:visited {
      text-decoration-color: var(--purple);
    }
    & a:hover {
      color: var(--green);
      background-color: var(--black);
    }
    & a:hover:visited {
      color: var(--purple);
    }
  }
}

.embed-container {
	background-color: var(--black);
	width: 630px;
	max-width: 90%;
	padding: 15px;
	border: 2px dotted var(--pink);
	margin: 20px 0;
	& iframe {
		margin: 5px 0;
		border: 2px solid var(--dark-pink) !important;
	}
}

.post {
	position: relative;
	width: 450px;
	max-width: 75%;
	margin-top: 15px;
	&.odd {
		left: 75px;
		& .body {
			background: var(--black);
			border-color: var(--pink);
			color: var(--pink);
		}
		&::after {
			content: url("../svg/speech_bubble_tail_alt.svg");
			transform: scaleX(-1);
			left: initial;
			right: 30px;
		}
	}
	& .body {
		color: var(--light-purple);
		background: var(--black);
		border-radius: 2em;
		padding: 1em 2em 1.5em;
		border: 2px solid var(--light-purple);
	}
	& .title {
		font-family: var(--secondary-font);
		font-size: 1.5em;
	}
	&::after {
		content: url("../svg/speech_bubble_tail.svg");
		width: 50px;
		position: absolute;
		left: 30px;
		display: block;
		bottom: -35px;
	}
}

.preview {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-around;
	& img {
		flex: 0 1 275px;
		width: 275px;
		max-width: 100%;
	}
	& .traits {
		display: flex;
		flex-direction: column;
		max-width: 275px;
	}
}

.rating {
  font-family: var(--secondary-font);
  font-size: 1.5em;
  position: absolute;
  bottom: 0.25em;
  & span {
    display: inline-block;
    background-color: var(--green);
    width: 1.25em;
    aspect-ratio: 1/1;
    border-radius: 100%;
    padding: 0.1em;
    color: var(--black);
    text-align: center;
    font-size: 0.75em;
  }
}

.review {
  & details {
    display: none;
    height: var(--card-height);
    max-width: 750px;
    vertical-align: top;
    box-sizing: border-box;
    margin-left: 0.25em;
  }
  & details[open] {
    display: inline-block;
  }
  & details[closed] {
    display: none;
  }
  & summary {
    display: none;
  }
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	& .column {
		flex: 30%;
		margin: 0 4px;
		& img {
			max-width: 100%;
			border-radius: 15px;
			border: 2px solid var(--green);
			box-sizing: border-box;
			margin: 4px 0;
		}
	}
}

.thumbnail {
	border-radius: 15px 15px 0 0;
	border: 3px solid var(--black);
	aspect-ratio: 1/1;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.wrapper {
	flex-grow: 1;
}

/* media */
.draggable {
	cursor: grab;
}

.flag {
	width: 80px;
	border: 2px dotted var(--pink);
	box-sizing: border-box;
}

.icon {
	aspect-ratio: 1/1;
	height: 50px;
	display: inline-block;
	& img {
		height: 100%;
		&:hover {
			filter: brightness(2);
		}
	}
}

/* text */
.ha {
	top: calc(var(--ha_offsety) - 1px) !important;
	&:hover {
		animation-name: rainbow;
		animation-duration: 3s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		background-color: transparent !important;
	}
}


/* ANIMATIONS */

@keyframes rainbow {
	0% { color: var(--pink); }
	20% { color: var(--yellow); }
	40% { color: var(--green); }
	60% { color: var(--blue); }
	80% { color: var(--light-purple); }
	100% { color: var(--pink); }
}


/* -- MOBILE VIEWPORT -- */
@media only screen and (max-width: 750px) {
	/* MAIN STYLES */
	:root {
		/* --content-side-padding: 15px; */
	}
	
	html {
		margin: 0;
	}
	
	h1 {
		font-size: 36px;
		margin-right: calc(var(--content-side-padding) * -1);
		border-radius: 0;
	}
	
	h2 {
		font-size: 24px;
		margin-right: 0;
	}
	
	article {
		margin: 0 5% 15px 5%;
	}
	
	footer {
		border-bottom: 50px solid var(--black);
	}
	
	
	/* ID STYLES */
	
	
	/* CLASS STYLES */
	.card:hover {
		transform: none;
	}
	
	.row .column {
		flex: 45%;
		max-width: 45%;
	}
}