body {
  --festival-ivory: #f3e7d1;
  --festival-orange: #e56b41;
  --festival-skyblue: #accfe5;
  --festival-black: #2c252c;
  --dashboard-grey: #797979;
  --transition-duration: 0.3s;

  --slice-one: #99d2e4;
  --slice-two: #f0c686;
  --slice-three: #fdb261;
  --slice-four: #ff9e3d;
  --slice-five: #f08649;
  --slice-six: #d86f54;
  --slice-seven: #eb7f7a;
  --slice-eight: #ff92a4;
  --slice-nine: #93536d;
  --slice-ten: #564760;
  --slice-eleven: #6a6f85;
  --slice-twelve: #809db1;

  background-color: var(--festival-black) !important;
  color: var(--festival-ivory) !important;
  font-family:
    DM Serif Display,
    serif !important;
}

html,
body {
  overflow: hidden !important;
  color: white !important;
  margin: 0;
  touch-action: none !important;
}

main {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  /* inset: 50%; */
  /* transform: translate(-50%, -50%); */
  overflow: visible;
  transform-origin: center center;
  transition: 1s transform;
}

@media (min-width: 1600px) and (max-resolution: 2.5dppx) {
  main:has(.dot.grow) {
    transform: scale(1.2);
  }

  main:has(.sub-menu.grow) {
    transform: scale(1.4);
  }

  main:has(.final-cat-button.grow) {
    transform: scale(1.6);
  }
}

@media (max-height: 960px) {
  main {
    transform: scale(0.7);
  }

  main:has(.dot.grow) {
    transform: scale(0.9);
  }

  main:has(.sub-menu.grow) {
    transform: scale(1);
  }

  main:has(.final-cat-button.grow) {
    transform: scale(1.2);
  }
}

@media (max-width: 768px) {
  main {
    transform: scale(0.5);
  }
}

/* UI Zoom interface */

.content {
  position: absolute;
  /* inset: 50%; */
  /* transform: translate(-50%, -50%); */
  width: 100%;
  height: 100%; /* Needs to be the same as screen so getBoundingClientRect() works! */
  transition: var(--transition-duration) transform;
}

.content > * {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  width: inherit;
  height: inherit;
  pointer-events: none;
}

p {
  font-size: 12px;
  color: white;
}

h4 {
  color: white !important;
  font-size: 18px;
  margin: 0;
}

.hub {
  position: relative;
  width: 450px;
  height: 450px;
  inset: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--festival-black);
  border-radius: 50%;
  z-index: 5;
}

.hub svg {
  width: 80%;
}

div.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid black;
  border-radius: 50%;
}

.slice {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3rem;
  width: 850px;
  aspect-ratio: 1/1;
  inset: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
  background-image: conic-gradient(
    from 345deg,
    var(--slice-one) 30deg,
    transparent 30deg
  );
  border-radius: 50%;
  z-index: 0;
}

.segment-line {
  width: 4px;
  background-color: var(--festival-black);
  height: 450px;
  margin-top: -2px;
}

.slice:nth-of-type(1) img {
  transform: rotate(-15deg);
}

.slice:nth-of-type(2) {
  transform: translate(-50%, -50%) rotate(45deg);
  background-image: conic-gradient(
    from 345deg,
    var(--slice-two) 30deg,
    transparent 30deg
  );
}
.slice:nth-of-type(2) img {
  transform: rotate(-45deg);
}

