index.css

/*                     */
/* All Across The Page */
/*                     */

@import url('https://fonts.googleapis.com/css2?family=Charm&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;600&display=swap');

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: #000;
}

a {
	color: white;
	text-decoration: none;
}

.hidden {
	opacity: 0;
	transition: opacity 2s;
}

.show {
	opacity: 1;
}

/*                */
/* Navigation Bar */
/*                */

#navbar {
	display: none;
}

#navbar[activated] {
	padding: 25px;
	color: white;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	height: 75px;
	display: flex;
	width: 100%;
	top: 0;
	position: sticky;
	font-family: 'Charm', cursive;
	font-size: clamp(0.8rem, 2vw, 1.4rem);
	align-items: center;
	justify-content: space-between;
	opacity: 0;
	transition: opacity 400ms ease-in-out;
}

#navbar[activated] {
	z-index: 2;
	opacity: 1;
}

#navbar-links-left, #navbar-title, #navbar-links-right {
	flex: 1;
}

#navbar-links-left, #navbar-links-right {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.navbar-link {
	cursor: pointer;
	border-radius: 8px;
	padding: 5px;
}

.navbar-link:hover {
	box-shadow: 0 0 0 1px white;
}

#navbar-title {
	text-align: center;
}

/*                    */
/* Scroll Containment */
/*                    */

#scroll-wrapper {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow-y: scroll;
}

/*              */
/* Landing Page */
/*              */

#background {
	position: absolute;
	z-index: -1;
	height: 100vh;
	background-attachment: fixed;
	width: 100%;
	opacity: 100%;
	object-fit: cover;
}

#background[fadeOut] {animation: backgroundFadeOut 1s ease-in-out forwards;}
#background[fadeIn] {animation: backgroundFadeIn 1s ease-in-out forwards;}

@keyframes backgroundFadeOut {
	0% {opacity: 100%;}
	100% {opacity: 20%;}
}

@keyframes backgroundFadeIn {
	0% {opacity: 20%;}
	100% {opacity: 100%;}
}

#landing {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
}

#landing-title {
	font-size: clamp(3rem, 7vw, 6rem);
	font-weight: bolder;
	color: white;
	font-family: 'Charm', cursive;
}

#title-first, #title-second {
	opacity: 0;
}

#title-first[activated], #title-second[activated] {
	animation: appear 2s ease-in-out forwards;
}

@keyframes appear {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*                */
/* Audio Controls */
/*                */

#audio {
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 3;
	top: calc(100% - 60px);
	left: 50%;
	transform: translate(-50%);
	position: fixed;
	width: 250px;
	height: 50px;
	border-radius: 10px;
	background-color: #323232;
	padding: 10px;
}

#track-picture {
	width: 32px;
	height: 32px;
}

#track-details {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

#track-text-info {
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: white;
	font-family: 'Noto Sans', sans-serif;
	font-size: clamp(0.8rem, 2vw, 1rem);
}

#audio-state {
	width: 32px;
	height: 32px;
}

#audio-state:hover {cursor: pointer;}

/*            */
/* Page Setup */
/*            */

.section {
	min-height: calc(100% - 75px);
	width: 100%;
	padding: 25px;
}

.title {
	color: white;
	text-align: center;
	padding-bottom: 25px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: bolder;
	font-size: clamp(2.5rem, 5vw, 5rem);
}

.paragraph-image {
	height: auto;  
	max-width: 40%;
}

.desc {
	color: white;
	font-size: clamp(1rem, 2vw, 2.2rem);
	font-family: 'Noto Sans', sans-serif;
}

.title-wrapper {
	display: flex;
	align-items: center;
	flex-direction: column;
}

#has-subtitle {
	padding: 0;
}

.subtitle {
	color: white;
	text-align: center;
	padding-bottom: 25px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 300;
	letter-spacing: 5px;
	font-size: clamp(1rem, 4vw, 2rem);
}

/*                                    */
/* Overview/(Underlying) Meaning Page */
/*                                    */

#overview-wrapper, #meaning-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	gap: 25px;
	height: 100%;
}

#meaning {
	padding: 25px;
}

/*            */
/* Links Page */
/*            */

#links-title {
	padding: 0;
}

#link-disclaimer {
	color: white;
	text-align: center;
	font-family: 'Noto Sans', sans-serif;
	padding: 25px;
}

