@import url('https://fonts.googleapis.com/css?family=Exo+2');





.gooey{
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  width: 270px; height: 270px;
  animation: morph 250s linear infinite; 
  transform-style: preserve-3d;
  outline: 1px solid transparent;
  will-change: border-radius;
}
.gooey:before,
.gooey:after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0; top: 0;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);
  will-change: border-radius, transform, opacity;
  animation-delay: 200ms;
  
  	
}

.gooey:before{
  animation: morph 3s linear infinite;
  opacity: 1;
  animation-duration: 3.5s;
}

.gooey:after{
  animation: morph 10s linear infinite;
  animation-delay: 300ms;
  opacity: 1;
  content: "";
  line-height: 120px;
  text-indent: -21px;
}

@keyframes morph{
  0%,100%{
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
    filter: blur(20px);
    background-image: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);
  }
  50%{
      border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
    filter: blur(10px);
    
    
  }
  70%{
    opacity: .9;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
    filter: blur(10px);
    
  }
  80%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
    filter: blur(10px);
   
  }
}

@keyframes fadeIn{
  100%{
    transform: scale(1.03);
    opacity: 100;
  }
  
.txt_area {
		margin-top: 250px;
		color: #fff;
	} 
 
.txt_t01 { 
		display: block;
}

.txt_t02 { 
		display: block;
		text-align: center;
}








@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');/* regular-400, medium-500, semibold-600, bold-700 */ 

body,html {height:100%;margin:0;padding:0}
ul, li, dl, dt, dd, p, span{margin:0;padding:0}
a{text-decoration:none}
li{list-style:none}
a{text-decoration:none}
*, :after, :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.typing-container {
  font-size: 35px;
  font-weight:700;
  font-family:'Pretendard';
  margin: 50px;
  width:450px;
  word-break:keep-all
}

#cursor {
  border-left: 2px solid #000; /* 커서 스타일 */
  animation: blink 0.7s infinite;
  display: inline-block;
  margin-left: 2px;
  height: 35px; /* 폰트 크기와 동일하게 설정 */
  vertical-align: middle;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}