3 files changed, 23 insertions, 13 deletions
diff --git a/src/app/anime/search/components/fetchedInfo.js b/src/app/anime/search/components/fetchedInfo.js
index 17c9673..9a1d187 100644
--- a/src/app/anime/search/components/fetchedInfo.js
+++ b/src/app/anime/search/components/fetchedInfo.js
@@ -1,10 +1,10 @@
-import "../search.css";
+import styles from "../search.module.css";
 import Link from "next/link";
 import Image from "next/image";
 
 export default async function fetchedInfo(data) {
 	return (
-		<div className="animeEntry">
+		<div className={styles.animeEntry}>
 			{data ? (
 				data.results && data.results.length > 0 ? (
 					data.results.map((item, index) => (
@@ -13,11 +13,11 @@ export default async function fetchedInfo(data) {
 							href={`/anime/${item.id}`}
 							style={{ textDecoration: "none" }}
 						>
-							<div className="anime">
+							<div className={styles.anime}>
 								<p>{item.title}</p>
 								<Image
 									src={item.image}
-									className="animeImage"
+									className={styles.animeImage}
 									width={120}
 									height={160}
 									alt="Drama Poster"
diff --git a/src/app/anime/search/page.jsx b/src/app/anime/search/page.jsx
index 3d63484..ce037cb 100644
--- a/src/app/anime/search/page.jsx
+++ b/src/app/anime/search/page.jsx
@@ -1,6 +1,6 @@
 "use client";
 
-import "./search.css";
+import styles from "./search.module.css";
 import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library
 import { useState } from "react";
 import Results from "./components/fetchInfo";
@@ -33,9 +33,9 @@ export default function Input() {
 
 	return (
 		<div>
-			<div className="inputContainer">
-				<div className="searchContainer">
-					<FaSearch className="searchIcon" />
+			<div className={styles.inputContainer}>
+				<div className={styles.searchContainer}>
+					<FaSearch className={styles.searchIcon} />
 					<input
 						onChange={(event) => {
 							if (event.target.value.trim() !== "") {
@@ -44,14 +44,13 @@ export default function Input() {
 						}}
 						onKeyDown={(event) => handleKeyPress(event)}
 						placeholder="Enter anime title"
+						className={styles.SearchInput}
 					></input>
 				</div>
 			</div>
 
 			{loading && (
-				<p className="waitWhileLoading"
-
-				>
+				<p className={styles.waitWhileLoading}>
 					Please wait while we crunch all the data for you
 				</p>
 			)}
diff --git a/src/app/anime/search/search.css b/src/app/anime/search/search.module.css
index 0a89a68..28fae6e 100644
--- a/src/app/anime/search/search.css
+++ b/src/app/anime/search/search.module.css
@@ -36,6 +36,14 @@
 	overflow-x: auto;
 }
 
+.animeEntry:hover .anime {
+	opacity: 0.5;
+}
+
+.animeEntry:hover .anime:hover {
+	opacity: 1;
+}
+
 .animeEntry::-webkit-scrollbar {
 	height: 5px;
 }
@@ -61,12 +69,15 @@
 	margin: 10px 10px 0px 0px;
 	border-radius: 10px;
 	border-width: 4px;
+	transition: opacity 400ms ease-in;
+	background-color: #353535a6;
+
 }
 
 .anime p {
 	color: white;
-	width: 25dvh;
-	font-family: "Lato";
+	width: 20dvw;
+	font-family: "Atkinson";
 	font-size: 18px;
 }