/**button gloe**/
.btn-custom{
  border-radius:10px;
  outline: none;
  border: seashell;
  size: 30px;
  background: transparent;
  box-shadow: 0 0 15px #39ff10;
  cursor:pointer;
  font-size: medium;
}
.font-large{
  margin: 25px;
   font-size: 300%;
   background: linear-gradient(to right,yellow,aqua);
   background-clip: text;
   color: transparent;
}

.a1{
  text-decoration: none;
}
.a1:active{
  text-decoration:solid underline #383838;
}


.btn-custom:active{
     box-shadow: none;      
}
.input-box{
  width: 50px;
  
}
.input-box1{
  
width: 25px;
}

/*bordering*/
.table-border{
  box-shadow: 0 0 15px #383838;
}

.table-align td{
	width:50%;
}

.table-border1{
  box-shadow: 0 0 5px #fdfafa;
}



/**btn toggle**/
.btn-toggle{
  border-radius: 12px;
  border:none;

}
#attend_per,#attend_tot{
  font-size: larger;
  font-weight: bolder;
  text-align: center;
  color: aqua;
}

/**sample tesing**/

#practicall{
  position: relative;
   display: none;
}

/*sample test*/
  #result{
    border: solid ;
    border-image-source: linear-gradient(to right,red,blue);
    border-width: 2px;
    border-image-slice: 1;
    
  }



#togglers{
    position: relative;
    height: 100px;
    width: 100px;
     background-color:  indigo;
      display:none;
}
#ball{
  content: '';
  position: relative;
  height: 100px;
  width:200px;
  background-image: linear-gradient(to bottom right, blue,darkviolet);
  border-radius: 100px;
 margin-top: 5px;
 padding-left: 20px;
  color: #39ff10;
  
}

#ball::after{
  content: '';
  position: absolute;
  right: 0px;
  height: 100px;
  width: 100px;
  background-image:url(pics/theory.png) ;
  background-position: center ;
  background-size: contain;
  border-radius: 100px;
  transition: 1s ;
}

#togglers:checked + #ball::after{
  transform: translateX(-100px);
  transition: transform 1s;
  background-image: url(pics/practical.webp);
  background-position: center;
  background-size: contain;  
}


#p{

  position: relative;
  top: 35px;
   left: 10px ;
   color:yellow;
   font-weight :bolder;
   font-size: large;
}
#t{
   
  position: relative;
  top: 35px;
  right: 25px;
   font-weight: bolder;
   color: #39ff10;
   font-size: large;
   
}

#canges{
  position: relative;
  overflow: hidden;
  font-size: medium;
}

#canges:before{
  content: '';
  position:absolute;
  font-size: medium;
  width: 100%;
  height: 30px;
  background-color:black;
  animation: ani 4s alternate-reverse steps(12) infinite;
  border-left: solid white;

}
@keyframes ani{
  10%{
      left: 0px;
  }
  60%{
    left: 50%;
  }

  100%{
    left:100px;
  }
}

.actual0{
  background-image: linear-gradient(to bottom right ,rgb(8, 33, 255),darkviolet);
}
.about{
  background:linear-gradient(to right top,aqua,darkviolet);
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
  width: auto;
}
.about i{
  font-size:10rem
}
.about p{
  font-size: large;
  font-weight: bolder;
  font-style: normal;

}
/* form  attributes and form styling */