:root {
    --bgdarker: #ebe5d5; /* Use for body */
    --bg: #fcfcf0;      /* Use for main */
    --txt: #281e1e;     /* Use for text */
    --accent: #4a3432;  /* Use for asides and links */
    --accent2: #736b9b; /* Use for buttons */
    --accent3: #e07e3d; /* Use for buttons */
    --transbg: rgba(255, 255, 255, 0.8);
    --longcat: url(../images/orangOobie.png);

    --buttonRounded: 20px;
    }

[data-theme='calicoLight'] {
    --bgdarker: #ebe5d5; /* Use for body */
    --bg: #fcfcf0;      /* Use for main */
    --txt: #281e1e;     /* Use for text */
    --accent: #4a3432;  /* Use for asides and links */
    --accent2: #736b9b; /* Use for buttons */
    --accent3: #e07e3d; /* Use for buttons */
    --transbg: rgba(255, 255, 255, 0.8);
    --longcat: url(../images/orangOobie.png);
}

[data-theme='russianBlueDark'] {
    --bgdarker: #151415; /* Use for body */
    --bg: #32343f;      /* Use for main */
    --txt: #e6e6e6;     /* Use for text */
    --accent: #258d42;  /* Use for asides and links */
    --accent2: #ebe5d5; /* Use for buttons */
    --accent3: #185288; /* Use for buttons */
    --transbg: rgba(0, 0, 0, 0.8);
    --longcat: url(../images/blueOobie.png);
}


[data-theme='primaryPurr'] {
    --bgdarker: #f2f3ed; /* Use for body */
    --bg: #ffffff;      /* Use for main */
    --txt: #02001a;     /* Use for text */
    --accent: #bb2c2c;  /* Use for asides and links */
    --accent2: #235789; /* Use for buttons */
    --accent3: #edb034; /* Use for buttons */
    --longcat: url(../images/primaryOobie.png);
}


body {
  font-family: "Balsamiq Sans";
  color: var(--txt);
}

p > a {
  color: var(--accent);
}

      .parentButton {
          background-color: var(--bgdarker);
          border-radius: 15px;
          padding: 10px;
          color: var(--accent2);
      }

      .parentButton:hover {  
      background-color: var(--accent3);
      cursor: pointer;
      }

      .childButton {
          display: none;
      }


      .childButton.revealed {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
          margin-top: 5px;
      }


.gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: var(--txt);
  
}

.gallery-item {
  border: 3px solid var(--accent3);
  height: 150px;
  margin: 0.2vw;
  border-radius: 5px;
}

.gallery-item:hover {
  border: 3px solid var(--bg);
  transition: 0.3s;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  border-radius: 2px;
} 

.oc-item {
  border: 5px solid var(--accent3);
  height: 130px;
  margin: 0.2vw;
  border-radius: 5px;
}

.oc-item:hover {
  border: 5px solid var(--accent2);
  transition: 0.3s;
}

.oc-item img {
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

        .lightbox {
          display: none;
          position: fixed;
          z-index: 999;
          width: 100%;
          height: 100%;
          text-align: center;
          top: 0;
          left: 0;
          background: rgba(255, 255, 255, 0.8);
        }
        .lightbox img {
          max-width: 90%;
          max-height: 80%;
          margin-top: 2%;
        }
        .lightbox:target {
          outline: none;
          display: block;
        }