/* Four square navigation on home page  */
@font-face {
  font-family: CCSmash;
  src: url(/fonts/CCSmash-Open.woff2) format('woff2');
}
.nav-bret {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 280px;
  margin: 0 auto;
}

.nav-bret a {
  position: relative;
  width: 100%;
  height: 190px;
  background-repeat: no-repeat;
  background-size: 110px;
  text-decoration: none;
  font-family: CCSmash;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
}

.nav-bret a::after {
  content: '';
  position: absolute;
  width: 112px;
  height: 112px;
  z-index: -1;
  background-color: var(--color-black);
}

.nav-bret a:hover .tooltip {
  --c: var(--color-code);
  color: var(--color-white);
}

.tooltip {
  position: absolute;
  color: var(--color-black);
  font-size: 0.7em;
  max-width: 200px;
  text-align: center;
  padding: 1em;
  border-radius: 1.2em;

  /* triangle dimension */
  --b: 1em; /* control the base */
  --h: 0.7em; /* control the height */
  --c: var(--color-gray-medium);
}

/* TOP LEFT */
.top-left {
  background-image: url(/img/nav-bret/red-right.webp);
  background-position: bottom right;
}

.top-left::after {
  bottom: 0;
  right: 0;
}

.top-left:hover {
  background-image: url(/img/nav-bret/red-left.webp);
}

.top-left .tooltip {
  top: 0;
  right: 40px;
  border-bottom-right-radius: 0;
  clip-path: polygon(
    100% 0,
    0 0,
    0 100%,
    calc(100% - var(--b)) 100%,
    calc(100% + var(--h)) calc(100% + var(--h)),
    100% calc(100% - var(--b))
  );
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) 0 999 999 0/ 0 calc(var(--h) + var(--b)) calc(
      var(--h) + var(--b)
    ) 0/0 var(--h) var(--h) 0;
}

/* TOP RIGHT */
.top-right {
  background-image: url(/img/nav-bret/gray-down.webp);
  background-position: bottom left;
}

.top-right::after {
  bottom: 0;
  left: 0;
}

.top-right:hover {
  background-image: url(/img/nav-bret/gray-up.webp);
}

.top-right .tooltip {
  top: 0;
  left: 60px;
  border-bottom-left-radius: 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--b) 100%,
    calc(-1 * var(--h)) calc(100% + var(--h)),
    0 calc(100% - var(--b))
  );
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) 0 0 999 999/ 0 0 calc(var(--h) + var(--b)) calc(
      var(--h) + var(--b)
    ) / 0 0 var(--h) var(--h);
}

/* BOTTOM LEFT */
.bottom-left {
  background-image: url(/img/nav-bret/gray-up.webp);
  background-position: top right;
}

.bottom-left::after {
  top: 0;
  right: 0;
}

.bottom-left:hover {
  background-image: url(/img/nav-bret/gray-down.webp);
}

.bottom-left .tooltip {
  bottom: 17px;
  right: 80px;
  border-top-right-radius: 0;
  clip-path: polygon(
    100% 100%,
    0 100%,
    0 0,
    calc(100% - var(--b)) 0,
    calc(100% + var(--h)) calc(-1 * var(--h)),
    100% var(--b)
  );
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) 999 999 0 0 / calc(var(--h) + var(--b))
    calc(var(--h) + var(--b)) 0 0 / var(--h) var(--h) 0 0;
}

/* BOTTOM RIGHT */
.bottom-right {
  background-image: url(/img/nav-bret/red-left.webp);
  background-position: top left;
}

.bottom-right::after {
  top: 0;
  left: 0;
}

.bottom-right:hover {
  background-image: url(/img/nav-bret/red-right.webp);
}

.bottom-right .tooltip {
  bottom: 0;
  left: 30px;
  border-top-left-radius: 0;
  clip-path: polygon(
    0 100%,
    100% 100%,
    100% 0,
    var(--b) 0,
    calc(-1 * var(--h)) calc(-1 * var(--h)),
    0 var(--b)
  );
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) 999 0 0 999 / calc(var(--h) + var(--b)) 0 0
    calc(var(--h) + var(--b)) / var(--h) 0 0 var(--h);
}

/* 400px */
@media (min-width: 25em) {
  .nav-bret {
    width: 340px;
  }

  .top-left .tooltip {
    right: 60px;
  }

  .top-right .tooltip {
    left: 90px;
  }

  .bottom-left .tooltip {
    right: 100px;
  }

  .bottom-right .tooltip {
    left: 60px;
  }
}

/* 480px */
@media (min-width: 30em) {
  .nav-bret {
    width: 420px;
  }

  .nav-bret a {
    height: 230px;
    background-size: 150px;
  }

  .nav-bret a::after {
    width: 153px;
    height: 153px;
  }

  .tooltip {
    font-size: 0.75em;
  }

  .top-left .tooltip {
    right: 80px;
  }

  .top-right .tooltip {
    left: 100px;
  }

  .bottom-left .tooltip {
    right: 130px;
    bottom: 0;
  }

  .bottom-right .tooltip {
    left: 65px;
  }
}

/* 640px */
@media (min-width: 40em) {
  .nav-bret {
    width: 520px;
  }

  .nav-bret a {
    height: 270px;
    background-size: 180px;
  }

  .nav-bret a::after {
    width: 184px;
    height: 184px;
  }

  .tooltip {
    font-size: 0.85em;
  }

  .top-left .tooltip {
    right: 110px;
  }

  .top-right .tooltip {
    left: 150px;
  }

  .bottom-left .tooltip {
    right: 160px;
  }

  .bottom-right .tooltip {
    left: 90px;
  }
}

/* 960px */
@media (min-width: 60em) {
  .nav-bret {
    width: 845px;
  }

  .nav-bret a {
    height: 300px;
    background-size: 210px;
  }

  .nav-bret a::after {
    width: 215px;
    height: 215px;
  }

  .tooltip {
    font-size: 0.9em;
  }

  .top-left .tooltip {
    top: 110px;
    left: 0;
    width: 170px;
  }

  .top-right .tooltip {
    left: 160px;
  }

  .bottom-left .tooltip {
    right: 160px;
  }

  .bottom-right .tooltip {
    left: 250px;
    bottom: 110px;
    width: 170px;
  }
}

/* 1280px */
@media (min-width: 80em) {
}

/* 1400px */
@media (min-width: 87.5em) {
}

/* 1600px */
@media (min-width: 100em) {
}