@import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Cinzel+Decorative&display=swap'); /* Reset & Base Styles */ * { box-sizing: border-box; } .mission-cards, .example-cards { display: flex; justify-content: center; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; } .mission-card, .example-image { max-width: 250px; height: auto; border-radius: 8px; } .hint { text-align: center; font-size:.9rem; opacity:.85; margin-top:.25rem; } /* ---------------------------------------------------------------- */ /* DESIGNER FOOTER STYLES */ /* ---------------------------------------------------------------- */ .designer-footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #333; font-size: 0.85rem; color: #777; /* Subtler text color */ } .designer-footer a { color: #f4e6c5; /* Highlight links with the theme's lighter color */ text-decoration: none; font-weight: bold; } .designer-footer a:hover { text-decoration: underline; } body, html { margin: 0; padding: 0; font-family: 'Cinzel', serif; background: #0d0d0d; color: #f4e6c5; font-size: 16px; line-height: 1.5; } .selectedBtn { background-color: #ffd700 !important; /* Bright gold */ color: #000 !important; /* Strong text contrast */ border: 3px solid #ffffff; /* White border for clarity */ font-weight: bold; box-shadow: 0 0 10px #ffd700; cursor: default; } /* General Utility Classes */ .hidden { display: none !important; } /* Container */ .container { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; max-width: 500px; margin: auto; } /* Headings */ h1, h2, h3 { text-align: center; color: #e3c97b; font-family: 'Cinzel Decorative', cursive; border-bottom: 2px solid #e3c97b; padding-bottom: 0.5rem; margin: 1rem 0 0.5rem 0; } /* Game Messages */ #gameMessages { text-align: center; font-weight: bold; color: #ffdd75; padding: 0.5rem; } /* Buttons & Inputs */ button, input, select { width: 100%; padding: 0.75rem; font-size: 1.1rem; border: 2px solid #e3c97b; border-radius: 8px; background: #1a1a1a; color: #f4e6c5; font-family: 'Cinzel', serif; } button:hover { background-color: #333300; color: #fff8dc; } input { background: #1a1a1a; color: #f4e6c5; } /* Cards */ .cardBtn { display: inline-block; background: #262626; border: 1px solid #e3c97b; padding: 0.75rem; margin: 0.5rem; border-radius: 4px; cursor: pointer; font-weight: bold; transition: all 0.2s; } .cardBtn:hover { background-color: #403300; } .cardBtn.discarded { border: 2px dashed #ff6666; background: #330000; opacity: 0.7; } /* Hidden Utility */ .hidden { display: none !important; } /* Table Styles */ table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin-top: 1rem; background: rgba(255, 255, 255, 0.03); } th, td { padding: 0.6rem; border: 1px solid #e3c97b; text-align: center; } th { background-color: #1a1a1a; color: #e3c97b; } td { background-color: #0d0d0d; } /* Filmstrip Styling */ .filmstrip-background { background-image: url('images/filmstrip.png'); background-size: cover; background-position: center; text-shadow: 0 0 4px black; } .filmstrip-background td, .filmstrip-background th { background-color: rgba(0, 0, 0, 0.6); } /* Responsive Design */ @media (max-width: 600px) { .cardBtn { display: block; width: 100%; } button, input, select { width: 100%; } table, th, td { font-size: 0.9rem; } .container { padding: 0.75rem; } } a { color: #e3c97b; text-decoration: none; font-weight: bold; } a:hover { color: #fff8dc; text-decoration: underline; } /* Font Import (Add this to your HTML ) */ /* */