:root {
  interpolate-size: allow-keywords;
}


body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  flex-direction: column;
}


.star-container {
  position: relative;
  width: 540px;  
  height: 540px; 
  background-color: #ffffff;
  margin-top: 120px;
  border-radius: 50%;
  outline: 30px double #eaeaea;
}


.star > div {
  background-color: #81abf300;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  overflow: visible;
  border-radius: 5%;
  border: 17px solid #ffffff;


}

.star > div img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1000;
  border-radius: 2%;
  transition: all .75s ease;
}

.star > div.expanded {
  width: auto;
  height: auto;
  max-width: 400px;   
  max-height: 400px;
  z-index: 100;
  border: solid 1px #ffffff00;
}

.star > div.expanded img {
  position: static;
  width: 400px;     
  height: auto;      
  max-height: 500px;  
  border: solid 1px #ffffff00;
}

.month {
  position: absolute;
  left: 50.00%; top: 50.00%;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 60px;
  letter-spacing: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}

#point1 { left: 50.00%; top: 0.00%;}

#point2 { left: 97.55%; top: 34.55%; }

#point3 { left: 79.39%; top: 90.45%; }

#point4 { left: 20.61%; top: 90.45%; }

#point5 { left: 2.45%; top: 34.55%; }

#point5 { left: 2.45%; top: 34.55%; }


.textbox-container{
width: 60%;
height: 200px;
position: relative;
display: flex;
justify-content: center;
}

.textbox{
display: flex;
width: 175px;
height: 50px;
background-color: #ddd;
align-content: center;
margin-top: 100px;
text-align: center;
justify-content: center;
align-items: center;
transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
transition: all .5s ease;
}

.textbox.expanded {
  width: 600px;
  height: 50px;
  border-radius: 35px;
  border-color: #ffffff;
  border: #ffffff solid 5px;
  outline: 4px solid #ddd;
  background-color: #eaeaea;
  margin-top: 100px;
}

.textbox p {
  margin: 0;
  white-space: nowrap;
  font-family: Georgia, 'Times New Roman', Times, serif;
  letter-spacing: 1.5px;
  transition: color .5s ease;

}