/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

  /* The layout fix: putting everything in a row */
  .main-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px; /* Space between boxes */
  }

  .left-box, .right-box {
    text-align: center;
    width: 150px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0); /* Semi-transparent red border */
    background-clip: padding-box;           /* Stops background from bleeding under border */
  }

  .center-box {
    text-align: center;
    width: 450px;
    border: 2px solid black;
    padding: 20px;
    background-color: lightgray;
  }
  
   button {
        padding: 8px 15px;
        margin: 5px;
        cursor: pointer;
        border: 1px solid #ccc;
        transition: all 0.2s;
        border-radius: 4px;
    }

    /* 1. Starting Colors  */
    #defaultBtn   { border-color: #6b6b6b; color: #6b6b6b; background-color: #f0f0f0; }
    #gothBtn      { border-color: #222;    color: #222;    background-color: #d9d9d9; }
    #mallgothBtn  { border-color: #ff0000; color: #ff0000; background-color: #ffe5e5; }
    #scenecoreBtn { border-color: #00cc00; color: #00aa00; background-color: #e5ffe5; }
    #cutecoreBtn  { border-color: #ffb6c1; color: #d4687a; background-color: #fff0f3; }
    #cottageBtn   { border-color: #8a9a5b; color: #8a9a5b; background-color: #f2f5e9; }
    #spaceBtn     { border-color: #4b0082; color: #4b0082; background-color: #ede5f5; }

    /* 2. Active state (Overrides the defaults above) */
    .theme-btn.active {
        border-width: 4px !important;
        border-radius: 0px !important;
        transform: scale(1.05); /* Optional: slight pop for the active button */
    }

    .label-text {
        font-family: sans-serif;
        font-weight: bold;
        margin-right: 10px;
        text-transform: uppercase;
    }