@import url(https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Lobster&family=Orbitron&family=Kalam:wght@300);


.noselect {
  -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; 
}

p{
	margin-top: 2px;
	margin-bottom: 3px;
}
.myclass{
	padding: 1px;
	margin: auto;
}
.marquee {
  position: fixed;
  height: 100%;
  left: 1px;
  max-width: 80%;
 }
.marquee img{
  height: 60px;
  width: 60px;
}
.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 8s linear infinite;
}

@keyframes marquee {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.marqueea {
	max-width: 80%;
  position: fixed;
  height: 100%;
  right:60px;
}
.marquee img{
  height: 60px;
  width: 60px;
}
.track1 {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marqueea 8s linear infinite;
}

@keyframes marqueea {
  from { transform: translateY(-50%); }
  to { transform: translateY(0%); }
}


body {
	display: block;
	margin-top: -15px!important;
	font:400 1.1em 'Orbitron', 'Kalam', sans-serif;
	background-image : url("../assets/bg1.gif")!important;
	background-position: center;
	height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
	background-attachment: fixed;
	color:#623a0e;
	padding: 1em;
}
.container {
	background: rgba(25, 29, 41, 0.95);
	max-width: 500px;
  margin: auto;
	padding: 1em;

}

.subcontainer {
    max-width:500px;
    margin: auto;
    text-align: center;
    position: relative;
    padding: 1em;
	background:transparent;
    margin-bottom: 0px;
	border:  2px solid  rgba(111,111,111, 0.6);
}

figure {

  animation:wobble 4s ease-in-out infinite;
  transform-origin:center center;
  transform-style:preserve-3d;
  margin: 5px;
}

figure .naming{
  margin: 1px!important;
}

@keyframes wobble {
  0%,100%{ transform:rotate3d(1,1,0,20deg); }
  25%{ transform:rotate3d(-1,1,0,20deg); }
  50%{ transform:rotate3d(-1,-1,0,20deg); }
  75%{ transform:rotate3d(1,-1,0,20deg); }
}

@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; }
}

h1 {
  display:block;
  line-height:1;

  background:#e2a428;
  color:#010;
  letter-spacing: 3.5px;
  font-size:1.5em;
  padding:0.5em;
     	border-radius: 4px;

}

h2 {
  display:block;
  font-size:1.6em;
}

#grad {
    background: red;
    background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
    background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
    background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.3em;
}
.grad{
  animation: bounce 5s infinite;
}

h3 {

  display:inline;
  line-height:2;
  font-size:1.8em;
  letter-spacing:0.1em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 0.4px;
  -webkit-text-stroke-color: #f2c739;
  text-shadow: 
						2px 2px #ff1f8f,
						6px 6px #000000;


}

.myanim{
    animation:pulse 0.5s ease-in-out infinite;

}
.aid {
	background:transparent;
	border-radius: 4px;
	font-size:0.8em;
	margin: 2px 0;
}


.aid .far {
	color:#f2c739;
	font-size: 3.5em;
	padding:10px;
	background: transparent;
	border-radius: 4px;
}



.aid_msg {
	background:#fff;
	padding: 1em;
	font-size:1.1em;
	text-align: center;
	border-radius: 4px;
}

.aid_msg i {
	padding: 1em;
	font-size:0.8em;
	display: block;
	color: #e2a428;
}






#aidtime {
	color: #ffffff;
	font-family: algerian;
	font-size: 35px;

  animation: glow 1s infinite;

}

#aidsaid {
text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
   	font-family: kalam;
	font-size: 45px;
	/* Chrome, Safari, Opera */
  -webkit-animation: rainbow 1s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 1s infinite;
  
  /* Standar Syntax */
  animation: rainbow 1s infinite; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
   0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
    0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}



b {
	color: #ebb731;
		font-size:0.7em;
		font-family: kalam;
}

.quote {
		background-image: url(../assets/Snam.gif)!important;
		padding: 10px;
}

.quote p {
  font-size: 1.8em;
  color: yellowgreen;
      animation: shake 10s infinite;

}

.name_input{
	    animation:pulse 2s ease-in-out infinite;

}
.name_input .chat {
	color:#4fce5d;
	font-size: 3.5em;
	padding:10px;
	border-radius: 4px;
}

.shareb {
	padding: 10px;
	margin:10px;
	   	border-radius: 4px;
}

.shareb a {
	text-decoration:none;
	color: #fff;
	font-size: 0.8em;
}

.shareb i{
	padding:0 0.2em;
	font-size: 1em;
	font-weight:normal;
}

.shareb:hover {
	opacity: 0.8;
}

.whatsapp {
	background: #49af0b;
}

.facebook {
	background: #3b5998 ;
}





.name_input input[type=name] {
	background-color: #fdfce6;
	color: #333;
   	border-radius: 8px;
	border: none;
	padding: 5px;
	margin: 10px;
	height: 30px;
	width: 80%;
	text-align: center;
	font-size: 22px;
	display: inline-block;
	font:600 1em 'kalam', sans-serif;
	border: 2px #dfdab9 solid;
}

.name_input .btn {
	border-radius: 8px;
	padding: 5px;
	height: 40px;
	width: 30%;
	color: #fff;
	background-color: #49af0b;
	border: 2px #3d9707 solid;
	cursor: pointer;
	font:600 0.9em 'kalam', sans-serif;
	transition: .2s ease-out;
	animation-duration: 4s !important;
        cursor: pointer;
        vertical-align: middle;

}

.name_input .btn i {
	color: #fff;
	padding:5px;
}


.naming2{
	font-family: 'do hyeon';
	font-weight: 100;
	padding: 4px;
	margin: 2px;
	text-transform: uppercase;
}

.footer{
    align-content: center!important;
    color: #fff;
    font-family: 'lobster';
    margin-bottom: -20px;
    margin margin-top: -20px;
    animation: flipOutX 2s infinite;
}

.footer a:link {
  color: white;
}
.footer a:visited {
  color: green;
}
.footer a:hover {
  color: red;
}

.footer a:active {
  color: yellow;
}