@import url('https://fonts.googleapis.com/css2?family=Palanquin+Dark:wght@700&family=Yatra+One&display=swap');

body {
    background: #f007aa;
    margin: 0;
}
#ads{
    height:30px;
    width:70%;
    background:white;
}
#adsText{
    font-family:sans-serif;
    font-size:15px;
    color:white;
}

.mainContainer {
    background: white;
    max-width: 550px;
    min-height: 200px;
    margin: 0 auto;
    text-align: center;
    padding: 15px;
    color: #999;
    padding-bottom: 60px;

    box-shadow: 0 0 10px 1px rgba(0, 0, 0, .14), 0 1px 14px 2px rgba(0, 0, 0, .12), 0 0 5px -3px rgba(0, 0, 0, .3);


}
#clm{
    color:  #FFFFFF;
    text-shadow: 2px 2px 	#000000;

}
#pahle{
    font-family:sans-serif;
    font-size:35px;
    color:black;
}
#texts{
    font-family: sans-serif;
    text-align:center;
    font-size: 50px;
    font-weight:800;
    color: transparent;
    background-image: url('https://i.pinimg.com/originals/33/01/a1/3301a13ac3fcadfba8ccb2d6682e7701.gif');
    -webkit-background-clip: text;
}

#textp{
    font-family: sans-serif;
    text-align:center;
    font-size: 30px;
    font-weight:800;
    color: transparent;
    background-image: url('https://cdn.pixabay.com/animation/2023/02/24/15/52/15-52-12-954_512.gif');
  
    -webkit-background-clip: text;
}

#name {

    animation: name 4s infinite;
    margin-bottom: 5px;
    font-size: 50px;
   
    font-family: 'Teko', sans-serif;
    text-align: center;
    display: inline-block;
    width: 90%;
}

#usernameb {
    color: black;
    /* Fallback: assume this color ON TOP of image */
    background: url(Pics/sname.gif);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: swing 4s infinite;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-size: 25px;
    padding: 0 10px;
    font-family: 'SF Espresso Shack', cursive;
}


.m1 {
    position: fixed;
    left: 1%;
    width: auto;
    height: 100%;
    top: 1%;
    color: #000;
}

.m2 {
    position: fixed;
    right: 1%;
    width: auto;
    height: 100%;
    top: 1%;
    color: #000;
}


/* Custom Animation classes */
.name {
    color: #fff;
    margin: 6px;
    padding: 25px 20px;
    font-size: 48px;
    font-family: sans-serif;
}

.enter-name input[type=name] {
    background-color: yellow;
    color: black;
    font-weight: bold;
    border-radius: 10px;
    box-sizing: border-box;
    border: 2px solid black;
    padding: 5px;
    position: fixed;
    left: 10px;
    bottom: 5px;
    height: 50px;
    width: 70%;
    text-align: center;
    font-size: 22px;
    display: inline-block;
}

.enter-name .btn {
    border-radius: 10px;
    font-size: 18px;
    padding: 4px;
    position: fixed;
    right: 2px;
    bottom: 5px;
    height: 50px;
    width: 23%;
    display: inline-block;
    color: white;
    font-weight: 600;
    background-color: red;
    border: 2px solid black;
    letter-spacing: .5px;
    transition: .2s ease-out;
    cursor: pointer;
    line-height: 36px;
    outline: 0;
    text-transform: uppercase;
    vertical-align: middle;
    text-decoration: none;
    animation-duration: 4s !important;
}

.enter-name input[type=name]::-webkit-input-placeholder {
    color: black;
    font-size: 18px;
}

.enter-name input[type=name]::-moz-placeholder {
    color: black;
    font-size: 18px;
}

.enter-name input[type=name]:focus::-webkit-input-placeholder {
    color: black;
}

.enter-name input[type=name]:focus::-moz-placeholder {
    color: black;
    font-size: 18px;
}


#demo {
    
    
    color: blue;
    font-size: 22px;
    font-weight: bold;
    animation: pulse 2s infinite;
    width: 90%;
    margin: 4px auto;
}




a.rope {
    text-decoration: none;
}

.wishMessage {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    text-shadow: 0px 0px 10px #afafaf;
}

.wishMessage p {
    margin: 0.3em 0;
}

/* Custom Animation classes */
#show-name {
    font-size: 25px;
    display: inline-block;
    margin-bottom: 5px;
    animation: swing 1s infinite, glow 20s infinite;
}

@keyframes glow {

    0%,
    100% {
        text-shadow: 0 0 30px red;
    }

    25% {
        text-shadow: 0 0 30px orange;
    }

    50% {
        text-shadow: 0 0 30px forestgreen;
    }

    75% {
        text-shadow: 0 0 30px cyan;
    }
}

figure {
    animation: wobble 5s ease-in-out infinite;
    transform-origin: center center;
    transform-style: preserve-3d;
}

@keyframes wobble {

    0%,
    100% {
        transform: rotate3d(1, 1, 0, 40deg);
    }

    25% {
        transform: rotate3d(-1, 1, 0, 40deg);
    }

    50% {
        transform: rotate3d(-1, -1, 0, 40deg);
    }

    75% {
        transform: rotate3d(1, -1, 0, 40deg);
    }
}



* {
    margin: 0;
    padding: 0;
}

body {
    text-align: center;

}

img {
    border: none;
}