.slice:nth-of-type(3) {
  transform: translate(-50%, -50%) rotate(75deg);
  background-image: conic-gradient(
    from 345deg,
    var(--slice-three) 30deg,
    transparent 30deg
  );
}
.slice:nth-of-type(3) img {
  transform: rotate(-75deg);
}
.slice:nth-of-type(4) {
  transform: translate(-50%, -50%) rotate(105deg);
  background-image: conic-gradient(
    from 345deg,
    var(--slice-four) 30deg,
    transparent 30deg
  );
}
.slice:nth-of-type(4) img {
  transform: rotate(-105deg);
}
.slice:nth-of-type(5) {
  transform: translate(-50%, -50%) rotate(135deg);
  background-image: conic-gradient(
    from 345deg,
    var(--slice-five) 30deg,
    transparent 30deg
  );
}
.slice:nth-of-type(5) img {
  transform: rotate(-135deg);
}
.slice:nth-of-type(6) {
  transform: translate(-50%, -50%) rotate(165deg);
  background-image: conic-gradient(
    from 345deg,
    var(--slice-six) 30deg,
    transparent 30deg
  );
}

.slice:nth-of-type(6) img {
  transform: rotate(-165deg);
}
.slice:nth-of-type(7) {
  transform: translate(-50%, -50%) rotate(195deg);
  background-image: conic-gradient(
    from 345deg,
    var(--slice-seven) 30deg,
    transparent 30deg
  );
}
.slice:nth-of-type(7) img {
  transform: rotate(-195deg);
}
.slice:nth-of-type(8) {
  transform: translate(-50%, -50%) rotate(225deg);
  background-image: conic-gradient(
    from 345deg,
    var(--slice-eight) 30deg,
    transparent 30deg
  );
}
.slice:nth-of-type(8) img {
  transform: rotate(-225deg);
}
.slice:nth-of-type(9) {
  transform: translate(-50%, -50%) rotate(255deg);
  background-image: conic-gradient(
    from 345deg,
    var(--slice-nine) 30deg,
    transparent 30deg
  );
}
.slice:nth-of-type(9) img {
  transform: rotate(-255deg);
}
.slice:nth-of-type(10) {
  transform: translate(-50%, -50%) rotate(285deg);
  background-image: conic-gradient(
    from 345deg,
    var(--slice-ten) 30deg,
    transparent 30deg
  );
}
.slice:nth-of-type(10) img {
  transform: rotate(-285deg);
}
.slice:nth-of-type(11) {
  transform: translate(-50%, -50%) rotate(315deg);
  background-image: conic-gradient(
    from 345deg,
    var(--slice-eleven) 30deg,
    transparent 30deg
  );
}
.slice:nth-of-type(11) img {
  transform: rotate(-315deg);
}

.slice:nth-of-type(12) {
  transform: translate(-50%, -50%) rotate(345deg);
  background-image: conic-gradient(
    from 345deg,
    var(--slice-twelve) 30deg,
    transparent 30deg
  );
}
.slice:nth-of-type(12) img {
  transform: rotate(-345deg);
}

/* Dots */

.content:has(.dot.grow) .dot:not(.grow) {
  opacity: 0.5;
  transform: translate(-50%, -50%) scale(0.8);
}

.content:has(.dot.grow) .slice {
  opacity: 0.5;
}

button h4 {
  text-align: center;
  margin: 0.5rem;
  pointer-events: none;
}

.circumference {
  --circumference: 1150px;
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  width: var(--circumference);
  aspect-ratio: 1/1;
  border: 4px white solid;
  border-radius: 50%;
}

.roundel {
  position: absolute;
  pointer-events: none;
  /* z-index: 12; */
  width: 0;
  height: 0; /* Zero size */
}

.dot {
  all: unset;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  width: 190px;
  aspect-ratio: 1/1;
  background-color: var(--slice-one);
  border-radius: 50%;
  z-index: 4;
  transition: transform var(--transition-duration);
  pointer-events: all;
  cursor: pointer;
}

button:hover,
button.grow {
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1.2);
}

.uni-dot:hover,
.industry-dot:hover {
  transform-origin: center center;
  transform: scale(1.2);
}

/* Alignment of pages */

.close-button.hide {
  pointer-events: none;
  opacity: 0 !important;
}

