1/* Reset and base styles */
2* {
3    margin: 0;
4    padding: 0;
5    box-sizing: border-box;
6}
7
8body {
9    font-family: 'Montserrat', sans-serif; /* Clean sans-serif for body */
10    color: #000; /* Black text */
11    background-color: #fff; /* White background */
12    line-height: 1.6;
13}
14
15h1, h2 {
16    font-family: 'Playfair Display', serif; /* Elegant serif for headings */
17    color: #000;
18}
19
20/* Navigation */
21nav {
22    position: fixed;
23    top: 0;
24    width: 100%;
25    background-color: #fff;
26    border-bottom: 1px solid #000;
27    z-index: 100;
28}
29
30nav ul {
31    list-style: none;
32    display: flex;
33    justify-content: center;
34    padding: 1rem;
35}
36
37nav a {
38    color: #000;
39    text-decoration: none;
40    margin: 0 1rem;
41    font-weight: bold;
42}
43
44nav a:hover {
45    text-decoration: underline;
46}
47
48/* Hero Section */
49#hero {
50    height: 100vh;
51    display: flex;
52    flex-direction: column;
53    justify-content: center;
54    align-items: center;
55    text-align: center;
56    padding: 2rem;
57    background-color: #fff;
58}
59
60.hero-content h1 {
61    font-size: 2.5rem;
62    margin-bottom: 1rem;
63}
64
65.hero-image {
66    max-width: 300px;
67    margin-top: 2rem;
68}
69
70/* Sections */
71section {
72    padding: 4rem 2rem;
73    max-width: 800px;
74    margin: 0 auto;
75    text-align: center;
76}
77
78section h2 {
79    margin-bottom: 2rem;
80    font-size: 2rem;
81}
82
83.book-image, .author-image {
84    max-width: 200px;
85    margin: 2rem 0;
86}
87
88/* Button */
89.btn {
90    display: inline-block;
91    background-color: #000;
92    color: #fff;
93    padding: 1rem 2rem;
94    text-decoration: none;
95    border-radius: 5px;
96    margin-top: 2rem;
97}
98
99.btn:hover {
100    background-color: #333;
101}
102
103/* Creations Grid */
104.creations-grid {
105    display: flex;
106    justify-content: space-around;
107    flex-wrap: wrap;
108}
109
110.item {
111    flex: 1 1 200px;
112    margin: 1rem;
113    text-align: center;
114}
115
116.item img {
117    max-width: 150px;
118}
119
120/* Footer */
121footer {
122    background-color: #000;
123    color: #fff;
124    text-align: center;
125    padding: 2rem;
126}
127
128footer ul {
129    list-style: none;
130    display: flex;
131    justify-content: center;
132    margin-top: 1rem;
133}
134
135footer a {
136    color: #fff;
137    margin: 0 1rem;
138}
139
140/* Responsive */
141@media (max-width: 768px) {
142    #hero h1 {
143        font-size: 2rem;
144    }
145    nav ul {
146        flex-direction: column;
147    }
148    .creations-grid {
149        flex-direction: column;
150    }
151}