body{background-color: palegoldenrod;}

.text {color: sienna;
  font size:30;
  text-transform: uppercase;
  font-family: Helvetica;
  position: relative;
  z-index: 1;
}
h1 { color: sienna;
  font size:30;
  text-transform: uppercase;
  font-family: Helvetica; 
}


.star-container {
  display: flex;
  justify-content: center; 
  gap: 20px; 
  margin-top: 20px; 
}

.star, .starr {
  height: 200px;
  width: 200px;
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  text-align: center;
  background: darkolivegreen;
  position: relative;
  display: flex; 
  align-items: center; 
  text-transform: uppercase;
  font-family: Helvetica; 
  justify-content: center; 
  transition: height 0.3s ease, width 0.3s ease; 
}

.star a, .starr a {
  color: white;
  text-decoration: none; 
}

.star:hover, .starr:hover {
  height: 250px;
  width: 250px;
}

.star::before, .starr::before {
  display: inline-block;
  height: 100%;
  width: 100%;
  background: darkolivegreen;
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: -1; 
  clip-path: inherit; 
}

.starr:hover {
  height: 250px;
  width: 250px;
  transition: 0.3s ease;
}