.close-button {
  all: unset;
  height: 70px;
  width: 70px;
  position: absolute;
  cursor: pointer;
  pointer-events: all;
  padding: 8px;
  margin: -8px;
  box-sizing: content-box;
  background-position: center;
  background-repeat: space;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 174 174' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M41.1941 60.8085L67.1297 75.7824M60.5541 41.4485L75.5798 67.4737M87.0003 64.2466V34.3622M98.4209 67.4737L113.447 41.4485M106.871 75.7824L132.807 60.8085M139.893 87.2547H109.844M106.871 98.727L132.807 113.701M98.4209 107.036L113.447 133.061M87.0003 140.147V109.957M60.5541 133.061L75.5798 107.036M41.1941 113.701L67.1297 98.727M64.0369 87.2547H34.1079M110.119 86.9988C110.119 99.7678 99.7678 110.119 86.9987 110.119C74.2297 110.119 63.8783 99.7678 63.8783 86.9988C63.8783 74.2297 74.2297 63.8784 86.9987 63.8784C99.7678 63.8784 110.119 74.2297 110.119 86.9988ZM99.9436 14.4128C99.9436 21.5444 94.148 27.3256 86.9987 27.3256C79.8495 27.3256 74.0539 21.5444 74.0539 14.4128C74.0539 7.28126 79.8495 1.5 86.9987 1.5C94.148 1.5 99.9436 7.28126 99.9436 14.4128ZM99.9436 159.585C99.9436 166.716 94.148 172.498 86.9987 172.498C79.8495 172.498 74.0539 166.716 74.0539 159.585C74.0539 152.453 79.8495 146.672 86.9987 146.672C94.148 146.672 99.9436 152.453 99.9436 159.585ZM134.502 30.6099C130.937 36.786 123.027 38.8949 116.835 35.3203C110.644 31.7457 108.515 23.8411 112.081 17.665C115.647 11.4889 123.557 9.38003 129.748 12.9547C135.94 16.5293 138.068 24.4338 134.502 30.6099ZM61.9163 156.332C58.3506 162.509 50.4408 164.617 44.2494 161.043C38.0579 157.468 35.9294 149.564 39.4952 143.388C43.0609 137.212 50.9707 135.103 57.1622 138.677C63.3536 142.252 65.4821 150.156 61.9163 156.332ZM156.332 61.9164C150.156 65.4821 142.252 63.3536 138.677 57.1622C135.103 50.9707 137.211 43.061 143.388 39.4952C149.564 35.9294 157.468 38.0579 161.043 44.2494C164.617 50.4408 162.509 58.3506 156.332 61.9164ZM30.6099 134.502C24.4338 138.068 16.5293 135.94 12.9546 129.748C9.38002 123.557 11.4889 115.647 17.665 112.081C23.8411 108.515 31.7457 110.644 35.3203 116.835C38.8949 123.027 36.786 130.937 30.6099 134.502ZM159.585 99.9436C152.453 99.9436 146.672 94.148 146.672 86.9988C146.672 79.8495 152.453 74.0539 159.585 74.0539C166.716 74.0539 172.498 79.8495 172.498 86.9988C172.498 94.148 166.716 99.9436 159.585 99.9436ZM14.4128 99.9436C7.28126 99.9436 1.5 94.148 1.5 86.9988C1.5 79.8495 7.28126 74.0539 14.4128 74.0539C21.5443 74.0539 27.3256 79.8495 27.3256 86.9988C27.3256 94.148 21.5443 99.9436 14.4128 99.9436ZM143.388 134.502C137.212 130.937 135.103 123.027 138.677 116.835C142.252 110.644 150.156 108.515 156.332 112.081C162.509 115.647 164.617 123.557 161.043 129.748C157.468 135.94 149.564 138.068 143.388 134.502ZM17.6651 61.9164C11.489 58.3506 9.38004 50.4408 12.9547 44.2494C16.5293 38.0579 24.4338 35.9294 30.6099 39.4952C36.786 43.061 38.8949 50.9707 35.3203 57.1622C31.7457 63.3536 23.8412 65.4821 17.6651 61.9164ZM112.081 156.332C108.515 150.156 110.644 142.252 116.835 138.677C123.027 135.103 130.937 137.212 134.502 143.388C138.068 149.564 135.94 157.468 129.748 161.043C123.557 164.618 115.647 162.509 112.081 156.332ZM39.4952 30.6099C35.9294 24.4338 38.058 16.5293 44.2494 12.9547C50.4408 9.38006 58.3506 11.489 61.9164 17.6651C65.4822 23.8412 63.3536 31.7457 57.1622 35.3203C50.9708 38.8949 43.061 36.786 39.4952 30.6099ZM140.147 87.2547C140.147 116.607 116.353 140.402 87.0003 140.402C57.648 140.402 33.8533 116.607 33.8533 87.2547C33.8533 57.9024 57.648 34.1076 87.0003 34.1076C116.353 34.1076 140.147 57.9024 140.147 87.2547Z' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
  transition: var(--transition-duration);
}

