body {
	background-color: purple;
	margin:0;
}
.g-body {
	width: 150px;
	height: 250px;
	background-color: ghostwhite;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	position: absolute;
	top: 75px;
	left: 100px;
}
.g-right-eye {
	width: 20px;
	height: 40px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 130px;
	left: 150px;
}
.g-left-eye {
	width: 20px;
	height: 40px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 130px;
	left: 230px;
}
.g-mouth {
	width: 100px;
	height: 65px;
	background-color: gray;
	border-radius: 100%;
	position: absolute;
	top: 200px;
	left: 150px;
}

.g-body-alt {
	width: 150px;
	height: 250px;
	background-color: ghostwhite;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	position: absolute;
	top: 75px;
	left: calc((100vw - 200px) / 2);
	animation-duration: 15s;
  animation-name: up-down;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes up-down {
  0% {
    top: 70px;
    left: 80px;
  }
  50% {
    top: 40px;
    left: 130px;
  }
  100% {
    top: 75px;
    left: 100px;
  }
}

.g-right-eye-alt {
	width: 25px;
	height: 50px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 80px;
	left: 50px;
}
.g-left-eye-alt {
	width: 25px;
	height: 50px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 80px;
	left: 130px;
}
.g-mouth-alt {
	width: 30px;
	height: 30px;
	background-color: gray;
	border-radius: 100%;
	position: absolute;
	top: 150px;
	left: 85px;

}

body {
	background-color: purple;
	margin:0px;
}

.ghost-canvas{
    position: relative ;
    width: 600px;
    height: 400px;
    margin: 0px auto 0 auto;
}

.ghost-body{
    position: absolute;
    height: 28%;
    width: 22%;
    background-color: white;
    left: 150%;
    top:  20%;
    animation-name: floating;
    animation-duration: 10s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
 
}
.ghost-body-copy{
    position: absolute;
    height: 28%;
    width: 22%;
    background-color: white;
    left: 50%;
    top:  50%;
    z-index: 1;
}

.ghost-head{
    position: absolute;
    height: 100%;
    width: 100%;
    top: -50%;
    background-color: white;
    border-radius: 90px;
    
}
.eye-right{
    position: absolute;
    height: 22%;
    width: 20%;
    right: 22%;
    top: 40%;
    background-color: black;
    border-radius: 50%;
}
.eye-left{
    position: absolute;
    height: 22%;
    width: 20%;
    left: 22%;
    top: 40%;
    background-color: black;
    border-radius: 50%;
}
.mouth{
    position: absolute;
    height: 26%;
    width: 24%;
    left: 38%;
    top: 70%;
    background-color: black;
    border-radius: 50%;
    z-index: 2
}
.down-bubble{
    position: absolute;
    height: 55%;
    width: 100%;
    top:70%;
}

.bubble-1{
    position: absolute;
    height: 100%;
    width:25%;
    background-color: white;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    animation-name: bubble;
    animation-duration: 2.8s;
    animation-iteration-count: infinite;
    animation-timing-function:ease-in-out;

}
.bubble-2{
    position: absolute;
    height: 100%;
    width:25%;
    left: 25%;
    background-color: white;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    animation-name: bubble;
    animation-duration: 3.2s;
    animation-iteration-count: infinite;
    animation-timing-function:ease-in-out;
  
}
.bubble-3{
    position: absolute;
    height: 100%;
    width:25%;
    right: 25%;
    background-color: white;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    animation-name: bubble;
    animation-duration: 3.4s;
    animation-iteration-count: infinite;
    animation-timing-function:ease-in-out;
  
}
.bubble-4{
    position: absolute;
    height: 100%;
    width:25%;
    right: 0;
    background-color: white;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    animation-name: bubble;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function:ease-in-out;

}


@keyframes bubble{
    0%{
        top: 0;
    }
    50%{
        top:20%;
    }
     100%{
        top: 0;
    }
}
@keyframes floating{
    0%{top: 33%;}
    30%{top: 40%;}
    50%{top:33%;}
    70%{top:25%;}
    100%{top:33%;}
}



* {
	padding: px;
	margin: 0px;
}
.pumpkin-wrapper {
	position: absolute;
	top: 80%;
	left: 80%;
	width: 300px;
	height: 200px;
	background-color: #ff7518;
	border: 5px solid #d46e2a;
	transform: translateX(-50%) translateY(-50%);
	border-radius: 70%/110%;
	z-index: 1;
	box-shadow: inset 0 0px 40px #d46e2a, 0 0 40px #b20010;
	animation: pulse 1.5s infinite;
}
.pumpkin-inner-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}
.pumpkin {
	position: absolute;
	bottom: -10px;
	left: 75px;
	width: 150px;
	height: 198px;
	border-bottom: 6px solid #cb5200;
	border-top: 6px solid #cb5200;
	border-radius: 70%/110%;
}
.pumpkin::before {
	content: '';
	position: absolute;
	bottom: -5px;
	left: -55px;
	display: block;
	height: 198px;
	width: 250px;
	border-bottom: 6px solid #cb5200;
	border-bottom: 6px solid #cb5200;
	border-radius: 70%/110%;
}
.root {
	position: absolute;
	left: 50%;
	top: -35px;
	height: 35px;
	width: 15px;
	background-color: #00983d;
	border-radius: 30% 20% 70% 10%;
	transform: rotate(10deg);
	box-shadow: 0 0 20px #0e7537
}
.left-eye {
	position: absolute;
	top: 40px;
	left: 65px;
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 33px solid transparent;
	border-right: 40px solid #652900;
	transform: rotate(-30deg);
}
.right-eye {
	position: absolute;
	top: 40px;
	right: 65px;
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 33px solid transparent;
	border-right: 40px solid #652900;
	transform: rotateY(180deg) rotate(-30deg);
}
.nose {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 32px solid transparent;
	border-right: 28px solid #652900;
	transform: translateX(-30%) translateY(-45%) rotate(25deg) rotateZ(180deg);
}
.mouth-left {
	position: absolute;
	bottom: 20px;
	left: 80px;
	width: 70px;
	height: 30px;
	border-bottom: 12px solid #652900;
	border-radius: 0 0 0 100%;
}

