html,
body {
  font-family: "Helvetica", sans-serif;
 
  color: var(--color-primary);
}

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

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.title {
  font-size: 300px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  padding: 10vw; 
  font-weight: 800;
  /* Starting point */
  color: orange;
  transform: rotate(0deg);

  /* Transition point */
  transition: color 3s ease-in-out, transform 5s ease-in-out 500ms, letter-spacing 2s ease-in-out;
  /* transition: all 1s ease-in-out; */
}

.title:hover {
  color: blue;
  transform: rotate(360deg);
  letter-spacing: 100px;
}