/* Google Fonts Link */
@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700;900&display=swap");
/* Reset CSS */
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html {
	font-size: clamp(8px, 1vw, 10px);
	scrollbar-width: thin;
	scrollbar-color: #2c2c2c #0b0b0b;
}

html::-webkit-scrollbar {
	width: 8px;
}

html::-webkit-scrollbar-track {
	background-color: #0b0b0b;
}

html::-webkit-scrollbar-thumb {
	background-color: #2c2c2c;
}

body {
	color: #ffffff;
	background-color: #0b0b0b;
	font-size: 1.6rem;
	font-family: "Zen Old Mincho", serif;
}

h1,
h2 {
	font-weight: 900;
}

/* Container Style */
.container {
	width: 100%;
	max-width: 1140px;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto;
}

/* Primary Button Style */
.primary-btn {
	display: inline-block;
	color: #ffffff;
	font-size: 2rem;
	font-weight: 700;
	padding: 1.5rem 2rem;
	border: 1px solid #ffffff;
	text-decoration: none;
	margin-top: 1rem;
	-webkit-box-shadow: 2px 2px 0 #0b0b0b, 0.3em 0.3em 0 #ffffff;
	box-shadow: 2px 2px 0 #0b0b0b, 0.3em 0.3em 0 #ffffff;
	-webkit-transition: all ease-in-out 0.4s;
	-o-transition: all ease-in-out 0.4s;
	-moz-transition: all ease-in-out 0.4s;
	transition: all ease-in-out 0.4s;
}

.primary-btn:hover,
.primary-btn:focus {
	color: #0b0b0b;
	background-color: #ffffff;
	-webkit-box-shadow: 2px 2px 0 #0b0b0b, 0.3em 0.3em 0 #2c2c2c;
	box-shadow: 2px 2px 0 #0b0b0b, 0.3em 0.3em 0 #2c2c2c;
}

/* Common Banner and Footer Section Style */
.banner,
.footer {
	text-align: center;
	padding: 10rem 0;
	background-color: #0b0b0b;
}

.banner__title,
.footer__title {
	font-size: 4rem;
}

