body{
	background-color: black;
}
.g-body {
	width: 200px;
	height: 400px;
	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: 50px;
	left: calc((100vw - 200px) / 2);
	animation-name: left-right;
	animation-duration: 5s;
	 animation-iteration-count: infinite;
  	animation-timing-function: alternate;

}
.g-right-eye {
	width: 30px;
	height: 30px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 50px;
	left: 120px;
}
	.g-right-pupil{
		width: 15px;
		height: 15px;
		background-color: ghostwhite;
		border-radius: 100%;
		position: absolute;
		top: 63px;
		left: 127px;
		transform-origin: center top;
		animation-name: spin;
		animation-duration: 1s;
	 animation-iteration-count: infinite;
  	animation-timing-function: linear;
}
.g-left-eye {
	width: 30px;
	height: 30px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 50px;
	left: 60px;x
}
.g-left-pupil{
		width: 15px;
		height: 15px;
		background-color: ghostwhite;
		border-radius: 100%;
		position: absolute;
		top: 63px;
		left: 63px;
		transform-origin: center top;
		animation-name: back-spin;
		animation-duration: 1s;
	 animation-iteration-count: infinite;
  	animation-timing-function: linear;
  }
.g-mouth {
	width: 100px;
	height: 50px;
	border: 5px solid black;
	border-radius: 100%;
	position: absolute;
	top: 120px;
	left: 60px;
}
.g-tongue{
	width: 50px;
	height: 70px;
	background-color: red;
	border-top-left-radius: 60px;
	border-top-right-radius: 60px;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
	position: absolute;
	top: 150px;
	left: 90px;
	transform-origin: center top;
	animation-name: back-spin;
	animation-duration: 3s;
	 animation-iteration-count: infinite;
  	animation-timing-function: linear; 
}
@keyframes spin {
	 from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }   
}
@keyframes back-spin {
	 from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(-360deg);
    } 
}
@keyframes left-right{
	0%{
		top: 50px;
	left: calc((100vw - 200px) / 2);
	}
	33% {
		top: 50px;
		left: 0vw;
	}
	66%{
		top: 50px;
		left: calc(100vw - 200px);
	}
	100%{
		top: 50px;
	left: calc((100vw - 200px) / 2);
	}


	}
.g-mouth-cover {
	width: 100px;
	height: 50px;
	background-color: ghostwhite;
	position: absolute;
	top: 100px;
	left: 40px;
}
.tv {
      position: relative;
      width: 600px;
      height: 450px;
      margin: 20px 0;
      background: lightblue;
      border-radius: 50% / 10%;
      color: white;
      text-align: center;
      text-indent: .1em;
      position: absolute;
      top: 200px;
      left: calc((100vw - 600px) / 2);
    }

	.static-1{
	position: absolute;
	width: 600px;
	height:10px;
	background-color: white;
	top: 50px;
}
.static-1{
	position: absolute;
	width: 600px;
	height:10px;
	background-color: white;
	top: 50px;
}
.static-2{
	position: absolute;
	width: 600px;
	height:10px;
	background-color: black;
	top: 100px;
}
.static-3{
	position: absolute;
	width: 600px;
	height:10px;
	background-color: white;
	top: 150px;
}
.static-4{
	position: absolute;
	width: 600px;
	height:10px;
	background-color: white;
	top: 200px;
}
.static-5{
	position: absolute;
	width: 600px;
	height:10px;
	background-color: black;
	top: 250px;
}
.static-6{
	position: absolute;
	width: 600px;
	height:10px;
	background-color: white;
	top: 300px;
}
.static-7{
	position: absolute;
	width: 600px;
	height:10px;
	background-color: white;
	top: 350px;
}
.static-8{
	position: absolute;
	width: 600px;
	height:10px;
	background-color: black;
	top: 400px;
}

.g-body-2 {
	width: 200px;
	height: 400px;
	background-color: ghostwhite;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	position: absolute;
	top: 50px;
	left: calc((100vw - 200px) / 2);
	animation-name: up-down;
	animation-duration: 1s;
	 animation-iteration-count: infinite;
  	animation-timing-function: alternate;
  }
  	.g-right-eye-2 {
	width: 30px;
	height: 30px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 50px;
	left: 120px;
}
.g-right-pupil-2{
		width: 15px;
		height: 15px;
		background-color: ghostwhite;
		border-radius: 100%;
		position: absolute;
		top: 63px;
		left: 127px;
	}
