/*  Handles the overall structure and layout of the page,  */
/*         including body styles and grid layouts.         */

/* ------ */
/* LAYOUT */
/* ------ */

.layout {
  /* Flex Style */
  display: flex;
  flex-direction: row;
  padding: 20px;

  /* justify-content: center; */
  justify-content: center;

  /* Outline Style */
  outline: 1.5rem double black;
  outline-offset: -10px;

  /* Border Flare Outside */
  border: 7px solid black;

  /* Image */
  background-image: url(img/ani3.gif);
  background-size: 100px;

  margin-inline: auto;
  padding-inline: auto;

  /* Ensures layout doesn't get larger than set value */
  max-inline-size: 1250px;
}

/* ------------ */
/* LEFT SIDEBAR */
/* ------------ */

.left-sidebar {
  /* Flex Style */
  display: flex;
  flex-direction: column;
  margin-right: 30px;

  row-gap: 23px;
  width: 200px;
}

/* --------------- */
/* DASHBOARD STYLE */
/* --------------- */

.dashboard {
  /* Grid Style */
  --grid-min-col-size: 100px;
  display: grid;
  gap: 30px;
  /* grid-template-columns: 700px 1200px 500px;
    grid-template-rows: repeat(6, 500px); */

  /*  repeat ( # AMOUNT OF COLUMNS, SIZE OF COLUMNS,);
        repeat ( # AMOUNT OF COLUMNS, minmax(MIN SIZE, MAX SIZE)); 1fr take as much space

        PREVENT OVERFLOW
        minmax(min(MIN SIZE, 100%), MAX SIZE))
        repeat ()
    */

  /*LEFT TO RIGHT */
  grid-template-columns: repeat(
    3,
    minmax(min(var(--grid-min-col-size), 100%), 1fr)
  );
  /* TOP DOWN */
  grid-auto-rows: 313px 120px 400px 150px 150px 50px 200px 120px;

  grid-template-areas:
    "box2 box2 box3"
    "box1 box1 box4"
    "box1 box1 box4"
    "box1 box1 box5"
    "box1 box1 box5"
    "box6 box6 box6"
    "box7 box8 box9"
    "box10 box11 box12"
    "box13 box14 box15";
}