@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Playfair+Display:wght@600;700&display=swap');

* { box-sizing: border-box; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    margin: 0;
    color: #FFFFFF;
    background: url('images/homepage.jpg') center/90% no-repeat fixed, #2c014d;
    background-color: #2c014d;
    line-height: 1.6;
}

.site-header { padding: 0.5rem 1rem; text-align: center; background: rgba(255, 255, 255, 0.35); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.site-header h1 { margin: 0 0 0.5rem 0; font-size: 2.5rem; font-family: 'Dancing Script', cursive; color: #003366; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); }
.site-header h2 { margin: 0; font-size: 1.25rem; font-family: 'Playfair Display', serif; color: #FFFFFF; font-weight: 600; letter-spacing: 1px; }
.site-header p { margin: 0.5rem 0 0 0; color: #666; font-style: italic; }

.nav { list-style: none; margin: 1rem 0 0 0; padding: 0; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.nav a { color: #003366; text-decoration: none; font-weight: 500; font-family: 'Dancing Script', cursive; font-size: 1.3rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; position: relative; }
.nav a:hover { color: #663399; transform: translateY(-2px); }
.nav a:hover::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 2px; background: #663399; }

.container { max-width: 1000px; margin: 6rem auto; padding: 0 1rem; }

.cards { display: flex; gap: 2rem; margin-top: 2rem; }
.card { display: block; flex: 1; background-color: #fff; background-image: url('images/TarotPlaceholder.png'); background-size: cover; background-position: center; padding: 2rem; border-radius: 12px; text-decoration: none; color: #FFFFFF; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; position: relative; overflow: hidden; min-height: 250px; }
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); }
.card h3, .card p { position: relative; z-index: 1; }
.card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); }
.card h3 { font-family: 'Playfair Display', serif; font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem 0; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); }
.card p { font-family: system-ui, -apple-system, "Segoe UI", Arial; font-size: 1rem; line-height: 1.5; }

.reader-card { background-color: #fff; background-image: url('images/reader.jpg'); background-size: cover; background-position: center; }


.Coming {
    display: block;
    flex: 1;
    background-color: #fff;
    background-image: url('images/Coming.png');
    background-size: cover;
    background-position: center;
    padding: 3rem;
    border-radius: 12px;
    text-decoration: none;
    color: #FFFFFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 800px;
}

footer { text-align: center; padding: 2rem 1rem; color: #fff; background: rgba(0, 0, 0, 0.3); margin-top: 4rem; }

@media (max-width: 600px) { 
  .cards { flex-direction: column; }
  .site-header h1 { font-size: 2rem; }
  .nav { gap: 1rem; }
}