.dock {
  margin: auto auto 12px auto;
  border-radius: 24px;
  padding: 0 12px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
  box-shadow: rgba(255, 255, 255, 0.17) 0px 0px 0px 1px inset;
  width: fit-content;
}

.dock ul {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.app {
  width: 60px;
  height: 60px;
  position: relative;
  transition: width, height, margin-top, cubic-bezier(0.5, 1, 0.5, 1) 200ms;
}

@media only screen and (min-width: 598px) {
  .app:hover {
    width: 90px;
    height: 90px;
    margin-top: -30px;
  }

  /* Right side */
  .app:hover+.app {
    width: calc(80px + var(--dock-offset-right, 0px));
    height: calc(80px + var(--dock-offset-right, 0px));
    margin-top: calc(-20px + var(--dock-offset-right, 0px) * -1);
  }

  .app:hover+.app+.app {
    width: calc(70px + var(--dock-offset-right, 0px));
    height: calc(70px + var(--dock-offset-right, 0px));
    margin-top: calc(-10px + var(--dock-offset-right, 0px) * -1);
  }

  /* Left side */
  .app:has(+ .app:hover) {
    width: calc(80px + var(--dock-offset-left, 0px));
    height: calc(80px + var(--dock-offset-left, 0px));
    margin-top: calc(-20px + var(--dock-offset-left, 0px) * -1);
  }

  .app:has(+ .app + .app:hover) {
    width: calc(70px + var(--dock-offset-left, 0px));
    height: calc(70px + var(--dock-offset-left, 0px));
    margin-top: calc(-10px + var(--dock-offset-left, 0px) * -1);
  }

  .app:hover .tooltip,
  .app:focus-within .tooltip {
    opacity: 1;
  }
}

.app img {
  width: 100%;
  height: 100%;
}

.app a {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
  color: #fff;
}

.tooltip {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: ease-in opacity 100ms;
  display: block;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  padding: 8px;
  border-radius: 12px;
  height: 22px;
  width: auto;
  box-shadow: rgba(0, 0, 0, 0.17) 0px 12px 8px 1px;
  white-space: nowrap;
}

.source-links {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  right: 20px;
  top: 20px;
  text-align: right;
}

.source-links a {
  color: #fff;
  opacity: 0.3;
  margin-bottom: 8px;
}

.source-links a:hover {
  opacity: 1;
}

@media only screen and (max-width: 598px) {
  .dock {
    margin: auto auto 12px auto;
    border-radius: 24px;
    padding: 20px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
    width: 97%;
  }

  .dock ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px 15px;
    width: 100%;
  }

  .app {
    width: 100%;
    height: auto;
    max-width: 60px;
    position: relative;
    transition: width, height, margin-top, cubic-bezier(0.5, 1, 0.5, 1) 200ms;
  }

  .dock .app {
    position: relative;
  }

  .tooltip {
    position: relative;
    top: -5px;
    text-align: center;
    opacity: 1;
    font-size: 10px;
    display: block;
    background: transparent;
    padding: 0px;
    height: auto;
    width: 100%;
    box-shadow: none;
    white-space: wrap;
    text-wrap: wrap;
  }

}