:root {
  --purple: #6766ff;
  --orange: #F1644F;
  --aqua: #4FF1F0;
  --obsidian: #2929a6;
}

body {
  overflow: hidden;
}

html,
body {
  overflow-x: hidden;
  margin: 0;
  background: #fff6f9;
  font-family: 'Fraunces', serif;
}

body>section {
  height: 30vh;
}

h1 {
  margin: 0;
}

a {
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}

.physics-ball,
.physics-text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

.physics-ball {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
}



/* Hero section background */
#introduction {
  background: var(--purple);

}

#introduction h1 {
  color: #fff;
  /* background: linear-gradient(135deg, #ff79c6, #8a2be2); */
  border: 4px solid #fff;
  border-radius: 0px;
  font-size: 10vw;
}


#introduction .physics-ball.dragme {

  background: linear-gradient(135deg, #00ff99, #ff6f91);
  /* green → pink */
  color: #fff;

  .container {
    width: 100%;
    height: 100%;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;

    .float {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: float 3s ease-in-out infinite;
      font-size: 1rem;
      background-color: #ffffff77;
      color: black;

      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}





#about {
  background-color: var(--orange);
}

#about h1,
#tshirt h1 {
  color: #fff;
  /* border: 4px solid #fff; */
  border-radius: 0px;
  font-size: 5vw;
}

#about .physics-ball.instagram,
#tshirt .physics-ball.instagram {

  .container {
    position: relative;
  }
}



#about .float.instagram {
  background-color: #333;
  color: white;
  font-family: "Lucida Console", "Courier New", monospace;

  padding: .5rem;
  font-weight: bold;

  border-radius: 10px;
}




#tshirt {
  background-color: var(--aqua);
}


#tshirt .float.instagram {
  background-color: #333;
  color: white;
  font-family: "Lucida Console", "Courier New", monospace;

  padding: .5rem;
  font-weight: bold;

  border-radius: 10px;
}



#tshirt .button {
  background-color: #338;
  color: gold;
  font-size: 10vw;
  font-weight: bolder;
  padding: 1vw 2vw;
  border-radius: 2vw;
  border: 1vw solid goldenrod;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* efecto overlay para el cooldown */
#tshirt .button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: gold;
  opacity: 0;
  transition: opacity 0.7s ease;
  z-index: -1;
}

#tshirt .button.cooldown::after {
  opacity: 1;
}