1 files changed, 70 insertions, 0 deletions
diff --git a/src/app/movies/styles/search.module.css b/src/app/movies/styles/search.module.css
new file mode 100644
index 0000000..55d4591
--- /dev/null
+++ b/src/app/movies/styles/search.module.css
@@ -0,0 +1,70 @@
+.Main {
+	margin: 0 0.2rem 0 0.2rem;
+}
+
+.InputContainer {
+	display: flex;
+	align-items: center;
+	background-color: #121212;
+	padding: 0.2rem;
+	width: 40vw;
+	border-radius: 0.5rem;
+}
+
+.SearchIcon {
+	margin-left: 0.4rem;
+}
+
+.InputContainer input {
+	background-color: transparent;
+	outline: none;
+	border: none;
+	padding: 0.4rem;
+	font-family: "Lexend Deca", serif;
+	margin-left: 0.2rem;
+	font-size: large;
+	color: white;
+	width: 100%;
+}
+
+/* Search Results */
+
+.MovieSearchResultsContainer {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+	grid-gap: 0.5rem;
+	align-items: center;
+	margin: 0.2rem 0.2rem 0 0.2rem;
+}
+
+.MovieSearchResultsContainer:hover .MovieResultsPrev {
+	opacity: 0.5;
+}
+
+.MovieSearchResultsContainer:hover .MovieResultsPrev:hover {
+	opacity: 1;
+	scale: 1.02;
+}
+
+.MovieResultsPrev {
+	transition: opacity 200ms ease, scale 200ms ease;
+}
+
+.MovieEntry {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	color: white;
+	backdrop-filter: blur(10px);
+	padding: 0.4rem;
+	background-color: #1212129f;
+}
+
+.MovieEntry img {
+	border-radius: 0.5rem;
+}
+
+.MovieEntry p {
+	margin: 0 0.2rem 0 0;
+	font-size: 18px;
+}