/* Styles go here */

.animate-show {
  -webkit-transition:max-height ease-out 1s;
  transition:max-height ease-out 1s;
  
  padding-top: 30px;
  background:white;
  
  
  
  /* This is a wild guess of the height of the element
     Needs to be in the ballpark of the actual content height,
     but slightly larger.
     Change to, e.g., 30px and 300px to see what happens */
  max-height: 1000px;
}

.animate-show.ng-hide {
  /* Animate max height*/
  max-height: 0;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove{
  /* Needed to override display:none which cannot be animated */
  display:block!important;
  overflow-y: hidden;
}

/**
 * To demonstrate which classes are added and when
 */
#MyPersonnalCode {
  scroll-behavior: smooth;
}

/*Scroll To Top*/
#myBtn {

  position:fixed;
  bottom: 5%;
  right: 3%;
  width: 4rem;
  height: 4rem;
  border-radius: 4rem;
  padding: 0;
  visibility: hidden;
  overflow: hidden;
  z-index: 1;
}

#myBtn:hover {
  background-color: #1569C7;
}

.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }

#footer {
  z-index: -1;
}