.mouth-right {
	position: absolute;
	bottom: 20px;
	right: 80px;
	width: 70px;
	height: 30px;
	border-bottom: 12px solid #652900;
	border-radius: 0 0 100% 0;
}
.teeth {
	position: absolute;
	bottom: 25px;
	left: 140px;
	width: 6px;
	height: 5px;
	border-top: 15px solid transparent;
	border-bottom: 0px solid transparent;
	border-left: 15px solid #652900;
}
.teeth::before {
	position: absolute;
	right: 38px;
	top: -12px;
	content: '';
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 12px solid #652900
}
.teeth::after {
	position: absolute;
	left: 20px;
	top: -10px;
	content: '';
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 12px solid #652900;
	transform: rotate(30deg);
}

@keyframes pulse {
	0% {
		box-shadow: inset 0 0px 40px #d46e2a, 0 0 25px #b20010;
	}
	70% {
		box-shadow: inset 0 0px 40px #d46e2a, 0 0 40px #b20010;
	}
	100% {
		box-shadow: inset 0 0px 40px #d46e2a, 0 0 25px #b20010;
	}
}

* {
  margin: 80;
  padding: 100;
} 

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  text-align: center;
  z-index: 10;
}


.line {
  width: 100vw;
  white-space: nowrap;
}


.left, .right {
  width: 50vw;
  overflow: hidden;
  display: inline-block;
}

.left {
  color: orangered;
  transform: skew(0deg, -15deg);
}

.right {
  color: black;
  transform: skew(0deg, 15deg);
}

.left .content, .right .content {
  width: 100vw;
  text-align: center;
}


.right .content {
  transform: translateX(-50vw);
}


span {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10vw;
  text-transform: uppercase;
  line-height: 0.8;
  transition: transform 0.6s ease-out;
}

span {
  animation: move-text 3s infinite ease-in-out;
}

.hover-move {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 10vw, 6rem);
  text-transform: uppercase;
  margin: 0 0.5rem;
  transition: transform 0.1s ease-out;
}

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.wrap:hover .hover-move {
  transform: translateX(var(--mouse-x, 0px));
}