@import url('https://fonts.googleapis.com/css?family=Merienda');
body, html{
  padding: 0;
  margin: 0;
}
body{
  background-color: #f8f8f8;
  text-align: center;
  padding-bottom:50px;
  color: #212529;
  margin:0;
}

         .mainContainer {
          background: #fff;
          max-width: 450px;
          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);
         }
		 .hp{height: 100%;position: fixed;width: 100%;z-index: 10000;}
#name {
    animation: name 4s infinite;
    text-transform: capitalize;
    margin-bottom: 5px;
    font-size: 50px;
    padding: 0 10px;
    font-family: 'Teko', sans-serif;
}

.qtext{
  font-size: 15pt;
  padding:5px;
  font-family: 'Merienda', cursive;
  color: #ffd897;
}
.click{
  position: absolute;
  left:0;
  top:-65px;
}
footer{
  background: url('../images/bg-pattern.png') repeat scroll left top #600119;
  box-shadow: inset 0 17px 61px 0 rgba(206,136,24,.24);
  position: fixed;
  z-index: 1000;
  left:0;
  bottom:0;
  padding: 2px;
  padding-bottom: 1px;
  height: 60px;
  width: 100%;
  padding-top: 10px;
}
button.btn{
  margin: 0 !important;
}
.header-slogan {
    font-size: 22pt;
    padding: 5px;
    font-family: 'Merienda', cursive;
    color: #2fc107;
    font-weight: bold;
}
a.btn:hover{
  /*CSS transitions*/
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    /*CSS transforms*/
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    /*CSS animations*/
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
}

.left-scroll{
  position: fixed;
  left: 0;
  top:0;
  min-height: 100%;
  min-width: 34px;
  background: #000 url('../images/scroll-img.png') repeat 0 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  font-family: 'Roboto', sans-serif;
  -webkit-animation: 10s linear 0s normal none infinite loop-top;
  -moz-animation: 10s linear 0s normal none infinite loop-top;
  -ms-animation: 10s linear 0s normal none infinite loop-top;
  -o-animation: 10s linear 0s normal none infinite loop-top;
  animation: 10s linear 0s normal none infinite loop-top; 
}
.right-scroll{
  position: fixed;
  right: 0;
  top:0;
  min-height: 100%;
  min-width: 34px;
  background: #000 url('../images/scroll-img.png') repeat 0 0;
  font-family: 'Roboto', sans-serif;
  -webkit-animation: 10s linear 0s normal none infinite loop-bottom;
  -moz-animation: 10s linear 0s normal none infinite loop-bottom;
  -ms-animation: 10s linear 0s normal none infinite loop-bottom;
  -o-animation: 10s linear 0s normal none infinite loop-bottom;
  animation: 10s linear 0s normal none infinite loop-bottom; 
}
/*-------------------------------
    Animations
---------------------------------*/
@-webkit-keyframes loop-top {
    from {background-position:100% 100%;}
    to {background-position: 0 0;}
  }
  
  @-moz-keyframes loop-top {
    from {background-position:100% 100%;}
    to {background-position: 0 0;}
  }
  
  @-ms-keyframes loop-top {
    from {background-position:100% 100%;}
    to {background-position: 0 0;}
  }
  
  @-o-keyframes loop-top {
    from {background-position:100% 100%;}
    to {background-position: 0 0;}
  }
  
  @keyframes loop-top {
    from {background-position:100% 100%;}
    to {background-position: 0 0;}
  }

/*************************************************/

  @-webkit-keyframes loop-bottom {
    from {background-position:0 0;}
    to {background-position: 100% 100%;}
  }
  
  @-moz-keyframes loop-bottom {
    from {background-position:0 0;}
    to {background-position: 100% 100%;}
  }
  
  @-ms-keyframes loop-bottom {
    from {background-position:0 0;}
    to {background-position: 100% 100%;}
  }
  
  @-o-keyframes loop-bottom {
    from {background-position:0 0;}
    to {background-position: 100% 100%;}
  }
  
  @keyframes loop-bottom {
    from {background-position:0 0;}
    to {background-position: 100% 100%;}
  }
/*-------------------------------
    End of Animations
---------------------------------*/
#audioPlay{
  display: none;
}

#demo{color: #000;font-size: 20px;font-weight: bold;}
	i{color:red;font-style: inherit;}
	p{margin-bottom:0px!important;}
	marquee{    font-size: 22px;
    color: #00FFCF;
	font-weight: bold;
}

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


.form-control-sm {
    height: calc(1.8125rem + 2px);
    padding: .25rem .5rem;
    line-height: 1.5;
    border-radius: .2rem;
    font-size: 15px;
    font-weight: bold;
    background: yellow;
    color: black;
}
.btn.btn-sm {
    padding: 4px 7px;
    font-size: 15px;
    font-weight: bold;
    width: 100%;
    background: red;
}
@keyframes firework {
  0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
  50% { width: 0.5vmin; opacity: 1; }
  100% { width: var(--finalSize); opacity: 0; }
}

/* @keyframes fireworkPseudo {
  0% { transform: translate(-50%, -50%); width: var(--initialSize); opacity: 1; }
  50% { width: 0.5vmin; opacity: 1; }
  100% { width: var(--finalSize); opacity: 0; }
}
 */
.firework,
.firework::before,
.firework::after
{
  --initialSize: 0.5vmin;
  --finalSize: 45vmin;
  --particleSize: 0.2vmin;
  --color1: yellow;
  --color2: khaki;
  --color3: white;
  --color4: lime;
  --color5: gold;
  --color6: mediumseagreen;
  --y: -30vmin;
  --x: -50%;
  --initialY: 60vmin;
  content: "";
  animation: firework 2s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, var(--y));
  width: var(--initialSize);
  aspect-ratio: 1;
  background: 
    /*
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
    */
    
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
    
    /* bottom right */
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
    
    /* bottom left */
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
    
    /* top left */
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
    
    /* top right */
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
    ;
  background-size: var(--initialSize) var(--initialSize);
  background-repeat: no-repeat;
}

.firework::before {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
/*   transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
  transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
/*   animation: fireworkPseudo 2s infinite; */
}

.firework::after {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
/*   transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
  transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
/*   animation: fireworkPseudo 2s infinite; */
}

.firework:nth-child(2) {
  --x: 30vmin;
}

.firework:nth-child(2),
.firework:nth-child(2)::before,
.firework:nth-child(2)::after {
  --color1: pink;
  --color2: violet;
  --color3: fuchsia;
  --color4: orchid;
  --color5: plum;
  --color6: lavender;  
  --finalSize: 40vmin;
  left: 30%;
  top: 60%;
  animation-delay: -0.25s;
}

.firework:nth-child(3) {
  --x: -30vmin;
  --y: -50vmin;
}

.firework:nth-child(3),
.firework:nth-child(3)::before,
.firework:nth-child(3)::after {
  --color1: cyan;
  --color2: lightcyan;
  --color3: lightblue;
  --color4: PaleTurquoise;
  --color5: SkyBlue;
  --color6: lavender;
  --finalSize: 35vmin;
  left: 70%;
  top: 60%;
  animation-delay: -0.4s;
}