.close-button:hover {
  transform-origin: center;
  transform: scale(1.2);
}

.close-button:active {
  transform: scale(0.2);
}

.sub-dots {
  display: flex;
  gap: 25px;
  justify-content: center;
}

.sub-dots > * {
  opacity: 1;
}

.info-page {
  --info-page: 150px;
  --padding: 25px;
  position: absolute;
  /* inset: 50%; */
  /* transform: translate(-50%, -50%); */
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto min(100%, 260px);
  gap: var(--padding);
  pointer-events: none;
  width: 70vw;
  max-width: 880px;
  height: 60vh;
  z-index: 1;
  opacity: 0;
  transition: var(--transition-duration);
  /* overflow: hidden; */
}

.sub-dots {
  display: flex;
  gap: 25px;
  justify-content: flex-start;
}

@media (max-width: 768px) {
  .info-page {
    --info-page-padding: 25px;
    width: 100vw;
    height: 90vh;
  }
}

@media (min-width: 1600px) and (max-resolution: 2.5dppx) {
  .info-page {
    width: 50vw;
  }
}

.info-page.first-quarter {
  align-content: start;
  transform: translate(0%, -100%);
  padding-left: var(--padding);
  border-left: 2px solid white;
  margin-top: calc(-1 * var(--info-page));
}
.info-page.first-quarter .sub-dots,
.info-page.twelve-oclock .sub-dots {
  grid-column: 1 / 3;
  flex-direction: row;
}
.info-page.first-quarter .close-button {
  right: 0;
  bottom: 0;
}
.info-page.last-quarter .close-button {
  left: 0;
  bottom: 0;
}
.info-page.twelve-oclock .close-button {
  left: unset;
  right: 0;
  bottom: 0;
}
.info-page.second-quarter .close-button {
  right: 0;
  top: 0;
}

.info-page.second-quarter .industry-dot:not(.selected),
.info-page.third-quarter .industry-dot:not(.selected) {
  align-self: flex-end;
}
.info-page.second-quarter {
  /* align-content: end; */
  transform: translate(0%, 0%);
  padding-left: var(--padding);
  border-left: 2px solid white;
  margin-top: var(--info-page);
}
.info-page.third-quarter {
  /* align-content: end; */
  transform: translate(calc(-100%), 0%);
  padding-right: var(--padding);
  border-right: 2px solid white;
  margin-top: var(--info-page);
}
.info-page.last-quarter {
  align-content: start;
  transform: translate(-100%, -100%);
  border-right: 2px solid white;
  padding-right: var(--padding);
  margin-top: calc(-1 * var(--info-page));
}
.last-quarter .sub-dots {
  grid-column: 1 / 3;
  flex-direction: row-reverse;
}

.third-quarter .sub-dots {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  flex-direction: row-reverse;
}

.second-quarter .sub-dots {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  flex-direction: row;
}

