*{
  margin:0;
  padding:0;
  box-sizing :border-box;
}
#ONE{
  background-image: radial-gradient(circle, rgb(92, 53, 53), rgb(31, 40, 160), rgb(190, 211, 190));
  background-size: 250%;
  text-align: center;
  font-family:'roboto';
  font-weight:bold;
  border-radius: 20px 5px;
  margin: 3px 3px 0px;
  cursor:default;
  animation: circular-gradient 15s infinite alternate;
}
@keyframes circular-gradient {
 0%{
   background-position: 0%;
 }
 50%{
   background-position:100% 50%;
 }
 100%{
   background-position:0%;
 }
}
#d1{
  color: white;
  font-size: 2.7rem;
  padding-top: 1px;
  background: linear-gradient(35deg, #e6df6b, #d63939);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

#d2{
  color:white;
  font-size: 2.56rem;
  background: conic-gradient(
    #CA4246 5.666%, 
    #E16541 19.666%, 
    #E16541 10.333%, 
    #F18F43 25.333%, 
    #F18F43 50%, 
    #8B9862 50%, 
    #8B9862 66.666%, 
    #476098 66.666%, 
    #ccd0d8 83.333%, 
    #A7489B 83.333%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent; 
}
#rgb{
  font-size: 25px ;
  margin-top: 7px;
  margin-bottom: 5px;
  background-color:#fff;
  padding:0.9%;
  color : black;
  border-radius: 2rem;
  box-shadow : rgba(0,0,0,0.35) 0px 5px 15px;
  width : 28vw;
  margin-left: 35.5vw;
  
}
#TWO{
  background-color: white;
  height: 45px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 23px;
  font-weight: bold;
}
#new{
  cursor: pointer;
  color:red;
  transform: scale(1);
}
#new:hover{
  cursor: pointer;
  transition:0.3s ease-in;
  transform:scale(1.1) ;
  color: black;
}
#new:active{
  transform:scale(0.9);
  transition : 0.3s ease-out;
  color:yellowgreen;
}
#try{
  display: flex;
  justify-content: space-between;
  color: #79482cde;
  cursor: default;
  margin-left: 3%;
}
#new1{
  display: flex;
  justify-content: space-between;
}
.easy{
  margin-right: 25px;
  color :#3D24FF ;
  font-size: 22px;
  font-weight: bold;
  border: none;
  display: inline-block;
  background: transparent ;
}
.easy:hover{
  cursor: pointer;
  transition:0.3s ease-in;
  transform:scale(1.05) ;
  color: black;
}
.easy:active{
  transform:scale(0.9);
  transition : 0.3s ease-out;
  color:yellowgreen;
}
#main{
  background-color:#000000da;
  height: 67.6vh  ;
  width: 99.5975% ; 
  display:grid;
  justify-content: center;
  align-content: center;
  grid-template-columns: 200px 200px 200px;
  column-gap:30px ;
  overflow : hidden;
  border-radius: 9px;
  margin: 0px 2.5px 3px;
}
.box{
  height: 125px;
  width:125px;
  border-radius: 12px;
  box-shadow : rgba(224, 214, 214, 0.192) 2px 5px 10px;
  margin: 5vh;
  transform:scale(1) ; 
  transition: 0.37s ease-in-out;
  overflow: hidden;
  
}
.box:hover {
  cursor: pointer;
  transition:0.2s ease-in;
  transform:scale(1.15) ;
  
}
.box:active{
  box-shadow: rgb(16, 63, 192) 5px 9px 9px;
  transform:scale(1);
  transition:0.28s  ;
}