@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
/* I've purposefully only used one font here. I think that using Noto Sans everywhere helps keep the website feel connected, and it's a relatively versatile font. It would be easy to go searching through Google Fonts every time I make a new page or new heading to look for a fancy new font, but this way it doesn't feel all chaotic and detached. */

* {
	/* The * applies to everything in the website, these two things just keep it consistent and working properly. The smooth scrolling is necessary to specify for links that scroll down the page*/
	box-sizing: border-box;
	scroll-behavior: smooth;
}

:root {
	/* The root selects the root directory of the document, and it's where you put variables to reference later */
	--accent: #8f3072; /* This comes from Mick Jagger's pink jacket */
	--goldbg: #cdba4d; /* This comes from the gold around Steve Tyler. I think the purple and gold are a really nice combo, and give the website an almost regal feel. */
}

body {
	margin: 0; /* Necessary to remove the white border around the outside of the body */
	font-family: "Noto Sans", sans-serif; /* Various font stuff to keep things consistent */
	font-weight: normal;
	font-style: normal;
}

.scroll {
	/* Makes scroll things scroll */
	overflow: auto;
}

.scroll::-webkit-scrollbar {
	/* Defines the custom scrollbar and its width */
	width: 10px;
}

.scroll::-webkit-scrollbar-track {
	/* The background colour of the scrollbar */
	background: var(--accent);
}

.scroll::-webkit-scrollbar-thumb {
	/* The bit of the scrollbar that moves */
	background: white;
	border-radius: 5px;
}

.scroll::-webkit-scrollbar-thumb:hover {
	/* Make it obvious that you're hovering over the thumb */
	background: #aaaaaa;
}

.scroll::-webkit-scrollbar-button {
	/* Removes the buttons at the top and bottom of the bar */
	display: none;
}

.grid-container {
	/* The main grid system */
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 100% auto 85px;
	height: 100vh;
}

#first-image {
	height: 0;
	width: 0;
}

nav {
	position: fixed; /* Keeps the nav bar at the top all the time */
	display: flex;
	width: 100%;
	z-index: 1; /* Keeps the nav bar on top of the other elements */
	height: 110px;
	transition-duration: 200ms;
	border-bottom: 10px solid #00000000;
}

#header-title {
	color: #00000000;
	font-size: 40px;
	margin: 20px 0px;
	transition-duration: 200ms;
}

/* The transitions of all this header stuff are talked about a lot in the T&T doc */

.artist #header-title {
	color: white;
}

nav.on-scrolled {
	background-color: var(--accent);
	border-bottom-color: white;
}

nav.on-scrolled #header-title {
	color: white;
}

#logo {
	/* The svg logo in the top left */
	margin: 21px 28px;
	height: 55px;
	width: 55px;
}

#logo path {
	/* This colours the svg logo, and gets rid of the path because it's all made with fill */
	fill: white;
	stroke-width: 0;
}

#small-title {
	display: flex;
	text-decoration: none; /* Removes the link underline for the logo */
}

/* The following is all the styling for the nav buttons */

nav ul {
	display: inline;
	list-style: none;
	padding: 0px;
	margin: 24px 20px 0px auto;
}

nav ul li {
	font-family: "Noto Sans", Helvetica, sans-serif;
	font-size: 25px;
	display: inline-block;
	position: relative;
	cursor: pointer;
	transition-duration: 0.1s;
	color: white;
	margin-left: 40px;
}

nav ul li hr {
	height: 4px;
	border: 0;
	background-color: white;
}

nav ul li:hover {
	scale: 1.05;
}

header {
	/* Header background image stuff */
	background-image: url(../images/header.jpg);
	background-position: center top;
	background-size: cover;
	text-align: center; /* Put the main title in the middle */
}

#aerosmith header {
	background-image: url(../images/aerosmithHead.jpg);
}

#rollingStones header {
	background-image: url(../images/rollingStonesHead.jpg);
}

header #title {
	/* Main title styling */
	color: white;
	font-size: 130px;
	font-weight: 700;
	height: auto;
	margin-top: calc(50vh - 130px);
}

/* The following nudge styling is talked about in T&T */

#scroll-nudge {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 90px;
}

#nudge-text {
	color: white;
	display: none;
	animation: fade 0.2s;
}

@keyframes fade {
	from {
		opacity: 0.1;
	}
	to {
		opacity: 1;
	}
}

#arrow {
	position: absolute;
	fill: none;
	stroke: white;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 400px;
	height: 20px;
	width: 40px;
	bottom: 15px;
	margin-left: -20px;
	transition-duration: 0.2s;
}

rect {
	/* Completely hides the rectangle in the nudge arrow, refer to T&T */
	fill: none;
	stroke-width: 0;
}

#scroll-nudge:hover #nudge-text {
	display: block;
}

#scroll-nudge:hover #arrow {
	bottom: 20px;
}

main {
	/* Adds some colour and layout styling to the main section of the page */
	border-top: 20px solid var(--accent);
	background-color: var(--goldbg);
	display: flex;
}

#bulk-writing {
	/* Padding for the writing on the left */
	padding: 65px;
	padding-left: 130px;
}

