body {
  margin: 0;
  --background: #f5f5f5;
  --color-1: #95b8a4;
  --color-2: #b2c585;
  --color-3: #fed292;
  --color-4: #eea58c;
  --color-5: #db7495;
  --color-6: #cb7aba;
  --color-7: #af71ca;
  --color-8: #7dbbcb;
  overflow: auto;
}

* {
  box-sizing: border-box;
}

.nodisplay {
  display: none !important;
}

.flex-fill {
  flex: 1 1;
}

.page {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.body {
  flex: 1 1;
  background-color: var(--background);
  overflow: hidden;
  position: relative;
}

#names {
  width: 100%;
  height: 100%;
  font-family: "Nova Mono", monospace;
  overflow: hidden;
  cursor: default;
  z-index: 1;
  perspective: 100px;
}

#links {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: "Nova Mono", monospace;
  z-index: 2;
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: all;
  overflow: hidden;
}

.link {
  opacity: 0;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  gap: 1rem;
  pointer-events: all;
  --colour: black;
  background-color: var(--colour);
  color: var(--background);
  border-radius: 40px;
  cursor: pointer;
  translate: 0px 0px;
  box-shadow: 4px 4px 4px transparent;
  transition:
    all 500ms ease,
    box-shadow 50ms;
  height: calc(100% - 16rem);
  width: min(90vw, 800px);
  opacity: 0;
}

.link.visible {
  opacity: 1;
}

.link:hover {
  /* box-shadow: 0px 0px 8px var(--colour); */
}

.link:focus {
  border: 4px solid rgba(0, 0, 0, 0.5);
  outline: none;
}

@keyframes tileHover {
  0% {
    translate: 0px 0px;
    box-shadow: 0px 0px 0px transparent;
  }
  50% {
    translate: -4px -4px;
    box-shadow: 4px 4px 4px lightgray;
  }
  100% {
    translate: 0px 0px;
    box-shadow: 0px 0px 0px transparent;
  }
}

.link-name {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}

.link-icon {
  position: relative;
  font-size: 150px;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.link-icon > .custom {
  position: absolute;
}

.link-icon .silhouette {
  z-index: -1;
  scale: 1.5;
  opacity: 0.25;
  /* color: lightblue; */
}

.link-icon .echo {
  z-index: -1;
  translate: 4px 4px;
  color: rgba(0, 0, 0, 0.25);
}

a {
  text-decoration: none;
}

.name {
  position: absolute;
  padding: 0.5rem;
  font-size: 2rem;
  opacity: 0.35;
  overflow: hidden;
  user-select: none;
}

.name:not(.excited) {
  color: gray;
  opacity: 0.2;
}

.name.hovered {
  opacity: 1;
  scale: 1.25;
  text-shadow: 0px 0px 4px;
}

#name-template {
  left: -100%;
}

@media screen and (max-width: 600px) {
  .icarousel {
    display: none;
  }
  .body .navigator {
    display: flex;
  }
}

.navigator {
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 13rem;
  justify-content: space-around;
  align-items: center;
  /* gap: 1rem; */
  pointer-events: none;
  z-index: 3;
}

.navigator button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 7.5rem;
  color: #666;
  pointer-events: all;
  transition: all 200ms ease;
}

.navigator button:active {
  scale: 0.9;
}

.icarousel {
  width: 100%;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
}

.icarousel-item {
  position: absolute;
  pointer-events: all;
  cursor: pointer;
  transition: all 500ms ease;
  background-color: transparent;
  border: none;
  padding: 0;
  width: 12.5vw;
  background-color: rgba(255, 255, 255, 0.85);
  /* border-radius: 1000px; */
  --ends-border: 16px solid #666;
  border-right: 1px dotted #ccc;
}

.icarousel-item:first-of-type {
  border-left: var(--ends-border);
}

.icarousel-item:last-of-type {
  border-right: var(--ends-border);
}

.icarousel .link-icon {
  font-size: 2.5rem;
  padding: 2rem;
}

.icarousel .link-icon .echo {
  translate: 2px 2px;
}

.color-1 {
  color: var(--color-1);
  --zoom-target: 50px;
}

.color-2 {
  color: var(--color-2);
  --zoom-target: -50px;
}

.color-3 {
  color: var(--color-3);
  --zoom-target: 30px;
}

.color-4 {
  color: var(--color-4);
  --zoom-target: -30px;
}

.color-5 {
  color: var(--color-5);
  --zoom-target: 5px;
}

.color-6 {
  color: var(--color-6);
  --zoom-target: -5px;
}

.color-7 {
  color: var(--color-7);
  --zoom-target: 0px;
}

@keyframes ParaZoom {
  0%,
  50%,
  100% {
    translate: 0 0 0;
  }
  25% {
    translate: 0 0 var(--zoom-target);
  }
  50% {
    translate: 0 0 calc(-1 * var(--zoom-target));
  }
}

#not-found-page {
  background-color: #222;
  color: whitesmoke;
  text-align: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  height: 10rem;
  background-color: transparent;
  position: fixed;
  bottom: 0;
  padding: 1rem;
  z-index: 2;
  pointer-events: none;
}

.footer img {
  height: 100%;
  object-fit: contain;
  pointer-events: all;
  cursor: pointer;
  opacity: 0.5;
  transition: all 200ms ease;
}

.footer img:hover {
  opacity: 1;
}

.active-indicator {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0.25rem;
  text-align: center;
  font-size: 1rem;
  opacity: 0;
  transition: all 500ms ease;
}

.active .active-indicator {
  opacity: 1;
}