:root {
    /* Define your color variables here */
    --dark-purple: #2E004F;
    --content-bg: #782ACA;         /* Lighter purple content background */
    --border-cell-purple: #CBB5FF; /* Border and cell background */
    --title-light-blue: #ADD8E6;   /* Light bluish color for the title */
    --yellow-accent: #FFB110;      /* Provided "yellow" (#ffb110) */
  }
  
  /* 
    Overall body:
    - Dark purple background
    - Center content vertically
    - Use white for default text color 
      (except for cell inputs which are black)
  */
  body {
    font-family: 'Trebuchet MS', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--dark-purple); 
    color: #fff; /* General text color */
  }
  
  /* 
    Container:
    - Light purple background
    - Solid border with same shade of light purple
    - Rounded corners
    - Width set to 90% for responsive layout
  */
  .container {
    width: 90%;
    padding: 20px 30px;
    border-radius: 15px;
    background-color: var(--content-bg);
    border: 2px solid var(--border-cell-purple);
    box-sizing: border-box;
    text-align: center;
  }
  
  /* 
    Title:
    - Light bluish color
    - Large, uppercase
  */
  h1 {
    font-size: 3rem;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    color: var(--title-light-blue);
    letter-spacing: 2px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
  }
  
  /* 
    Letters input row:
    - Flex, wrap, gap for spacing
  */
  .letters-input {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
  }
  
  /*
    The letter “tiles”:
    - Same light purple for background & border
    - Black text
    - Uppercase
  */
  .letters-input input {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    color: #000; /* black text in cells */
    background-color: var(--border-cell-purple);
    border: 2px solid var(--border-cell-purple);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }
  
  /*
    Special styles for wildcard (?)
  */
  .letters-input input.wildcard {
    background-color: #FFE600;
    color: #2E0075;
  }
  
  /*
    Fake (unused) letters
  */
  .letters-input input.fake {
    background-color: #FF4B4B;
    color: #fff;
  }
  
  /*
    Search box:
    - Same cell purple for consistency
    - Black text
  */
  .search-box {
    margin-bottom: 20px;
  }
  
  .search-box input {
    width: calc(100% - 40px);
    padding: 15px;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    background-color: var(--border-cell-purple);
    color: #000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }
  
  /*
    Output container
  */
  .output {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
  }
  
  /*
    Word boxes in the output:
    - Yellow with purple text
  */
  .word-box {
    background-color: #FFE600;
    color: #4B0082;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
  }
  
  /* 
    Error text:
    - Stand out in red
  */
  .error {
    color: #FF5252;
    font-weight: bold;
    margin-top: 20px;
  }
  
  /*
    Both bottom buttons:
    - Fixed position corners
    - Slightly different styles (one black, one yellow)
    - "Key press" animation on click
  */
  .sheet-link, .github-link {
    position: fixed;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 8px; /* a rectangle with slightly rounded corners */
    box-shadow: 0 4px 8px rgba(232, 150, 0, 0.7);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex; /* to align icon + text nicely if needed */
    align-items: center;
    gap: 8px; /* space between icon and text */
  }
  
  /* 
    Yellow button: bottom-right
    - Uses the "yellow accent" var
    - Slightly adjusted text color
  */
  .sheet-link {
    bottom: 20px;
    right: 20px;
    background-color: var(--yellow-accent);
    color: #311b92; 
  }
  
  /*
    Black GitHub button: bottom-left
    - Black background, white text
    - Add a GitHub icon (SVG) inside
  */
  .github-link {
    bottom: 20px;
    left: 20px;
    background-color: #000;
    color: #fff; /* white text on black */
    box-shadow: 0 4px 8px rgba(32, 32, 32, 0.7);
  }
  
  /* 
    Hover effect: enlarge a bit 
  */
  .sheet-link:hover,
  .github-link:hover {
    transform: scale(1.05);
  }
  
  /* 
    Active state: slight "press in" 
  */
  .sheet-link:active,
  .github-link:active {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* smaller shadow to match "press" */
  }
  
  /*
    Basic media query for smaller screens 
  */
  @media (max-width: 600px) {
    h1 {
      font-size: 2rem;
    }
    .letters-input input {
      width: 50px;
      height: 50px;
      font-size: 1.5rem;
    }
    .search-box input {
      font-size: 1rem;
    }
    .sheet-link, .github-link {
      font-size: 0.9rem;
    }
  }