#bulk-writing > p {
	/* The > means that this selector only selects direct children on #bulk-writing, this means that the styling isn't applied to the captions and other things further within #bulk-writing */
	text-align: justify;
	margin: 0;
	margin-bottom: 40px;
}

#bulk-writing h4 {
	/* Paragraph headers */
	margin-top: 0;
}

.artist #bulk-writing {
	width: 80%;
}

/* The following things with the .image-strip flexbox and the @media rule are explained in detail in the T&T document */

.image-strip {
	display: flex;
	justify-content: space-between;
	margin: 40px 0;
}

.image-strip div {
	width: 48%;
	height: auto;
	position: relative;
}

@media only screen and (max-width: 1500px) {
	.image-strip {
		flex-direction: column;
	}

	.image-strip div {
		width: 100%;
	}

	.image-strip div:first-child {
		margin-bottom: 40px;
	}
}

.artist #bulk-writing img {
	border-bottom: 40px solid var(--accent);
	border-radius: 20px;
	width: 100%;
}

.artist-caption {
	color: white;
	position: absolute; /* This means the caption can sit on top of the border of the image */
	bottom: 16px;
	text-align: center;
	width: 100%;
	font-size: 14px;
	margin: 0;
}

/* A lot of the quote related things are explained in T&T */

#quote {
	display: flex;
	margin-top: 50px;
}

.qMark {
	fill: black;
	stroke-width: 0px;
	width: 70px;
	height: 70px;
	margin: 10px;
	flex-shrink: 0;
}

#qText {
	font-size: 30px;
	display: inline-block;
	margin: 45px 10px 0px;
	text-align: center;
}

#qAttribution {
	font-size: 15px;
	float: right;
}

#genre-images {
	/* Padding etc. for the images and things on the right of each page */
	text-align: center;
	padding: 65px;
	padding-bottom: 0;
}

#genre-images .image-div {
	/* The divs around each image in the home page */
	margin: 0 auto 65px;
	width: 470px; /* Height and width are set to be the original height and width of the image plus the space needed for the border and caption background */
	height: 390px;
	background-color: var(--accent);
	border-radius: 50px;
}

#genre-images .image-div img {
	width: calc(
		100% - 20px
	); /* This height and width takes the size of the parent div (explained just above) and then takes away what was added. This means that the image is just the original size, but the parent has space for borders. Doing it a different way like by using a calc() in the parent div caused problems such as image distortion. */
	height: calc(100% - 70px);
	margin-top: 10px;
	border-radius: 40px;
}

#genre-images .caption {
	color: white;
	margin: 11px;
	font-size: 17px;
	font-weight: 600; /* I think this weight is a good balance between full bold and just normal paragraph text */
}

.artist-sBox {
	/* This is common styling for the song player and the statistics, as they look very similar */
	background-color: var(--accent);
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 60px;
	width: 417px;
	height: fit-content;
}

.artist-sBox h3 {
	margin: 0;
	color: white;
}

.artist-sBox p {
	color: white;
	margin: 10px;
}

.artist-sBox ol,
.artist-sBox ul {
	/* Just removes extra space around both types of list */
	padding: 0;
	margin: 0;
}

.artist-sBox li {
	height: min-content; /* Keeps things the right size */
	margin: 0px;
}

#top-tracks ol {
	margin-top: 16px;
}

#top-tracks li {
	display: flex; /* Makes the album image and the song title display next to each other. Also seems to remove the numbers on the list */
	border-radius: 10px;
	padding: 10px;
}

#top-tracks img {
	/* The size of the images (both album and play button) */
	width: 50px;
	height: 50px;
}

#top-tracks img.play-button {
	position: absolute; /* Lets the play button show on top of the album */
	visibility: hidden; /* Hides it by default */
}

#top-tracks p {
	margin: auto 15px;
	font-weight: normal;
}

/* The next three styles are what each song change when you hover over it, like the white background and the play button. However I wanted this to also happen when the song is playing, which is what the .hovered class does. So while a song is playing, the JavaScript adds .hovered to the relevant li, which applies exactly the same styling as manually hovering over it. */

#top-tracks li:hover {
	cursor: pointer;
	background-color: white;
}

#top-tracks li:hover img.play-button {
	visibility: visible;
}

#top-tracks li:hover p {
	color: black;
}

#top-tracks .hovered {
	background-color: white;
}

#top-tracks .hovered img.play-button {
	visibility: visible;
}

#top-tracks .hovered p {
	color: black;
}

#artist-stats li {
	display: inline; /* Removes the bullet points on the list */
	text-align: left;
	padding: 5px;
}

#data-source {
	/* The little source text at the bottom of the stats panel */
	color: white;
	font-size: 9px;
}

#data-source a {
	color: white;
}

footer {
	background-color: var(--accent);
	text-align: center;
	padding: 10px;
}

footer p {
	color: white;
	margin: 10px;
}

footer p:last-child {
	/* Only applies this style to the last p element in footer. This means that I don't need to have a whole id or class for the little disclaimer to make it small. */
	font-size: 9px;
}