Merge pull request #25 from real-zephex/improvement-2

Improvement 2

1 files changed, 75 insertions, 0 deletions

diff --git a/src/app/anime/styles/info.module.css b/src/app/anime/styles/info.module.css
new file mode 100644
index 0000000..4216b37
--- /dev/null
+++ b/src/app/anime/styles/info.module.css
@@ -0,0 +1,75 @@
+.main {
+	width: 50%;
+	margin: 60px auto;
+	color: white;
+}
+
+.AnimeHeroSection {
+	display: flex;
+	align-items: center;
+}
+
+.AnimeHeroSection strong {
+	color: var(--neon-yellow);
+}
+
+.AnimeHeroSection img {
+	width: auto;
+	height: auto;
+	padding: 0.5rem 0.7rem 0.5rem 0.7rem;
+	border-radius: 1rem;
+}
+
+.animeDescription {
+	max-height: 100px;
+	overflow: auto;
+	color: var(--light-sky);
+}
+
+.animeDescription::-webkit-scrollbar {
+	width: 3px;
+}
+
+.animeDescription::-webkit-scrollbar-thumb {
+	background-color: var(--nord-yellow);
+	border-radius: 1rem;
+}
+
+.AnimeHeroSection p {
+	margin: 0;
+}
+
+.animeTitle {
+	font-size: 28px;
+	color: var(--neon-green);
+}
+
+@media screen and (max-width: 1024px) {
+	.main {
+		width: 100%;
+	}
+
+	.AnimeHeroSection {
+		font-size: 14px;
+	}
+
+	.animeTitle {
+		font-size: 24px;
+	}
+
+	.AnimeHeroSection img {
+		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
+	}
+}
+
+@media screen and (max-width: 425px) {
+	.AnimeHeroSection {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+	}
+
+	.animeTitle {
+		text-align: center;
+	}
+}
\ No newline at end of file