:root {
    --bg-main: #000000;
    --bg-alt: #1C1C1E;
    --bg-hover: #2A2A2E;
    --text-main: #F9F9FA;
    --text-muted: #B1B1B3;
    --accent-main: #0060DF;
    --accent-alt: #C7008B;
    --border-main: #454545;
  }
  
  body {
    background-color: var(--bg-main);
    margin: 5rem 10rem 10rem;
    text-align: center;
    color: var(--text-main);
    font-family: Arial, sans-serif;
    opacity: 0;
    transition: opacity 1s ease-in;
  }
  
  body.fade-in { opacity: 1; }
  
  .selection { justify-content: center; height: 40vh; width: auto; margin: 3rem; }
  
  .selection, .card { transition: transform 0.2s ease-in-out; }
  
  img { width: 30vw; height: auto; max-height: 30vh; }
  
  .selection:hover { cursor: pointer; transform: scale(1.2) rotate(-10deg); }
  
  a { text-decoration: none; color: var(--text-main); }
  
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; padding: 0.75rem; }