@import url('https://fonts.googleapis.com/css2?family=Butcherman&family=Eater&family=Griffy&family=Nosifer&display=swap');

*{
    box-sizing: border-box;
    max-width: 100%;
}

body {
    background: linear-gradient(rgb(16, 14, 38),rgb(76, 63, 115) ) ;
    margin: 0 auto;
    position: relative;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
.p-background {
    color: rgb(17, 13, 26);
    background-color: rgb(244, 239, 219);
    padding: 20px;
    border-radius: 25px;
    /* max-width: 80%; */
    font-family:'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: 300;
    margin: auto; 
}
  /* SECTION 1 */

  h1 {
    font-family: 'Nosifer', cursive;
    color: rgb(112, 222, 69);
    font-size: 4.4rem;
    max-width: 100%;
  }
  #welcome-section{
    display: block;
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-bottom: 4rem;
  }
.play-btn {
    font-family:'Courier New', Courier, monospace;
    font-weight: normal;
    background-color: rgb(112, 222, 69);
    border: none;
    border-radius: 30px;
    padding: 20px;
    color:  rgb(16, 14, 38);
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 25px;
    width: 150px;
    height: auto;
    margin: 3rem auto;
}
.play-btn:hover {
    transition: smooth;
    font-size: 27px;
    width: 152px;
    height: auto;
    background-color: rgb(255, 234, 1);
}

/* // GHOSTTTTT */
body .all {
    animation: move 7s linear infinite alternate;
    position: relative;
    top: 20%;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-top: 4rem;
}
body .all .ghost {
    animation: updown 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
    position: absolute;
}
body .all .ghost .hat {
    position: absolute;
    top: -30%;
    left: 20%;
    z-index: 100;
    width: 0px;
    height: 0px;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    border-bottom: 100px solid #fffaf0;
    animation: hat 2.5s cubic-bezier(0.6, 0.02, 0.4, 1.1) infinite;
    transform-origin: bottom center;
}
body .all .ghost .hat:after {
    position: absolute;
    bottom: -105px;
    left: -75px;
    content: "";
    display: block;
    width: 150px;
    height: 15px;
    border-radius: 100%;
    background-color: #fffaf0;
    box-shadow: 0 3px 2px rgba(0, 0, 0, .1);
}
body .all .ghost .body {
    position: relative;
    top: 50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at 50% 40%, rgba(248, 248, 255, .95), rgba(239, 239, 241, .3) 56%, rgba(155, 80, 80, .5) 100%);
    transform: rotate(45deg);
    animation: body 3s cubic-bezier(0.5, 0.03, 0.3, 0.8) infinite;
}
body .all .ghost:before {
    z-index: 100;
    content: "";
    position: absolute;
    top: 25%;
    left: 20%;
    width: 120%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3) 14%, rgba(255, 255, 255, 0) 24%);
    -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    transform: translateX(-80px) translateY(-90px) skewX(-20deg);
}
body .all .ghost .eyeball {
    position: absolute;
    top: 25%;
    left: 50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(248, 248, 255, 1), rgba(239, 239, 241, 1) 66%, rgba(155, 80, 80, 1) 100%);
    box-shadow: 0 15px 0 #50436c;
}
body .all .ghost .eyeball:before {
    position: absolute;
    top: 45%;
    left: 40px;
    border-radius: 50%;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 50% 50%, white 0%, #444 30%, #202020 100%);
    animation: look 5s ease-out infinite;
}
body .all .ghost .eyeball .eyelid {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100px;
    background-color: #efc188;
    background: radial-gradient(circle at 50% 90%, rgba(239, 193, 136, 1), rgba(222, 167, 104, 1) 66%, rgba(155, 80, 80, 1) 100%);
    animation: sleepy 5s linear infinite;
}
body .all .shadow {
    position: absolute;
    bottom: -60%;
    width: 100px;
    height: 30px;
    border-radius: 100%;
    background: black;
    opacity: 0.2;
    filter: blur(7px);
    animation: shadow 2s infinite;
}

@keyframes updown {
    0% {
        top: 10%;
   }
    50% {
        top: 20%;
   }
    100% {
        top: 10%;
   }
}
@keyframes shadow {
    0% {
        transform: scale(1, 1);
   }
    50% {
        transform: scale(1.3, 1);
   }
    100% {
        transform: scale(1, 1);
   }
}
@keyframes sleepy {
    0% {
        height: 50px;
        border-radius: 50px 50px 0 0;
   }
    50% {
        height: 60px;
        border-radius: 60px 60px 0 0;
   }
    70% {
        height: 40px;
        border-radius: 40px 40px 0 0;
   }
    100% {
        height: 50px;
        border-radius: 50px 50px 0 0;
   }
}
@keyframes body {
    0% {
        border-radius: 180px 100% 5px 100%;
   }
    50% {
        border-radius: 180px 80% 20px 80%;
   }
    100% {
        border-radius: 180px 100% 5px 100%;
   }
}
@keyframes move {
    0% {
        transform: translate(-10rem, 10rem);
        opacity: 1;
   }
   25% {
        transform: translate(-2rem, -2rem);
        opacity: 1;
   }
    50% {
        transform: translate(3rem, -3rem);
        opacity: 0.3;
   }
    100% {
        transform: translate(12rem, 10rem);
        opacity: 1;
   }
}
@keyframes hat {
    0% {
        transform: scale(1, 1);
   }
    50% {
        transform: scale(1, 0.9);
   }
    100% {
        transform: scale(1, 1);
   }
}
@keyframes look {
    0% {
        transform: none;
   }
    20% {
        transform: translateX(-18px) translateY(23px) skewX(15deg) skewY(-10deg) scale(0.95);
   }
    25%, 44% {
        transform: none;
   }
    50%, 60% {
        transform: translateX(18px);
   }
    70% {
        transform: scale(1.3);
   }
    66%, 100% {
        transform: none;
   }
}

/* // END OF GHOST */

@media all and (max-width:1100px){
    /* #welcome-section {
        padding-right: 4rem;
        padding-left: 4rem;
    } */
    h1 {
        font-size: 3.5rem;
    }
    .play-btn {
        width: 110px;
    }

} 
@media all and (max-width:750px){
    body{
        max-width: 100%;
    }
    #welcome-section {
        padding-right: auto;
        padding-left: auto;
        width: 80%;
    }
    h1 {
        font-size: 2.4rem;
        width: 100%;
    }
    .p-background{
        width: 100%;
    }
    .play-btn {
        padding: 15px;
        font-size: 22px;
        margin: 1rem auto;
    }

}
    @keyframes move {
        0% {
            transform: translate(-10rem, 10rem);
            opacity: 1;
       }
       25% {
            transform: translate(-2rem, -2rem);
            opacity: 1;
       }
        50% {
            transform: translate(3rem, -3rem);
            opacity: 0.3;
       }
        100% {
            transform: translate(7rem, 9rem);
            opacity: 1;
       }
    }
    @media all and (max-width:500px){
        h1 {
            font-size: 1.8rem;
        }
    
    } 
    @media all and (max-width:380px){
        
        h1 {
            font-size: 2rem;
        }
        p{
            font-size: .8rem ;
        }
        @keyframes move {
            0% {
                transform: translate(-7rem, 10rem);
                opacity: 1;
           }
           25% {
                transform: translate(-2rem, -2rem);
                opacity: 1;
           }
            50% {
                transform: translate(1rem, -3rem);
                opacity: 0.3;
           }
            100% {
                transform: translate(2rem, 9rem);
                opacity: 1;
           }
        }  }