html,
body {
  font-family: "Helvetica", sans-serif;

  color: var(--color-primary);
}

.main-description {
  color: black;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
}

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 20vw;
  height: 20vw;
  z-index: 100;
  cursor: pointer;
  background-color: var(--color-primary);
  transform: translate(-50%, -50%) scale(1);
  /* transform-origin: center; */
  transition: background-color 500ms ease-in-out,
    border-radius 500ms ease-in-out, transform 1s ease-in-out 500ms;
}

.container:hover {
  background-color: black;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1.5);
}