#red {
	color: red;
	font-weight: 600;
}

#links-wrapper, #credits-wrapper {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 30px 0 30px;
}

.link-name {
	font-size: clamp(1rem, 2vw, 1.2rem);
	font-family: 'Noto Sans', sans-serif;
	font-weight: bolder;
	color: white;
}

.link-source, .link-used {
	font-size: clamp(0.6rem, 2vw, 0.8rem);
	font-family: 'Noto Sans', sans-serif;
	font-weight: bolder;
	color: gainsboro;	
}

.link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	width: 50%;
	border-radius: 8px;
	background-color: #323232;
}

.link:nth-child(1) {transition-delay: 100ms;}
.link:nth-child(2) {transition-delay: 200ms;}
.link:nth-child(3) {transition-delay: 300ms;}
.link:nth-child(4) {transition-delay: 400ms;}

.credit-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	width: 50%;
	border-radius: 8px;
	background-color: #323232;
}

.credit-link:nth-child(1) {transition-delay: 100ms;}
.credit-link:nth-child(2) {transition-delay: 200ms;}
.credit-link:nth-child(3) {transition-delay: 300ms;}
.credit-link:nth-child(4) {transition-delay: 400ms;}
.credit-link:nth-child(5) {transition-delay: 500ms;}
.credit-link:nth-child(6) {transition-delay: 600ms;}
.credit-link:nth-child(7) {transition-delay: 700ms;}


.link[appear] {animation: appear 500ms ease-in-out forwards;}

.link[disappear] {animation: disappear 500ms ease-in-out forwards;}

@keyframes disappear {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.link-images-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

.link-buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	outline: none;
	border: none;
	cursor: pointer;
}

.link-source {
	display: flex;
	align-items: center;
	gap: 5px;
}

.link-images {
	width: 32px;
	height: 32px;
}

.link-verification {
	width: 18px;
	height: 18px;
}

/* Animations */

/*            */
/* Link Modal */
/*            */

#link-modal {
	width: 50%;
	height: 100%;
	background-color: #323232;
	border-radius: 8px;
	opacity: 0;
}

#link-modal[appear] {animation: appear 500ms 500ms ease-in-out forwards;}

#link-modal[disappear] {animation: disappear 500ms ease-in-out forwards;}

@keyframes appear {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

#modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: 'Noto Sans', sans-serif;
	color: white;
	padding: 10px;
	font-size: clamp(1.2rem, 4vw, 1.4rem);
	border-bottom: 2px solid white;
}

#modal-exit {
	display: flex;
	align-items: center;
	justify-content: center;
}

#modal-exit-image {
	width: 32px;
	height: 32px;
}

#modal-exit-image:hover {
	cursor: pointer;
}

#modal-content {
	display: flex;
	flex-direction: column;
	padding: 10px;
	gap: 10px;
}

.modal-attr {
	display: flex;
	gap: 5px;
	align-items: flex-start;
	flex-direction: column;
}

.source-title {
	color: white;
	font-family: 'Noto Sans', sans-serif;
	font-size: clamp(1rem, 4vw, 1.2rem);
	width: 100%;
	border-bottom: 1px solid white;
}

.source-detail {
	color: white;
	font-family: 'Noto Sans', sans-serif;
	font-size: clamp(0.8rem, 4vw, 1rem);	
}

/*              */
/* Credits Page */
/*              */

.credit-favicon {
	width: 48px;
	height: 48px;
}

.credits-link-wrapper {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 10px;
}

/*                           */
/* Dynamic Content Awareness */
/*                           */

/* Phone/Tablet Size */
@media screen and (max-width: 950px) {
	#overview-wrapper {
		flex-direction: column;
	}
	#meaning-wrapper {
		flex-direction: column-reverse;
	}
	.desc {
		text-align: center;
	}
	#overview-image {
		max-width: 70%;
	}
	.link, #link-modal, .credit-link {
		width: 100%;
	}
	.desc {
		font-size: clamp(1rem, 3vw, 2.2rem);
	}
}

@media screen and (max-width: 501px) {
	#navbar-links-left, #navbar-links-right {
		display: none;
	}
	#navbar[deactivated], #navbar[activated] {
		justify-content: center;
	}
}

@media screen and (max-width: 320px) {
	#links-wrapper, #credits-wrapper {
		padding: 0 0 0 0;
	}
}