/*
  Roser Studios website stylesheet

  This stylesheet defines a dark, sleek look with subtle sci‑fi accents.  The
  palette uses electric blues and magentas to evoke a nebula motif, while
  keeping the overall design clean and modern.  It defines reusable
  components for navigation, hero headers, content sections, feature cards
  and footers.  Media queries ensure the layout adapts gracefully to
  smaller screens.
*/

:root {
  --primary-color: #00bcd4;      /* bright cyan */
  --secondary-color: #e040fb;    /* violet/magenta */
  --accent-color: #00e5ff;       /* lighter cyan */
  --bg-color: #0a192f;           /* very dark blue */
  --card-bg: #112240;            /* dark card background */
  --text-color: #e5e5e5;         /* off‑white for body text */
  --muted-color: #8892b0;        /* muted gray for secondary text */
  --border-radius: 8px;
}

/* Global resets */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg-color);
  color: var(--text-color);
  font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--secondary-color);
}

/* Navigation bar */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  backdrop-filter: blur(6px);
}

nav .logo {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--accent-color);
  display: flex;
  align-items: center;
}

nav .logo img {
  display: block;
  height: 84px;
  width: auto;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}

nav ul li {
  font-weight: 500;
}

nav ul li a {
  color: var(--text-color);
  transition: color 0.3s ease;
}

nav ul li a:hover,
nav ul li a:focus {
  color: var(--primary-color);
}

/* Hero section */
.hero {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  text-align: center;
  color: var(--text-color);
}

/* overlay to darken the hero image */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

.hero .content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 20px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero p {
  font-size: 1.2rem;
  color: var(--muted-color);
  margin-bottom: 2rem;
}

.cta-button {
  display: inline-block;
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border: none;
  border-radius: var(--border-radius);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.cta-button:hover,
.cta-button:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  color: #fff;
}

/* Section styles */
section {
  padding: 80px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

section h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: var(--primary-color);
}

section h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  color: var(--secondary-color);
}

/* Feature cards */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.feature {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 24px;
  text-align: center;
  transition: background 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.feature:hover {
  background: #173c69;
}

.feature .icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
  color: var(--primary-color);
}

.feature h4 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  color: var(--accent-color);
}

.feature p {
  font-size: 0.95rem;
  color: var(--muted-color);
  margin: 0;
}

/* Cards and lists for game modes */
.card {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.card h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.card p {
  margin: 0;
  color: var(--muted-color);
}

/* Clickable project cards */
.project-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.project-card .cta-button {
  margin-top: 16px;
}

.project-card:hover,
.project-card:focus {
  background: #173c69;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  color: inherit;
}

#featured-projects {
  scroll-margin-top: 100px;
}

/* About page image container */
.about-image {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.caption {
  font-size: 0.85rem;
  color: var(--muted-color);
  text-align: center;
  margin-top: 8px;
}

/* Footer */
footer {
  background: #010714;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted-color);
  font-size: 0.85rem;
}

footer a {
  color: var(--primary-color);
  margin: 0 8px;
  transition: color 0.2s ease;
}

footer a:hover {
  color: var(--secondary-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  nav {
    padding: 15px 20px;
  }
  nav .logo img {
    height: 68px;
  }
}