Refactor styles and imports for consistency and maintainability:

- **CSS restructuring**: Moved `styles` folder into `src` for better organization.
- **Updated imports**: Adjusted component CSS imports to reflect new paths.
- **Component tweaks**:
  - Increased HoverCard width from `350px` to `400px` for better visual balance.
  - Adjusted Footer layout: reorganized copyright and added email link.
  - Modified Drinks circle dimensions (from `6em` to `9em`) for improved design.
- **Footer styles**: Changed copyright section's layout with top spacing and border adjustments.

src/styles/components/HoverCard.css

@@ -0,0 +1,114 @@
+.hover-card {
+	position: relative;
+	width: 400px;
+	height: 400px;
+	border-radius: var(--border-radius);
+	background-color: var(--color-accent-green);
+	box-shadow: var(--box-shadow);
+	transition: transform var(--transition-standard);
+	overflow: hidden;
+	margin: var(--margin-standard);
+	display: flex;
+	flex-direction: column;
+}
+
+.hover-card:hover {
+	transform: translateY(-5px);
+}
+
+.card-title {
+	padding: 15px 15px 5px 15px;
+	margin: 0;
+	color: var(--color-accent-beige);
+	font-size: var(--font-size-medium);
+	text-align: center;
+	order: -2;
+}
+
+.card_date {
+	padding: 0 15px 15px 15px;
+	margin: 0;
+	color: var(--color-accent-beige);
+	font-size: var(--font-size-small);
+	text-align: center;
+	font-style: italic;
+	order: -1;
+}
+
+.image-container {
+	flex-grow: 1;
+	position: relative;
+	overflow: hidden;
+}
+
+.card-image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	transition: opacity 0.3s ease;
+}
+
+.hover-text {
+	font-size: var(--font-size-small-medium);
+	text-align: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: var(--color-accent-green-transparent);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 20px;
+	opacity: 0;
+	transition: opacity var(--transition-standard);
+}
+
+.hover-text div {
+	color: var(--color-accent-beige);
+	text-align: center;
+	max-height: 100%;
+	width: 100%;
+	overflow-y: auto;
+	padding-right: 5px;
+}
+
+.hover-text div::-webkit-scrollbar {
+	width: 5px;
+}
+
+.hover-text div::-webkit-scrollbar-track {
+	background: rgba(0, 0, 0, 0.1);
+	border-radius: 10px;
+}
+
+.hover-text div::-webkit-scrollbar-thumb {
+	background: var(--color-accent-beige);
+	border-radius: 10px;
+}
+
+.hover-text div {
+	scrollbar-width: thin;
+	scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
+}
+
+.hover-card:hover .hover-text {
+	opacity: 1;
+}
+
+.hover-card:hover .card-image {
+	opacity: 0.1;
+}
+
+.hover-text p {
+	margin: 0;
+	padding: 0;
+}
+
+@media (max-width: 768px) {
+	.hover-card {
+		width: 100%;
+		max-width: 350px;
+	}
+}