Quick ```Styling``` Update

including:
```hover```'s, ```background```'s & ```color```'s.

docs/assets/css/styles.css

@@ -1,6 +1,11 @@
 /*=============== GOOGLE FONTS ===============*/
 @import url("https://fonts.googleapis.com/css2?family=Monsterrat");
 
+::selection {
+  color: #fff;
+  background-color: aqua; 
+}
+
 /*=============== VARIABLES CSS ===============*/
 :root {
   --header-height: 3.5rem;
@@ -17,7 +22,6 @@
   --normal-font-size: .938rem;
   --smaller-font-size: .75rem;
 }
-
 /* Responsive typography */
 @media screen and (min-width: 1024px) {
   :root {

src/components/Dropdown/Dropdown.js

@@ -73,12 +73,13 @@ const DropdownOptions = styled.ul`
   /* top: 100%; */
   min-width: 100%;
   display: flex;
-  border: 1px solid #272639;
+  border: 2px solid #555;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin-top: 5px;
   padding: 0.5rem 0;
-  border-radius: 0.4rem;
+  border-radius: 5px;
 `;
 const DropdownOption = styled.li`
   white-space: nowrap;

src/components/EpisodeLinks/EpisodeLinksList.js

@@ -77,7 +77,7 @@ const EpisodeLinksList = ({ episodeArray, episodeNum }) => {
 
 const EpisodesWrapper = styled.div`
   margin-top: 1rem;
-  border: 1px solid #272639;
+  border: 1px solid #444;
   border-radius: 0.4rem;
   .header {
     display: flex;
@@ -95,7 +95,6 @@ const EpisodesWrapper = styled.div`
     color: white;
     font-family: 'Gilroy-Medium', sans-serif;
   }
-  box-shadow: 10px 10px 0px rgba(20, 20, 25, 1);
 `;
 
 const Episodes = styled.div`

src/components/Home/AnimeCards.js

@@ -92,6 +92,12 @@ const Wrapper = styled.div`
     border-radius: 0.5rem;
     margin-bottom: 0.3rem;
     object-fit: cover;
+    transition: 0.2s;
+
+    :hover {
+      transform: scale(0.95);
+    }
+
     @media screen and (max-width: 600px) {
       width: 120px;
       height: 180px;
@@ -107,6 +113,7 @@ const Wrapper = styled.div`
     font-size: 1rem;
     font-family: "Gilroy-Medium", sans-serif;
   }
+
 `;
 
 export default AnimeCards;

src/components/Home/Carousel.js

@@ -177,19 +177,19 @@ const Content = styled.div`
 
 const Button = styled(Link)`
   color: #ffffff;
-  background-color: rgb(24, 26, 27);
+  background-color: rgba( 15, 17, 17, 1);
   font-family: 'Gilroy-Bold', sans-serif;
   text-decoration: none;
   outline: none;
   border: none;
   padding: 0.75rem 1.3rem 0.75rem 1.3rem;
-  border-radius: 0.4rem;
+  border-radius: 0.5rem;
   cursor: pointer;
   font-size: 0.9rem;
-  transition: 0.5s;
+  transition: 0.3s;
 
   :hover {
-    transform: scale(1.1);
+    transform: scale(1.08);
   }
 
   @media screen and (max-width: 600px) {

src/pages/AnimeDetails.js

@@ -291,7 +291,7 @@ const Button = styled(Link)`
 
   :hover {
     transform: scale(1.05);
-    background-color: rgb(255 0 79);
+    background-color: rgb(155 0 59);
     color: rgb(255 255 255);
   }
 

src/pages/Home.js

@@ -114,11 +114,21 @@ function Home({ changeMetaArr }) {
 }
 
 const Links = styled(Link)`
-  color: #ffffff;
+  color: rgba(158,162,164,1);
+  background: rgb(19, 21, 22);
+  padding: 0.5rem;
+  border-radius: 5px;
+  border: 0.5px solid rgba(48,52,54,1);
   font-size: 1.1rem;
   font-family: 'Gilroy-Medium', sans-serif;
+  text-decoration: none;
+  transition: 0.2s;
+
+  :hover {
+    transform: scale(1.08);
+  }
   @media screen and (max-width: 600px) {
-    color: #ffffff;
+    color: #ffffff; 
     font-size: 1rem;
     font-family: 'Gilroy-Medium', sans-serif;
   }