.body{
width: 100%;
background: linear-gradient(-45deg, #B8860B, #666666, #2E3192, #777);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% { 
background-position: 100% 50%; 
} 
100% { 
background-position: 0% 50%;  
}
}   
div *::selection{
background:#523f86;
color: #ffffff;
}  
.getanibtn{
background: linear-gradient(-45deg,#B8860B,#2E3192);
color: #fff;    
}
.kodebtn{
background: #B8860B;
}
.icon_btns{
background: #2E3192;
}        
.convert_box{
width: 90%;
height:auto;
border-radius: 5px;
border: 1px solid #f1f1f1;
background-color: #ffffff;
margin: auto;
padding: 4%;
padding-bottom: 5%;
}
.margin_auto{
margin: auto;
}
.element{
text-transform: uppercase;
color: #000000;
font-family:'Poppins','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 3%;
}
.colorvalue{
-webkit-appearance: none;
appearance: none;
width:90%;
height:53px;
outline: none;
background: #ffffff;
}  
.change_size{
width: 60%;
}
.coltit2{
color: #ffffff;
font-family: monospace;
text-align: center;
margin-left: 0;
}
.mt-1-per{
margin-top: 1%;
}

#demobtn{
width: 50%;
height: 50px;
outline: none;
border:2px solid #b8860b;
color: #ffffff;
border-radius: 5px;
background: #2E3192;    
font-family: 'Poppins';
font-size: 1.1em;
margin-top: 10px;
}
#demobtn2{
width:100px;
height:100px;
outline: none;
border:2px solid #b8860b;
color: #ffffff;
border-radius: 20px;
background: #2E3192;    
font-family: 'Poppins';
font-size: 1.1em;
margin-top: 10px;
}
#demobtn3{
width: 100px;
height: 100px;
outline: none;
border:2px solid #b8860b;
color: #ffffff;
border-radius: 50%;
background: #2E3192;    
font-family: 'Poppins';
font-size: 1.1em;
margin-top: 10px;
}
#demobox{
width:70%;
height: 150px;
outline: none;
border: 2px solid #b8860b;
color: #ffffff;
background: #2E3192;
border-radius: 5px;
font-family: 'Poppins';
font-size: 1em;
margin-top: 10px;
}
#demobox2{
width:70%;
height: 150px;
outline: none;
border: 2px solid #b8860b;
color: #ffffff;
background: #2E3192;    
border-radius: 30px;
font-family: 'Poppins';
font-size: 1em;
margin-top: 10px;
}
#demobox3{
width:70%;
height: 150px;
outline: none;
border: 2px solid #b8860b;
color: #ffffff;
background: #2E3192;    
border-radius: 50%;
font-family: 'Poppins';
font-size: 1em;
margin-top: 10px;
}
#demosearchbar{
width:70%;
height: 45px;
outline: none;
border:2px solid #b8860b;
color: #ffffff;
background: #2E3192; 
border-radius: 5px;
font-family: verdana;
font-size: 1em;  
margin-top: 10px;  
}
#demosearchbar2{
width:70%;
height: 45px;
outline: none;
border:2px solid #b8860b;
color: #ffffff;
background: #2E3192;
border-radius: 50px;
font-family: verdana;
font-size: 1em; 
padding: 2%;
margin-top: 10px;
}
#searchbtn{
width: 20%;
height: 45px;
border: 2px solid #b8860b;
background: #2E3192;
color: #ffffff;
outline: none;
border-radius: 5px;
}
#searchbtn2{
width: 13%;
height: 45px;
border: 2px solid #b8860b;
background: #2E3192; 
color: #ffffff;
outline: none;
border-radius: 50px;
}
#demotextarea{
width:70%;
height: 100px;
outline: none;
border:2px solid #b8860b;
background: #2E3192;
color: #ffffff;
border-radius: 5px;
font-family: verdana;
font-size: 1em;
margin-top: 10px;        
}
#demotextarea2{
width:70%;
height: 100px;
outline: none;
border:2px solid #b8860b;
background: #2E3192;
color: #ffffff;
border-radius: 50px;
font-family: verdana;
font-size: 1em;
padding: 5%;
margin-top: 10px;
}
#demotextarea3{
width:70%;
height: 100px;
outline: none;
border:2px solid #b8860b;
background: #2E3192;
color: #ffffff;
border-radius: 5px;
font-family: verdana;
font-size: 1em;  
margin-top: 10px;      
}
#demoimage{
width: 120px;
height: 120px;
border:3px solid #b8860b;    
border-radius: 5px;
margin-top: 10px;
}
#demoimage2{
width: 120px;
height: 120px;
border:3px solid #b8860b;    
border-radius: 50px;
margin-top: 10px;
}
#demoimage3{
width: 120px;
height: 120px;
border:3px solid #b8860b;    
border-radius: 55%;
margin-top: 10px;
}
#demotable{
width: 90%;
margin-top: 10px;
}
#demotable th, #demotable td{
border: 1px solid #b8860b;
background: #2E3192;
color: #ffffff;
border-collapse: collapse;
padding: 3%;
text-align: center;
}
#demotable2{
width: 90%;
border-collapse: collapse;
margin-top: 10px;
}
#demotable2 th, #demotable2 td{
border: 1px solid #b8860b;
background: #2E3192;
border-radius: 20px;
color: #ffffff;
border-collapse: collapse;
padding: 3%;
text-align: center;
}
.demoicon{
width: 60px;
height: 60px;
border: 2px solid #b8860b;
background: #2E3192;
color: #ffffff;
outline: none;
border-radius: 10px;
font-size: 1.6em;
margin-top: 10px;
}
.demoicon2{
width: 60px;
height: 60px;
border: 2px solid #b8860b;
background: #2E3192;
color: #ffffff;
outline: none;
border-radius:50%;
font-size: 1.6em;
margin-top: 10px;
}
#demoform{
width: 90%;
height: auto;
padding: 3%;
background: #2E3192;
color: #ffffff;
border-radius: 5px;
margin-top: 10px;
}
.demotext,.demopassword{
width: 80%;
height: 40px;
border: 1px solid #b8860b;
outline: none;
margin-top: 10px;
border-radius: 5px;
background: #2E3192;
color: #ffffff;
}
.demosubmit{
width: 50%;
height: 40px;
border: 1px solid #b8860b;
margin-top: 10px;
color: #ffffff;
border-radius: 5px;
background: #2E3192;
color: #ffffff;
}
#demoform2{
width: 90%;
height: auto;
padding: 3%;
background: #2E3192;
color: #ffffff;
border-radius: 50px;
border: 2px solid #b8860b;
margin-top: 10px;
}
.demotext2,.demopassword2{
width: 80%;
height: 40px;
border: 1px solid #b8860b;
outline: none;
margin-top: 10px;
border-radius: 50px;
padding: 2%;
background: #2E3192; 
color: #ffffff;
}
.demosubmit2{
width: 50%;
height: 40px;
border: 1px solid #b8860b;
margin-top: 10px;
border-radius: 50px;
background: #2E3192; 
color: #ffffff;
}
#demoheader{
width: 100%;
height: 60px;
background: #2E3192;
color: #ffffff;
margin-top: 10px;
}
#demoprogressbar {
width:90%;
height:20px;
background:#000000;
margin-top: 10px;
}
#progress{
width:30%;
height:20px;
background:#2E3192;
color: #ffffff;
text-align:center;
}
#demoprogressbar2 {
width:90%;
height:20px;
background:#000000;
border-radius: 50px;
margin-top: 10px;    
}
#progress2{
width:30%;
height:20px;
background:#2E3192;
color: #ffffff;
text-align:center;
border-radius: 50px;    
}
#demomenubar{
width:70%;
height:60px;
overflow-x:hidden;
border:1px solid #b8860b;
margin:auto;
border-radius: 5px;
background: #2E3192;
color: #ffffff;
padding: 2%;    
outline: none;    
text-align:center;
margin-top: 10px;
}
#demomenubar2{
width:70%;
height:60px;
overflow-x:hidden;
border:1px solid #b8860b;
margin:auto;
border-radius: 50px;
background: #2E3192;
color: #ffffff;
padding: 2%; 
outline: none;    
text-align:center;
margin-top: 10px;
}
/*card*/
.democard{
width: 250px;
height: 350px;
background:#ffffff;
color: #ffffff;
border-radius: 10px;
border: 2px solid #b8860b;
margin-top: 10px;
}
#demoboxcard{
width: 245px;
height:120px;
background:#2E3192;
color: #ffffff;
border-radius: 10px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.demoimgcard{
width: 70px;
height: 70px;
border-radius: 50%;
margin-top: 80px;
border: 4px solid #b8860b;
}
.demopcard{
font-family: verdana;
font-size: 1em;
color: #000000;
margin-top: 30px;
}
.demospancard{
font-family: verdana;
word-spacing: 20px;
font-size: 0.7em;
color: #000000;
}
#demofcard1,#demofcard2,#demofcard3{
width: 50px;
height: 40px;
border: none;
outline: none;
font-family: verdana;
border-radius: 10px;
margin-top: 40px;
background:#2E3192;
color: #ffffff;
}
/*end*/
.democard2{
width: 250px;
height: 350px;
background:#ffffff;
color: #ffffff;
border-radius: 50px;
border: 2px solid #b8860b;
margin-top: 10px;
}
#demoboxcard2{
width: 245px;
height:120px;
background:#2E3192;
color: #ffffff;
border-radius: 50px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.demoimgcard2{
width: 70px;
height: 70px;
border-radius: 50%;
margin-top: 80px;
border: 4px solid #b8860b;
}
.demopcard2{
font-family: verdana;
font-size: 1em;
color: #000000;
margin-top: 30px;
}
.demospancard2{
font-family: verdana;
word-spacing: 20px;
font-size: 0.7em;
color: #000000;
}
#demofcard12,#demofcard22,#demofcard32{
width: 40px;
height: 40px;
border: none;
outline: none;
font-family: verdana;
border-radius:50%;
margin-top: 40px;
background:#2E3192;
color: #ffffff;
}
.new_box{
height: 500px;
background: #2E3192;
border: 2px solid #b8860b;
color: #ffffff;
} 
#codeValue,#codeValue2,#codeValue3{
width: 100%;
height: 60px;
border: 1px solid #f1f1f1;
margin: auto;
overflow-x: hidden;
font-family: monospace;
font-size: 1em;
padding-left: 3%;
resize: none;
outline: none;
cursor:pointer;
background: #ffffff;
color: #000000;
border-radius: 5px;
}