/* Variables */

:root {

	/* Sizes */

	--size-1: 16px;
	--size-2: 24px;
	--size-3: 32px;
	--size-4: 48px;
	--size-5: 64px;
	--size-6: 80px;
	--size-7: 96px;
	--size-8: 112px;
	--size-9: 144px;
	--size-10: 160px;

	/* Colors */

	--color-dark: #0e0b0b;
	--color-light: #ffffff;
	--color-spicy: #EC522C;
	--color-floral: #FA87D4;
	--color-musk: #866246;
	--color-fruity: #EA2C2F;
	--color-citrus: #ECB92C;
	--color-woody: #63361A;
	--color-green: #53A76B;
	--color-ozonic: #83D8EF;
	--color-herbal: #80a750;
	--color-resinous: #ff9d09;
	--color-smoky: #A99D9A;
	--color-earthy: #6c5f1f;

	/* Fonts */

	--font-1: "neue-haas-grotesk-display", sans-serif;
	--font-2: "the-seasons", sans-serif;
	--font-3: "Cutive Mono", serif;
	--font-4: "adobe-garamond-pro", serif;
	--font-5: "neue-haas-grotesk-text", sans-serif;
}

	/* Main */

body{
	background-color: var(--color-dark);
}

#background-image img{
	position: fixed;
	z-index: -1000;
	object-fit: cover;
	object-position: center;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	overflow-x: hidden;
	max-width: 100%;
}

header{
	padding-top: var(--size-1);
	padding-bottom: var(--size-2);
}

	/* Fonts */

h1{
	color: var(--color-light);
	font-family: var(--font-2);
	text-transform: uppercase;
	font-size: 12vw;
	text-align: center;
}

#channel-title{
	margin: 0;
	padding-bottom: var(--size-2);
	line-height: 80%;
	overflow-y: hidden;
}

/* https://www.youtube.com/watch?v=V18Rvcxj1iA */
/* Interesing text animations with CSS */

h2{
	font-family: var(--font-2);
	font-size: var(--size-4);
	font-weight: 100;
	margin: 0px;
	text-align: center;
	color: var(--color-light);
	line-height: var(--size-3);
}

h3{
	font-family: var(--font-1);
	font-weight: 100;
	font-size: calc(var(--size-1)*.8);
	text-transform: uppercase;
	text-align: center;
	color: var(--color-light);
	letter-spacing: 1px;
	margin-left: var(--size-1);
	margin-right: var(--size-1);
}

h4{
	font-family: var(--font-3);
	text-align: center;
	color: var(--color-light);
	font-size: var(--size-1);
}

#fragrance-description{
	color: var(--color-light);
	font-weight: 500;
	font-family: var(--font-5);
	font-size: calc(var(--size-1)*.8);
}

p{
	font-family: var(--font-4);
	text-align: center;
	font-size: var(--size-1);
}

.emphasis{
	font-style: italic;
}

::selection { 
/* https://www.w3schools.com/howto/howto_css_text_selection.asp 
I used this to have the text highlight be black.
*/
	background-color: var(--color-dark); 
}

	/* Nav */

.top-nav::-webkit-scrollbar {
  display: none; 
}

.top-nav{
	display: flex;
	justify-content: space-around;
	overflow-x: auto; 
	padding-bottom: var(--size-1);
	padding-top: var(--size-1);
	width: 100%; 
	overflow-x: auto;
	white-space: nowrap; 
	scrollbar-width: none; 
	z-index: 600;
}

.nav-item{
	font-family: var(--font-1);
	font-size: calc(var(--size-1)*.8);
	font-weight: 100;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-light);
	text-decoration: none;
	min-width: 100px;
	transition: color 0.3s ease-in-out; 
}

.nav-item::before {
	content: ""; 
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 120%;
	transform: translate(-50%, -50%);
	filter: blur(15px);
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	border-radius: 20px;
	z-index: -1;
}

/* reference: https://stackoverflow.com/questions/8874326/how-to-make-a-hover-effect-for-pseudo-elements? 
I used this to change the background color on hover.
*/

.nav-item:first-child::before {
	background: #EC522C80;
}

.top-nav button:first-child:hover{
	cursor: crosshair; 
	cursor: url('links/Cursors/Spicy.svg'), auto;
}

.nav-item:nth-child(2)::before {
	background: #FA87D480;
}

.top-nav button:nth-child(2):hover{
	cursor: crosshair; 
	cursor: url('links/Cursors/Floral.svg'), auto;
}

.nav-item:nth-child(3)::before {
	background: #EA2C2F80;
}

.top-nav button:nth-child(3):hover{
	cursor: crosshair; 
	cursor: url('links/Cursors/Fruity.svg'), auto;
}

.nav-item:nth-child(4)::before {
	background: #ECB92C80;
}

.top-nav button:nth-child(4):hover{
	cursor: crosshair; 
	cursor: url('links/Cursors/Citrus.svg'), auto;
}