@media screen and (min-width: 600px) {
	.banner__title,
	.footer__title {
		font-size: 5rem;
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media screen and (min-width: 780px) {
	.banner__title,
	.footer__title {
		font-size: 6rem;
	}
}

.banner__text,
.footer__text {
	margin: 2rem auto;
}

@media screen and (min-width: 500px) {
	.banner__text,
	.footer__text {
		font-size: 2rem;
	}
}

@media screen and (min-width: 600px) {
	.banner__text,
	.footer__text {
		max-width: 60%;
	}
}

/* Banner Section Style */
.banner__sub-title {
	font-size: 3rem;
	background: -webkit-gradient(
		linear,
		right top,
		left top,
		from(#b25d46),
		color-stop(#a74141),
		color-stop(#743879),
		to(#4a3ca0)
	);
	background: -webkit-linear-gradient(
		right,
		#b25d46,
		#a74141,
		#743879,
		#4a3ca0
	);
	background: -moz-linear-gradient(right, #b25d46, #a74141, #743879, #4a3ca0);
	background: -o-linear-gradient(right, #b25d46, #a74141, #743879, #4a3ca0);
	background: linear-gradient(to left, #b25d46, #a74141, #743879, #4a3ca0);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Timeline Section Style */
.timeline {
	position: relative;
}

.timeline__progressbar {
	--width: 2px;
	--left: -moz-calc(((15vw / 2) + 15px) - (var(--width) / 2));
	--left: calc(((15vw / 2) + 15px) - (var(--width) / 2));
	position: absolute;
	left: var(--left);
	width: var(--width);
	height: 100%;
	background-color: #2c2c2c;
	z-index: -1;
}

.timeline__progressbar::after {
	content: "";
	position: fixed;
	top: 0;
	left: var(--left);
	width: var(--width);
	height: 50vh;
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#b25d46),
		color-stop(#a74141),
		color-stop(#743879),
		to(#4a3ca0)
	);
	background: -webkit-linear-gradient(#b25d46, #a74141, #743879, #4a3ca0);
	background: -moz-linear-gradient(#b25d46, #a74141, #743879, #4a3ca0);
	background: -o-linear-gradient(#b25d46, #a74141, #743879, #4a3ca0);
	background: linear-gradient(#b25d46, #a74141, #743879, #4a3ca0);
}

@media screen and (min-width: 800px) {
	.timeline__progressbar {
		--width: 3px;
		--left: -moz-calc(50% - (var(--width) / 2));
		--left: calc(50% - (var(--width) / 2));
	}
}

.timeline__block {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 15vw 1fr;
	grid-template-columns: 15vw 1fr;
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	-webkit-box-align: start;
	-webkit-align-items: start;
	-moz-box-align: start;
	-ms-flex-align: start;
	align-items: start;
}

@media screen and (min-width: 800px) {
	.timeline__block {
		-ms-grid-columns: 1fr 15vh 1fr;
		grid-template-columns: 1fr 15vh 1fr;
	}
}

@media screen and (min-width: 800px) {
	.timeline__block__head {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1 / 2;
		text-align: right;
		position: -webkit-sticky;
		position: sticky;
		top: 50vh;
	}
}

.timeline__block__body {
	grid-column: 2 / -1;
}

@media screen and (min-width: 800px) {
	.timeline__block__body {
		grid-column: 3 / -1;
	}
}

.timeline__block__bullet-point {
	position: -webkit-sticky;
	position: sticky;
	top: 50vh;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

@media screen and (min-width: 800px) {
	.timeline__block__bullet-point {
		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
		grid-column: 2 / 3;
	}
}

.timeline__block__circle {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border: 4px solid #0b0b0b;
	background-color: #ffffff;
	border-radius: 50%;
}

.timeline__block__title {
	font-size: 3rem;
}

@media screen and (max-width: 799px) {
	.timeline__block__title {
		margin-top: -1.5rem;
		margin-bottom: 2rem;
	}
}

@media screen and (min-width: 800px) {
	.timeline__block__title {
		line-height: 0;
	}
}

.timeline__block__text {
	font-size: 1.6rem;
}

@media screen and (min-width: 500px) {
	.timeline__block__text {
		font-size: 1.8rem;
	}
}

.timeline__hider {
	position: -webkit-sticky;
	position: sticky;
	bottom: -2px;
	width: 100%;
	height: 50vh;
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(transparent),
		to(#0b0b0b)
	);
	background: -webkit-linear-gradient(transparent, #0b0b0b);
	background: -moz-linear-gradient(transparent, #0b0b0b);
	background: -o-linear-gradient(transparent, #0b0b0b);
	background: linear-gradient(transparent, #0b0b0b);
	pointer-events: none;
}
/*# sourceMappingURL=style.css.map */
.user-profile {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.profile-picture {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 10px;
}

.username {
	font-weight: bold;
}

.bio {
	font-style: italic;
}

.rating {
	unicode-bidi: bidi-override;
	direction: rtl;
	text-align: left;
}

.rating input {
	display: none;
}

.rating label {
	float: right;
	padding: 0 1px;
	cursor: pointer;
}

.rating label:before {
	content: "\2605";
	font-size: 36px;
	color: #ccc;
}

.rating input:checked ~ label:before {
	color: #ffcc00;
}
#button {
	background-color: black; /* Green */
	border: none;
	color: white;
	padding: 16px 32px;
	text-align: center;
	font-family: ;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	transition-duration: 0.4s;
	font-family: "Zen Old Mincho", serif;
	cursor: pointer;
}

#button:hover {
	color: black;
	background-color: white;
	border-radius: 2%;
}
.center-button {
	display: block;
	margin: 0 auto;
	text-align: center;
	background-color: white;
	color: black;
	border: 2px solid black;
}

#gameplay-button {
	color: white;
	background-color: black;
	border: 1px solid white;
	border-radius: 50px;
	font-size: 25px;
}
.music-player {
	text-align: center;
	margin: 20px;
}

.play {
	padding: 10px 20px;
	font-size: 16px;
	background-color: black;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.play:hover {
	background-color: black;
}

audio {
	display: none;
}