From f59649d8110cd1e28a21c664cd8458531ca8d9aa Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Sat, 3 Sep 2022 13:04:05 -0700
Subject: [PATCH] doc: add styles in MovieInfo stylesheet

---
 src/components/MovieInfo/styles.js | 75 ++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/src/components/MovieInfo/styles.js b/src/components/MovieInfo/styles.js
index e69de29..a117c56 100644
--- a/src/components/MovieInfo/styles.js
+++ b/src/components/MovieInfo/styles.js
@@ -0,0 +1,75 @@
+import { makeStyles } from '@mui/styles';
+
+export default makeStyles((theme) => ({
+    containerSpaceAround: {
+        display: 'flex',
+        justifyContent: 'space-around',
+        margin: '10px 0 !important',
+        [theme.breakpoints.down('sm')]: {
+            flexDirection: 'column',
+            flexWrap: 'wrap',
+        },
+    },
+    poster: {
+        borderRadius: '20px',
+        boxShadow: '0.5em 1em 1em rgb(64, 64, 70)',
+        width: '80%',
+        [theme.breakpoints.down('md')]: {
+            margin: '0 auto !imporatant',
+            width: '50%',
+        },
+        [theme.breakpoints.down('sm')]: {
+            margin: '0 auto !imporatant',
+            width: '100%',
+            height: '350px',
+            marginBottom: '30px',
+        },
+    },
+    genresContainer: {
+        margin: '10px 0 !imaportant',
+        display: 'flex',
+        justifyContent: 'space-around',
+        flexWrap: 'wrap',
+    },
+    genreImage: {
+        filter: theme.palette.mode === 'dark' && 'invert(1)',
+        marginRight: '10px',
+    },
+    links: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        textDecoration: 'none',
+        [theme.breakpoints.down('sm')]: {
+            padding: '0.5rem 1rem',
+        },
+    },
+    castImage: {
+        width: '100%',
+        maxWidth: '7em',
+        height: '8em',
+        objectFit: 'cover',
+        borderRadius: '10px',
+    },
+    buttonContainer: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+        [theme.breakpoints.down('sm')]: {
+            flexDirection: 'column',
+        },
+    },
+    modal: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    video: {
+        width: '50%',
+        height: '50%',
+        [theme.breakpoints.down('sm')]: {
+            width: '90%',
+            height: '90%',
+        },
+    },
+}));