.nav-item:nth-child(5)::before {
	background: #63361A80;
}

.top-nav button:nth-child(5):hover{
	cursor: crosshair; 
	cursor: url('links/Cursors/Woody.svg'), auto;
}

.nav-item:nth-child(6)::before {
	background: #16623280;
}

.top-nav button:nth-child(6):hover{
	cursor: crosshair; 
	cursor: url('links/Cursors/Green.svg'), auto;
}

.nav-item:nth-child(7)::before {
	background: #83D8EF80;
}

.top-nav button:nth-child(7):hover{
	cursor: crosshair; 
	cursor: url('links/Cursors/Ozonic.svg'), auto;
}

.nav-item:nth-child(8)::before {
	background: #80a75080;
}

.top-nav button:nth-child(8):hover{
	cursor: crosshair; 
	cursor: url('links/Cursors/Herbal.svg'), auto;
}

.nav-item:nth-child(9)::before {
	background: #ff9d0980;
}

.top-nav button:nth-child(9):hover{
	cursor: crosshair; 
	cursor: url('links/Cursors/Resinous.svg'), auto;
}

.nav-item:nth-child(10)::before {
	background: #A99D9A80;
}

.top-nav button:nth-child(10):hover{
	cursor: crosshair; 
	cursor: url('links/Cursors/Smoky.svg'), auto;
}

.nav-item:nth-child(11)::before {
	background: #6c5f1f80;
}

.top-nav button:nth-child(11):hover{
	cursor: crosshair; 
	cursor: url('links/Cursors/Earthy.svg'), auto;
}

.circle {
	width: 20px;
	padding-right: calc(var(--size-1)*.5);
	padding-top: 4px;
}

.top-nav button:hover::before {
	opacity: 1;
}

.top-nav button:last-child {
	margin-right: 1px;
}

	/* Cards with Perfume Bottles */

.container{
	margin: 0 auto;
	margin-left: var(--size-1);
	margin-right: var(--size-1);
}

.blocks{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-auto-rows: 1fr;
	border: var(--color-light) solid 1px;
	box-sizing: border-box;
	height: fit-content;
	margin: 0 auto;
}

.blocks li{
	aspect-ratio: 1 /1 ;
	display: flex;
	align-items: center;
	justify-content: center;
	border: var(--color-light) solid 1px;
	transition: background-color 0.5s ease-in-out;
}

.blocks li svg {
	width: 135px;
	height: 135px;
  }

.blocks li:hover {
	  background-color: black;
}


	/* Modal  */

.modal{
	color: var(--color-light);
	background-color: var(--color-dark);
	padding: var(--size-1);
	border: 1px var(--color-light) solid;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	width: 90vw;
	text-align: center;
	height: 90vh;
	overflow: hidden;
	img{
		max-width: 80%; 
		max-height: 400px;
		object-fit: contain;
		border: 1px var(--color-light) solid;
		filter: grayscale(100%); 
		transition: filter 0.3s ease-in-out; 
	}
}

.modal img:hover{
	filter: grayscale(0%); 
}

iframe {
	filter: grayscale(100%);
	transition: filter 0.3s ease-in-out; 
}

iframe:hover {
	filter: grayscale(0%);
}

.modal-contents{
	display: flex;
	justify-content: center;
	align-items: center; 
	flex-direction: column;
	height: 100%;
}

.modal h2 {
	font-size: var(--size-3);
	padding-bottom: calc(var(--size-1)*.5);
	color: var(--color-light);
	line-height: 100%;
}

.modal h3 {
	font-size: calc(var(--size-1)*1.2);
	padding-bottom: calc(var(--size-1)*.5);
}

.modal p {
	padding-top: var(--size-2);
	line-height: 140%;
	display: -webkit-box;
	-webkit-line-clamp: 4; 
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#just-text {
	font-size: calc(var(--size-1)*1.2);
	width: 100%;
	display: -webkit-box;
	-webkit-line-clamp: 10; 
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.divider-line{
	height: 1px;
	width: 100%;
	background-color: var(--color-light);
	margin: var(--size-2) 0;
}

.divider-line-bottom{
	height: 1px;
	width: 100%;
	background-color: var(--color-light);
	margin: 0 0;
	margin-top: var(--size-2);
}

.modal-link{
	font-family: var(--font-1);
	padding: var(--size-1);
	border: 1px var(--color-light) solid;
	text-transform: uppercase;
	background-color: var(--color-dark);
	position: absolute;
	bottom: 40%;
	left: -52;
	transform: rotate(-90deg);
}

.modal audio {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0;
	padding: var(--size-2);
}

.pdf-description{
	color: var(--color-light);
	font-family: var();
}

::backdrop{
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(12px);
}

body:has(dialog[open]) {
	overflow: hidden;
}

iframe {
	width: 100%;
	height: 300px; 
}

.exit{
	border-left: 1px var(--color-light) solid;
	border-bottom: 1px var(--color-light) solid;
	margin-bottom: var(--size-1);
	width: calc(var(--size-2)*1.5);
	height: calc(var(--size-2)*1.5);
	display: inline-flex; 
	align-items: center;
	justify-content: center;
	position: absolute;	
	top: 0px;
	right: 0px;
	z-index: 1000;
	background-color: var(--color-dark);
}

.exit:hover {
	background-color: var(--color-light);
	color: var(--color-dark);
}

button{
	cursor: pointer;
}

	/* Ending Statement */

#section-ending-statement {
	padding: var(--size-2);
}

