body {
    background-color:black;
    text-align: center;
}

.ghost1 {
    line-height: 1.5;
    font-size: 24px;
    color: white;
    transition: transform 0.3s ease;
}

.ghost2{
    line-height:1.5;
    font-size:24px;
    color:white;
}

.ghost3{
    line-height:1.5;
    font-size:24px;
    color:white;
}

.ghost3{
    line-height:1.5;
    font-size:24px;
    color:white;
}

.ghost4{
    line-height:1.5;
    font-size:24px;
    color:white;
}

.ghost5{
    line-height:1.5;
    font-size:24px;
    color:white;
}

.ghost6{
    line-height:1.5;
    font-size:24px;
    color:white;
}

.pumpkin{
    text-align: center;
    margin-top: 100px;
}

/*.box1{
    display:inline-block;
    animation: float 3s ease-in-out infinite;
}*/

/*.box2{
    display:inline-block;
    animation: float 3s ease-in-out infinite;
    animation-delay: 1s;
}*/

/*.box3{
    display:inline-block;
    animation: float 3s ease-in-out infinite;
    animation-delay: 2s;
}*/

/*.box4{
    display:inline-block;
    animation: float 3s ease-in-out infinite;
    animation-delay: 4s;
}*/


@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes float{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-100px);
    }
    100%{
        transform: translateY(0);
    }
}

.skew1{
  display: inline-block;
  animation: skew 2s infinite alternate;
}

.skew2{
    display: inline-block;
    animation: skew 2s infinite alternate;
}

.skew3{
    display: inline-block;
    animation: skew 2s infinite alternate;
}

.skew4{
    display: inline-block;
    animation: skew 2s infinite alternate;
}

.skew5{
    display: inline-block;
    animation: skew 2s infinite alternate;
}

.skew6{
    display: inline-block;
    animation: skew 2s infinite alternate;
}

@keyframes skew {
  0%   { transform: skewX(0deg); }
  100% { transform: skewX(30deg); }
}

.box1 {
  position: absolute;
  animation: fly1 5s linear infinite alternate;
}

.box2{
  position: absolute;
  animation: fly2 3s linear infinite alternate;
}

.box3{
  position: absolute;
  animation: fly3 5s linear infinite alternate;
}

.box4{
  position: absolute;
  animation: fly4 3s linear infinite alternate;
}

.box5{
    position: absolute;
    animation: fly5 5s linear infinite alternate;
}

.box6{
    position: absolute;
    animation: fly6 5s linear infinite alternate;
}

@keyframes fly1 {
  0%   { top: 10%; left: 10%; }
  25%  { top: 10%; left: 80%; }
  50%  { top: 80%; left: 80%; }
  75%  { top: 80%; left: 10%; }
  100% { top: 10%; left: 10%; }
}

@keyframes fly2 {
  0%   { top: 70%; left: 15%; }
  50%  { top: 60%; left: 40%; }
  100% { top: 15%; left: 80%; }
}

@keyframes fly3 {
  0%   { top: 90%; left: 60%; }
  50%  { top: 20%; left: 40%; }
  100% { top: 80%; left: 5%; }
}

@keyframes fly4 {
  0%   { top: 30%; left: 80%; }
  100% { top: 80%; left: 60%; }
}

@keyframes fly5 {
  0%   { top: 40%; left: 30%; }
  50%  { top: 10%; left: 80%; }
  100% { top: 90%; left: 10%; }
}

@keyframes fly6 {
  0%   { top: 10%; left: 50%; }
  25%  { top: 30%; left: 70%; }
  100% { top: 10%; left: 30%; }
}

.a{
  display: inline-block;
  animation: grow1 1s infinite alternate;
}

@keyframes grow1 {
  0%   { transform: scale(1); }
  100% { transform: scale(10); }
}

.l{
  display: inline-block;
  animation: grow2 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes grow2 {
  0%   { transform: scale(1); }
  100% { transform: scale(10); }
}

.o{
    display: inline-block;
    animation: grow3 1s infinite alternate;
    animation-delay: 2s;
}

@keyframes grow3 {
  0%   { transform: scale(1); }
  100% { transform: scale(10); }
}

.n{
    display: inline-block;
    animation: grow4 1s infinite alternate;
    animation-delay: 3s;
}

@keyframes grow4 {
  0%   { transform: scale(1); }
  100% { transform: scale(10); }
}

.e{
    display: inline-block;
    animation: grow5 1s infinite alternate;
    animation-delay: 4s;
}

@keyframes grow5 {
  0%   { transform: scale(1); }
  100% { transform: scale(10); }
}

.m{
    display: inline-block;
    animation: grow6 1s infinite alternate;
    animation-delay: 5s;
}

@keyframes grow6 {
  0%   { transform: scale(1); }
  100% { transform: scale(10); }
}

.halloween-text {
  font-size: 70px;
  font-family: serif;
  font-weight: bold;
  color: #ff6600;
  margin-top: 20px;
  letter-spacing: 2px;
  display: inline-block;
  animation: grow 1.5s ease-in-out;
}

.halloween{
    text-align: center;
    margin-top: 100px;
}

.h{
    color: red;
}

@keyframes grow {
  0%   { transform: scale(1); }
  70%  { transform: scale(5); }
  100% { transform: scale(1); }
}