<!-- start Simple Custom CSS and JS -->
<style type="text/css">
<style>

.accordion {
  color: orange;
  cursor: pointer;
  padding: 0px;
  width: 100%;
  border: 0px;
  transition: 1s;
}
.Crott{
    font-family: monospace;
    text-align: left ;   
    }
.accordion-button:not{
  color: inherit;
  background-color: none;
            }
.accordion-button::after {
   height: 0;
            }
.Crott {
  display: none;
  background-color: white;
  overflow: hidden;
}

.light:hover {
  background-color: #FFFF00;
  color: #050801;
  box-shadow: 0 0 5px #FFFF00,
              0 0 25px #FFFF00,
              0 0 50px #FFFF00,
              0 0 200px #FFFF00;
}
.accordion {
  position: relative;
  padding: 10px;
  color: #FFFF00;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 1px;
  cursor: pointer;
  overflow: hidden;
}
.light:hover {
  background-color: #FFFF00;
  color: #ffffff;
  box-shadow: 0 0 5px #FFFF00,
              0 0 25px #FFFF00,
              0 0 50px #FFFF00,
              0 0 200px #FFFF00;
}
.accordion div {
  position: absolute;
}
.accordion div:nth-child(1){
  width: 100%;
  height: 2px;
  top: 0;
  left: -100%;
  background: linear-gradient(to right,transparent,#FFA500);
  animation: animate1 1s linear infinite;
}
.accordion div:nth-child(2){
  width: 2px;
  height: 100%;
  top: -100%;
  right: 0;
  background: linear-gradient(to bottom,transparent,#FFFF00);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
.accordion div:nth-child(3){
  width: 100%;
  height: 2px;
  bottom: 0;
  right: -100%;
  background: linear-gradient(to left,transparent,#FFFF00);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
.accordion div:nth-child(4){
  width: 2px;
  height: 100%;
  bottom: -100%;
  left: 0;
  background: linear-gradient(to top,transparent,#00FFFF);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
}
}

</style></style>
<!-- end Simple Custom CSS and JS -->
