.body{
width: 100%;
background: linear-gradient(-45deg, #00a99d, #666666, #FFA751, #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,#00a99d,#FFA751);
color: #fff;    
}
.kodebtn{
background: #00a99d;
}
.icon_btns{
background: #FFA751;
}    
.search_color{
width: 80%;
height: 50px;
border: none;
outline: none;
border: none;
border-left: 2px solid #edf2f7;
background: #f9f9f9;
color: #000000;
border-radius: 0;
padding-left: 5%;
padding-right: 5%;
font-family: monospace;
}
.go_btn{
width: 40px;
height: 49px;
border-right: none;
border: none;
outline: none;
border-left: 0;
background: #edf2f7;
color: #000000;
cursor: pointer;
font-family: monospace;
text-transform: uppercase;
}
#colorShades {
width: 100%;
margin-top: 20px;
display: inline-block;
flex-wrap:nowrap;
justify-content:center;
}
.colorRow {
display: inline-block;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.colorBox{
width: 100px;
height: 100px;
font-family: monospace;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}    
.colorCode {
margin-top: 10px;
font-size: 12px;
}
.copyButton{
width: auto;
height: 25px;
padding-left: 5%;
padding-right: 5%;
position: absolute;
top: 5px;
right: 5px;
font-size: 11px;
font-family: monospace;
cursor: pointer;
border: 1px solid #333;
outline: none;
background: #252526;
color: #ffffff;
opacity: 0;
transition: opacity 0.2s;
}
.colorBox:hover .copyButton {
opacity: 1;
}
.margin_auto{
margin: auto;
}
.element{
color: #777;
font-family:'Poppins','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: left;
margin-top: 20px;
}
.colorvalue{
-webkit-appearance: none;
appearance: none;
width:50px;
height:50px;
outline: none;
border: none;
border-radius: 5px;
background: #ffffff;
margin-left:6%;
}  
::-webkit-color-swatch {
outline: none;
border: none;
background: #ffffff;
border-radius: 5px;
}
.convert_box{
width: 88%;
height:auto;
border: 1px solid #f1f1f1;
background: #ffffff;
margin: auto;
padding: 1%;
overflow-y: hidden;
}    
#col_value_txt{
margin-top: 15px;
margin-left: 10px;
color: #000000;
}
.coltit{
text-transform: uppercase;
font-family: monospace;
color: #d1d1d1;
font-size: 1em;
}
.randomize_btn{
width: 100%;
height: 50px;
border: none;
outline: none;
background: #edf2f7;
color: #000000;
font-family: 'Poppins',monospace, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
float: right;
font-size: 1em;
cursor: pointer;
}
.randomize_btn:hover{
background: #FFA751;
color: #ffffff;
}
.bar-bar{
height: 50px;
border-left: 2px solid #edf2f7;
}