/* FONTS */

 @font-face {
    font-family: "Balsamiq Sans";
    src: url(../fonts/BalsamiqSans-Regular.ttf) format("truetype"),
}

@font-face {
    font-family: "Outfit";
    src: url(../fonts/Outfit/Outfit-VariableFont_wght.ttf) format("truetype"),
}
 
   :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);
}

    button {
        background-color: var(--txt);
        color: var(--bgdarker);
        font-family: "Balsamiq Sans";
        border-radius: 10px;
        cursor: pointer;
    }


body {
  font-family: "Outfit";
  color: var(--txt);
  background-color: var(--accent);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.containerVBooks {
  display: grid;
  grid-template-areas: "introduction introduction"
  "thumbnails modal";
  grid-template-columns: 1fr 1fr;

  width: 70%;
  padding: 3vw;
  gap: 3vw;
  border-radius: 20px;

  background-color: var(--bgdarker);
}

.containerVBooks > .thumbnails {
  display: grid;
  grid-template-columns: auto auto auto;
}

  .containerVBooks > .thumbnails > #myImg {
    width: 100%;
  }

.containerGames {
  display: grid;
  grid-template-areas: "introduction introduction"
  "thumbnails modal";
  grid-template-columns: 2fr 1fr;

  width: 70%;
  padding: 3vw;
  gap: 3vw;
  border-radius: 20px;

  background-color: var(--bgdarker);
}

      .containerGames > .thumbnails {
        display: grid;
        grid-template-columns: auto auto auto auto;
      }

            .containerGames > .thumbnails > #myImg {
        width: 100%;
      }


    a {
      color: var(--accent);
      text-decoration: underline wavy var(--accent);
      font-size: 1.5rem;
    }

    a:hover {
      color: var(--accent3);
      text-decoration: none;
    }

  .introduction {
    grid-area: introduction;
    width: 80%;  
    justify-self: center;
  }

  .introduction > p {
    text-align: justify;
  }

  .thumbnails {
    grid-area: thumbnails;
    display: grid;
    grid-template-columns: auto auto auto;
  }

  .slideshow {
      grid-area: modal;

    
  }
    .clickSomething {
      text-align: center;
      font-size: 2rem;
    }

  .capt {
    grid-area: capt;
  }

  footer {
    margin: 3vw;
  }

#myImg {
  border-radius: 5px;
  border: 4px solid var(--accent2);
}

#myImg:hover {
  border: 4px solid var(--accent3);
  cursor: pointer;
} 

#myModal {
  margin: auto;
}

.modal {
  display: none;
  z-index: 1;

  flex-direction: column;

  padding: 3vw;
  gap: 3vw;

  background-color: var(--transbg);
  border-radius: 15px;
}

.modal-content {
  margin: auto;
  display: block;
  width: 20vw;
  border-radius: 5px;
  border: solid 5px var(--accent);
}

#caption {
  margin: auto;
  color: var(--txt);
}