* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

html {
  --hue: 273;
  --base-color: hsl(var(--hue), 78%, 25%);
  --background-menu: hsla(var(--hue), 92%, 92%);
  --body-color: hsla(var(--hue), 85%, 85%);
  --body-color-second: hsl(var(--hue), 80%, 80%);

  scroll-behavior: smooth;
}

body {
  background-color: var(--body-color);
  font: 100 1.5rem 'Teko', sans-serif;
}


.section {
  padding: 7rem 0;
}

.grid {
  display: grid;
  gap: 2rem;
}

.centerTheText {
  margin-left: auto;
  margin-right: auto;
  max-width: 85%;
  text-align: center;
}

.title {
  font: 700 2rem 'Teko', sans-serif;
  margin-bottom: 1rem;
}

.button {
  display: flex;

  background-color: var(--base-color);
  color: white;

  padding: 0.5rem;

  border-radius: 0.25rem;

  cursor: pointer;

  width: 15rem;

  justify-content: center;
  margin: 1rem auto;

  position: relative;
 
}

@keyframes levitate {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(0, 0.5rem);
  }
}

.button::before {
  content: '';
  background-color: blueviolet;
  width: 0;
  height: 0;

  position: absolute;
  top: 0;
  left: 0;

  transition: 0.3s;
  z-index: -1;
  border-radius: 0.25rem;
}

.button:hover {
  animation: levitate 1.2s alternate ease-in-out infinite;
}


.button:hover::before {
  width: 100%;
  height: 100%;
}

.divider-A {
  height: 1px;
  background: linear-gradient(
    270deg,
    hsla(var(--hue), 36%, 57%, 1),
    hsla(var(--hue), 65%, 88%, 0.34)
  );
}

.divider-B {
  height: 1px;
  background: linear-gradient(
    270deg,
    hsla(var(--hue), 65%, 88%, 0.34),
    hsla(var(--hue), 36%, 57%, 1)
  );
}