#ending-statement {
	font-size: var(--size-3);
	line-height: var(--size-3);
	color: var(--color-light);
	width: 80vw;
	margin: 0 auto;
}

#e-s-text-variation{
	font-family: var(--font-1);
	font-style: normal;
}

#h3-ending-statement{
	color: var(--color-light);
	padding: var(--size-1);
}

	/* Footer */

#footer{
	display: grid;
	grid-template-columns: repeat(1, 1fr); 
	gap: var(--size-1);
	justify-items: center; 
	align-items: center; 
	padding: var(--size-1);
}

#footer-text{
	color: var(--color-light);
	text-align: center;
}

#footer-link{
	text-decoration: underline;
}

	/* Media Queries */

@media (min-width: 600px) {

	.modal {
		width: 90vw;
	}

	.modal audio {
		padding: var(--size-4);
	}
}

@media (min-width: 860px) {


		/* Font Styles */

	h3{
		font-size: var(--size-1);
	}

	p{
		font-size: calc(var(--size-1)*1.2);
	}

		/* Nav */

	.nav-item{
		font-size: var(--size-1);
	}

	/* Header */

	header{
		padding-bottom: var(--size-3);
	}

		/* Cards with Perfume Bottles */

	.container{
		margin-left: var(--size-1);
		margin-right: var(--size-1);
	}
	
	.blocks{
		grid-template-columns: repeat(6, 1fr);
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}

	.blocks li svg {
		width: 200px;
		height: 200px;
	  }

		/* Modal */

	.modal{
		padding: var(--size-2);
		width: 600px;
		height: 90vh;
	  }

	.modal h2 {
		font-size: calc(var(--size-3)*1.5);
		padding-bottom: var(--size-1);
	}
		
	.modal h3 {
		font-size: var(--size-2);
		padding-bottom: var(--size-1);
	}

	#just-text {
		font-size: calc(var(--size-1)*1.4);
		display: -webkit-box;
		-webkit-line-clamp: 14; 
		-webkit-box-orient: vertical;
		overflow: hidden;
		padding: 0;
	}

	.modal p {
		padding-top: var(--size-2);
	}

	.divider-line{
		margin: var(--size-2) 0;
	}

	.divider-line-bottom{
		margin: var(--size-2) 0;
		margin-bottom: 0;
	}

	.modal-link{
		bottom: 40%;
		left: -74;
    	width: 200px;
		transform: rotate(-90deg);
		transition: background-color 0.2s ease-in-out;
	}

	.modal-link:hover{
		background-color: rgba(255, 255, 255, .1);
	}

	.exit{
		width: var(--size-4);
		height: var(--size-4);
	}

		/* Ending Statement */

	#section-ending-statement {
		padding: var(--size-8);

	}

	#ending-statement {
		font-size: var(--size-5);
		line-height: var(--size-5);
		color: var(--color-light);
		width: 80vw;
		margin: 0 auto;
	}

	#e-s-text-variation{
		font-family: var(--font-1);
		font-style: normal;
	}

	#h3-ending-statement{
		color: var(--color-light);
	}

		/* Footer */

	#footer{
		display: flex;
		justify-content: space-around;
		overflow-x: auto; 
		gap: var(--size-1);
		padding: var(--size-1);
	}

	#footer-text{
		color: var(--color-light);
		text-align: left;
	}
}

@media (min-width: 1200px) {

	/* Modal */

	.modal{
		padding: var(--size-2);
		width: 600px;
		height: 90vh;
	  }

	.modal h2 {
		font-size: var(--size-4);
		padding-bottom: var(--size-2);
	}
		
	.modal h3 {
		font-size: var(--size-2);
		padding-bottom: var(--size-2);
	}
	
	.modal p {
		padding-top: var(--size-2);
	}

	.divider-line {
		margin: var(--size-3) 0;
	}
}

@media (min-width: 1500px) {

		/* Nav */

	.top-nav{
		padding-bottom: var(--size-2);
		overflow: hidden;
	}

		/* Header */
	
	#channel-title{
		line-height: 80%;
		padding-bottom: var(--size-2);
	}

	#fragrance-description{
		max-width: 1200px;
		margin: 0 auto;
	}	

		/* Ending Statement */

	#ending-statement {
		max-width: 1200px;
	}

}