.leftcurtain {
    width: 100%;
    height:100% ;
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 3;
}

.rightcurtain {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    position: absolute;
    z-index: 3;
}

.rightcurtain img,
.leftcurtain img {
    width: 100%;
      height: 100%;;
}

.logo {
    margin: 0px auto;
    margin-top: 150px;
}

.rope {
    position: absolute;
    top: 10px;
    left: 23%;
    z-index: 4;
}


.centered {
    position: absolute;
    top: 70%;
    left: 55%;
    transform: translate(-50%, -50%);
}

a.rope {
    text-decoration: none;
}




@keyframes aadisoni {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    15% {
        transform: translate(-25px, 0px) rotate(-5deg);
    }

    30% {
        transform: translate(20px, 0px) rotate(3deg);
    }

    45% {
        transform: translate(-15px, 0px) rotate(-3deg);
    }

    60% {
        transform: translate(10px, 0px) rotate(2deg);
    }

    75% {
        transform: translate(-5px, 0px) rotate(-1deg);
    }

    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

@-webkit-keyframes aadisoni {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    15% {
        -webkit-transform: translate(-25px, 0px) rotate(-5deg);
    }

    30% {
        -webkit-transform: translate(20px, 0px) rotate(3deg);
    }

    45% {
        -webkit-transform: translate(-15px, 0px) rotate(-3deg);
    }

    60% {
        -webkit-transform: translate(10px, 0px) rotate(2deg);
    }

    75% {
        -webkit-transform: translate(-5px, 0px) rotate(-1deg);
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}



@keyframes name {
    0% {
        color: red;
    }

    20% {
        color: white;
    }

    40% {
        color: yellow;
    }

    60% {
        color: orange;
    }

    80% {
        color: cyan;
    }

    100% {
        color: #f45bf4;
    }
}


.glow {
    width: 50%;
    padding: 2px;
    background-color: #FF1493;
    animation: glow 2s infinite;
    font-size: 25px;
    font-family: 'Ranga', cursive;
    color: white;
    margin: auto;
    text-align: center;
    border-radius: 10px;
    text-shadow: 1px 2px 6px black;

}

@keyframes glow {
    0% {
        box-shadow: 0px 0px 0px #FF1493;
    }

    100% {
        box-shadow: 0px 0px 20px 5px #ffb3db;
    }

}

canvas {
    cursor: crosshair;
    display: block;
}

* {
    margin: 0;
    padding: 0
}

body {
    text-align: center
}

img {
    border: none
}



.centered {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.aadi {
    background-image: url();
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top
}

.matki {
    height: 200px;
}

@keyframes aadisoni {
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    15% {
        transform: translate(-25px, 0px) rotate(-5deg)
    }

    30% {
        transform: translate(20px, 0px) rotate(3deg)
    }

    45% {
        transform: translate(-15px, 0px) rotate(-3deg)
    }

    60% {
        transform: translate(10px, 0px) rotate(2deg)
    }

    75% {
        transform: translate(-5px, 0px) rotate(-1deg)
    }

    100% {
        transform: translate(0px, 0px) rotate(0deg)
    }
}

@-webkit-keyframes aadisoni {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg)
    }

    15% {
        -webkit-transform: translate(-25px, 0px) rotate(-5deg)
    }

    30% {
        -webkit-transform: translate(20px, 0px) rotate(3deg)
    }

    45% {
        -webkit-transform: translate(-15px, 0px) rotate(-3deg)
    }

    60% {
        -webkit-transform: translate(10px, 0px) rotate(2deg)
    }

    75% {
        -webkit-transform: translate(-5px, 0px) rotate(-1deg)
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg)
    }
}

#username {
    color: black;
    /* Fallback: assume this color ON TOP of image */
    background: url(img/namegif.gif);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: swing 4s infinite;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-size: 40px;
    padding: 0 10px;
    font-family: 'SF Espresso Shack', cursive;
}

#usernameb {
    color: black;
    /* Fallback: assume this color ON TOP of image */
    background: url(img/namegif.gif);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: swing 4s infinite;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-size: 25px;
    padding: 0 10px;
    font-family: 'SF Espresso Shack', cursive;
}

#loading {
    -webkit-animation: rotation-star 15s infinite linear;
    animation: rotation-star 15s infinite linear;
}

@-webkit-keyframes rotation-star {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-keyframes rotation-star {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
.footerbtn{
 
            display: block;
            line-height: 20px;
            position: fixed;
            left:0px;
            bottom:10px;
            height:60px;
            
border-radius: 15px;
  box-sizing: border-box;
  padding: 5px;
  background:#34af23;
  color: #ffffff;
  font-size:22px;
  text-align: center;
  text-decoration: none;
  width:95%;
 margin-left:10px;
            margin-right:30px;
            box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .3);
            animation: footer infinite linear 1s;
            -webkit-transform: translate3d(30%,0,0);
            transform: translate3d(30%,0,0);
            position: fixed;
           
}

.footerbtn :active {
            box-shadow: none
        }

        @-webkit-keyframes footer {
            from {
                -webkit-transform: rotateZ(0)
            }
            25% {
                -webkit-transform: rotateZ(1.5deg)
            }
            50% {
                -webkit-transform: rotateZ(0deg)
            }
            75% {
                -webkit-transform: rotateZ(-1.5deg)
            }
            to {
                -webkit-transform: rotateZ(0)
            }}