/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base Styles */
body {
    font-family: 'Open Sans', sans-serif; /* Example font */
    color: #333;
    line-height: 1.6;
}

header {
    background-color: #709ad1;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between; /* Now, space out items */
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

header h1 {
    color: whitesmoke;
    font-family: 'Indie Flower', cursive; /* Example font */
    font-size: 2.5em;
    margin: 0;
    /* Adjust margin as needed to push the h1 towards the center */
    margin-left: auto; 
    margin-right: auto;
}

.nav-icon-container {
    /* Styles for the container of the gamepad icon */
    margin-left: 20px; /* Add some space from the title */
}

.nav-icon-container img { 
    height: 30px;
    cursor: pointer;
}

/* Content Area */
main {
    padding: 20px;
    max-width: 960px; /* Limit content width for readability */
    margin: 20px auto; /* Center the main content */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Stack logo and nav on smaller screens */
        text-align: center;
    }
    nav {
        margin-top: 10px;
    }
    h1 {
        font-size: 1.8em;
    }
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Base */
:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --accent: #5f86c3;
  --accent-2: #709ad1;
  --muted: #64707a;
  --glass: rgba(255,255,255,0.7);
  --radius: 12px;
}

html,body { height: 100%; background: var(--bg); font-family: Inter, "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: #24323a; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Header */
header{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  padding: 14px 20px;
  display:flex;
  align-items:center;
  gap: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0 6px 18px rgba(37,70,115,0.12);
}

header .logo img{ display:block; border-radius: 8px; }

header h1{
  font-family: 'Indie Flower', system-ui, sans-serif;
  color: #fff;
  font-size: 1.9rem;
  flex: 1;
  text-align: center;
  letter-spacing: .6px;
}

/* nav icons */
.nav-icon-container{
  display:flex;
  gap: 12px;
}
.nav-icon-container a img{
  height: 30px;
  width: 30px;
  opacity: .95;
  transition: transform .12s ease, opacity .12s;
}
.nav-icon-container a:hover img{ transform: translateY(-3px); opacity: 1; }

/* Main container */
main{
  max-width: 1100px;
  margin: 22px auto;
  padding: 22px;
  background: transparent;
}

/* Intro */
.site-intro{
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.5));
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 4px 10px rgba(33,50,77,0.04);
}
.site-intro h2 { margin-bottom: 8px; color: #1b2b37; }
.site-intro p.meta { margin-top: 10px; color: var(--muted); }

/* Featured */
.featured{
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(33,50,77,0.04);
}
.featured-row{
  display:flex;
  gap: 18px;
  align-items:center;
  flex-wrap:wrap;
}
.featured-thumb{ width: 260px; max-width:100%; border-radius:10px; object-fit:cover; box-shadow: 0 8px 24px rgba(33,50,77,0.06); }
.featured-info{ flex:1; min-width:240px; }
.featured-cta{ margin-top:12px; display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:9px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(96,120,177,0.14);
}
.btn.ghost, .ghost{
  background:transparent;
  border:1px solid rgba(36,50,58,0.08);
  color: #21313a;
  padding:10px 12px;
  border-radius:9px;
  text-decoration:none;
}

/* Quick links */
.links-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:12px; margin-top:12px; }
.card-link{
  display:flex; gap:12px; align-items:center; padding:12px; background:var(--card); border-radius:10px; text-decoration:none; color:inherit;
  box-shadow: 0 6px 18px rgba(33,50,77,0.03);
}
.card-link img{ height:40px; width:40px; object-fit:contain; opacity:.9; }
.card-link strong{ display:block; font-size:1.05rem }

/* Catalog grid */
.grid.catalog{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; margin-top: 14px; }
.card{
  background: var(--card);
  padding: 12px;
  border-radius: 12px;
  text-align: left;
  box-shadow: 0 8px 22px rgba(33,50,77,0.04);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card img{ width:100%; height:140px; object-fit:cover; border-radius:8px; margin-bottom:10px; }
.card h3{ font-size:1.05rem; margin-bottom:6px; }
.card p{ color:var(--muted); font-size:.95rem; margin-bottom:10px; }

/* Card actions */
.card-actions{ display:flex; gap:10px; }
.card-actions .btn{ padding:8px 12px; font-size:.95rem; }
.card-actions .ghost{ padding:8px 12px; text-decoration:none; color:var(--muted); border-radius:8px; }

/* Archive list */
.archive-list{ list-style:none; margin-top:12px; padding:0; display:flex; flex-direction:column; gap:8px; }
.archive-list li{ background:var(--card); padding:12px; border-radius:8px; box-shadow: 0 6px 18px rgba(33,50,77,0.03); color:var(--muted); }

/* Support form */
.support-form{ display:flex; flex-direction:column; gap:10px; max-width:720px; }
.support-form input, .support-form textarea{
  padding:10px; border-radius:8px; border:1px solid #e4e8ec; background:linear-gradient(180deg,#fff,#fbfdff);
}
.form-row{ display:flex; gap:12px; align-items:center; margin-top:6px; }
.form-row .ghost{ text-decoration:none; color:var(--muted); }

/* Responsive tweaks */
@media (max-width: 780px){
  header{ padding:12px; gap:10px; }
  header h1{ font-size:1.3rem; text-align:left; flex:1; }
  .featured-row{ flex-direction:column; align-items:flex-start; }
  .featured-thumb{ width:100%; }
}

.righty {
    text-align: right;
}
.coolmouse hover img{ transform: translateY(-3px); opacity: 1; }

footer{ text-align:center; padding:20px 0; margin-top:26px; }