.info-page.three-oclock {
  padding-left: var(--padding);
  transform: translate(calc(0% + 150px), -100%);
  margin: 0;
}
.info-page.six-oclock {
  align-content: start;
  transform: translate(calc(0%), 0%);
}
.info-page.nine-oclock {
  padding-left: var(--padding);
  transform: translate(calc(-100% - 150px), 0);
  margin: 0;
}
.info-page.twelve-oclock {
  border-right: none;
  transform: translate(0%, -100%);
  padding-left: var(--padding);
  border-left: 2px solid white;
}

.grow + .info-page {
  opacity: 1;
  z-index: 45;
}

/* Sub Pages */
/* Hides the page content when the node is clicked */
.info-page.sub-page-hidden > div:not(.sub-dots, .subpage-radial-container),
.info-page.sub-page-hidden > h4 {
  visibility: hidden;
}

.info-page.sub-page-hidden .uni-dot.selected {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  align-self: flex-start;
}

.info-page.sub-page-hidden .industry-dot.selected {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%) scale(1.8);
}

.info-page.sub-page-hidden .uni-dot:not(.selected),
.info-page.sub-page-hidden .industry-dot:not(.selected) {
  opacity: 0;
}

.info-page.sub-page-hidden button.close-button {
  opacity: 1;
}

.sub-menu {
  all: unset;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  transition: transform var(--transition-duration);
  pointer-events: all;
  cursor: pointer;
  box-shadow: 12px 12px 32px rgba(0, 0, 0, 0.1);
}

.sub-dots:has(.sub-menu.selected) .sub-menu {
  pointer-events: none;
}

button.sub-menu:active {
  transform: scale(0.1);
}

.uni-dot {
  /* transform: scale(0.8); */
  width: 170px;
  height: 170px;
  align-self: flex-end;
}

.industry-dot {
  width: 100px;
  /* transform: scale(0.5); */
  align-self: flex-start;
}

.subpage-radial-container {
  position: absolute;
  inset: 50%;
  transform: translate(calc(-50%), -50%);
  display: flex;
  width: 0;
  height: 0;
  /* z-index: -1; */
  transition: 0.5s;
}

.subpage-radial-container:has(button.selected) {
  z-index: 230;
}

.subpage-radial-container .final-cat-button {
  all: unset;
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 120px;

  aspect-ratio: 1/1;
  border-radius: 50%;
  transition: transform var(--transition-duration);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 12px 12px 32px rgba(0, 0, 0, 0.1);
}

.subpage-radial-container .final-cat-button:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

.subpage-radial-container h4 {
  text-transform: capitalize;
  font-size: 16px;
}

.subpage-radial-container .close-icon {
  all: unset;
  background-color: transparent;
  width: fit-content;
  height: fit-content;
  transform-origin: center;
  transition: var(--transition-duration);
  pointer-events: none;
  cursor: pointer;
}

.subpage-radial-container .close-icon img {
  box-sizing: content-box;
  object-fit: fill;
  padding: 8px;
  margin: -8px;
}

.subpage-radial-container:has(.final-cat-button.selected) .close-icon {
  pointer-events: all;
}

.close-icon:hover {
  transform: scale(1.2);
}

.close-icon:active {
  transform: scale(0.2);
}

.final-cat-text {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  /* justify-content: center; */
  gap: 12px;
  width: 300px;
  height: 150px;
  position: relative;
  inset: 50%;
  transform: translate(25%, -50%);
  transition: 0.5s;
  opacity: 0;
}

.final-cat-text h4,
.final-cat-text p {
  width: inherit;
  height: inherit;
}

.subpage-radial-container:has(.final-cat-button.selected) .final-cat-text {
  opacity: 1;
}

.info-page:has(.selected) {
  border: none;
}
.dot.grow:has(~ .info-page .selected) {
  opacity: 0.5;
}

.content:has(.final-cat-button.selected)
  .subpage-radial-container:has(.final-cat-button:not(.selected)),
.content:has(.final-cat-button.selected) .sub-menu.selected {
  opacity: 0.25;
}