.g-left-eye-2 {
	width: 30px;
	height: 30px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 50px;
	left: 60px;x
}
.g-left-pupil-2{
		width: 15px;
		height: 15px;
		background-color: ghostwhite;
		border-radius: 100%;
		position: absolute;
		top: 63px;
		left: 68px;
}
	.g-mouth-2 {
	width: 50px;
	height: 50px;
	background-color: black;
	border: 5px solid black;
	border-radius: 100%;
	position: absolute;
	top: 120px;
	left: 75px;
}
@keyframes up-down{
	0%{
		top: 50px;
	left: calc((100vw - 200px) / 2);
	}
	33% {
		top: 500px;
		left: calc((100vw - 200px) / 2);
	}
	66%{
		top: 0px;
		left: calc((100vw - 200px) / 2);
	}
	100%{
		top: 50px;
	left: calc((100vw - 200px) / 2);
}
}
	.g-body-3 {
	width: 200px;
	height: 400px;
	background-color: ghostwhite;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	position: absolute;
	top: 50px;
	left: calc((100vw - 1500px) / 2);
	animation-name: up-down-2;
	animation-duration: 3s;
	 animation-iteration-count: infinite;
  	animation-timing-function: alternate;
  }
  .g-right-eye-3 {
	width: 30px;
	height: 30px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 50px;
	left: 120px;
}
.g-right-pupil-3{
		width: 15px;
		height: 15px;
		background-color: ghostwhite;
		border-radius: 100%;
		position: absolute;
		top: 63px;
		left: 127px;
	}
.g-left-eye-3 {
	width: 30px;
	height: 30px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 50px;
	left: 60px;x
}
.g-left-pupil-3{
		width: 15px;
		height: 15px;
		background-color: ghostwhite;
		border-radius: 100%;
		position: absolute;
		top: 63px;
		left: 68px;
	}
	.g-mouth-3 {
	width: 50px;
	height: 50px;
	background-color: black;
	border: 5px solid black;
	border-radius: 100%;
	position: absolute;
	top: 120px;
	left: 75px;
}
@keyframes up-down-2{
	0%{
		top: 50px;
	left: calc((100vw - 1500px) / 2);
	}
	33% {
		top: 500px;
	left: calc((100vw - 1500px) / 2);
		
	}
	66%{
		top: 0px;
	left: calc((100vw - 1500px) / 2);
		
	}
	100%{
		top: 50px;
	left: calc((100vw - 1500px) / 2);}

}
.g-body-4 {
	width: 200px;
	height: 400px;
	background-color: ghostwhite;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	position: absolute;
	top: 50px;
	left: calc(100vw - 200px);
	animation-name: up-down-3;
	animation-duration: 2s;
	 animation-iteration-count: infinite;
  	animation-timing-function: alternate;
  }
  .g-right-eye-4 {
	width: 30px;
	height: 30px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 50px;
	left: 120px;
}
.g-right-pupil-4{
		width: 15px;
		height: 15px;
		background-color: ghostwhite;
		border-radius: 100%;
		position: absolute;
		top: 63px;
		left: 127px;
	}
.g-left-eye-4 {
	width: 30px;
	height: 30px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 50px;
	left: 60px;x
}
.g-left-pupil-4{
		width: 15px;
		height: 15px;
		background-color: ghostwhite;
		border-radius: 100%;
		position: absolute;
		top: 63px;
		left: 68px;
	}
	.g-mouth-4 {
	width: 50px;
	height: 50px;
	background-color: black;
	border: 5px solid black;
	border-radius: 100%;
	position: absolute;
	top: 120px;
	left: 75px;
}
@keyframes up-down-3{
	0%{
		top: 50px;
	left: calc(100vw - 200px);
	}
	33% {
		top: 500px;
	left: calc(100vw - 200px);
		
	}
	66%{
		top: 0px;
	left: calc(100vw - 200px);
		
	}
	100%{
		top: 50px;
	left: calc(100vw - 200px);}

}
.g-body-5 {
	width: 200px;
	height: 400px;
	background-color: ghostwhite;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	position: absolute;
	top: 50px;
	left: calc((100vw - 200px) / 2);
	animation-name: up-down-4;
	animation-duration: 4s;
	 animation-iteration-count: infinite;
  	animation-timing-function: alternate;
  }
  .g-right-eye-5 {
	width: 30px;
	height: 30px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 50px;
	left: 120px;
}
.g-right-pupil-5{
		width: 15px;
		height: 15px;
		background-color: ghostwhite;
		border-radius: 100%;
		position: absolute;
		top: 63px;
		left: 127px;
	}
.g-left-eye-5 {
	width: 30px;
	height: 30px;
	background-color: black;
	border-radius: 100%;
	position: absolute;
	top: 50px;
	left: 60px;x
}
.g-left-pupil-5{
		width: 15px;
		height: 15px;
		background-color: ghostwhite;
		border-radius: 100%;
		position: absolute;
		top: 63px;
		left: 68px;
	}
	.g-mouth-5 {
	width: 50px;
	height: 50px;
	background-color: black;
	border: 5px solid black;
	border-radius: 100%;
	position: absolute;
	top: 120px;
	left: 75px;
}
@keyframes up-down-4{
	0%{
	top: 50px;
	left: calc((100vw - 200px) / 2);
	}
	20% {
	top: 250px;
	left: calc((100vw - 1500px) / 2);
		
	}
	60%{
		top: 500px;
		left: calc((100vw - 200px) / 2);
	}
	80%{
		top: 250px;
	left: calc(100vw - 200px);		
	}
	100%{
	top: 50px;
	left: calc((100vw - 200px) / 2);

}