@keyframes bounce {

     0%,
     100% {
          transform: translateY(0);
     }

     50% {
          transform: translateY(20px);
     }
}

@keyframes float {
     0%, 100% {
          transform: translateY(0) translateX(0);
     }
     25% {
          transform: translateY(-8px) translateX(3px);
     }
     50% {
          transform: translateY(-5px) translateX(-3px);
     }
     75% {
          transform: translateY(-10px) translateX(2px);
     }
}
@keyframes load {
     0% { transform: translateY(30px); opacity: 0; }
     100% { transform: translateY(0px); opacity: 1; }
}



.load-in {
     animation: load 0.6s ease both;
}
.floatanim {
     animation: float 5s infinite;
}




.editbar p:hover {
     background-color: rgba(175, 175, 175, 0.126);

}

nav img:hover {
     filter: brightness(1) saturate(100%) opacity(1);
}

.troispoints:hover {
     background-color: rgba(175, 175, 175, 0.126);
     border-radius: 5px;
}
.tab button:hover {
     transform: scale(1.2);
     transition: all 0.2s linear;
}
.projectarb div:hover {
     background-color: rgba(175, 175, 175, 0.126) ;
     width: 100%;
}

.filecontainer p:hover {
     background-color: rgba(80, 80, 80, 0.252);
}


/** active animation for skills in readme  */
.skillname.active {
     border-bottom: 2px var(--accent-color) solid;
     color: var(--accent-color);
     font-weight: 600;
}
.skillname:hover {
     background-color: rgba(128, 128, 128, 0.156);
     border-radius: 5px;
}

.licontainer:hover {
     background-color: rgba(128, 128, 128, 0.292);
     transform: scale(1.1);
     transition: all 0.2s linear;
}



/**Nav animations  */
.filecontainer {
     height: 0px;
     display: none;
}
.filecontainer.active {
     height: auto;
     display: block;
}
.aboutmesec {
     height: 0px;
     display: none;
}
.aboutmesec.active {
     height: auto;
     display: block;
}
.projects {
     height: 0px;
     display: none;
}
.projects.active{
     height: auto;
     display: block;
}
.imgcate {
     height: 0px;
     display: none;
}

.imgcate.active {
     height: auto;
     display: block;
}




/**Nav background for active p  */
.nav-active {
     background-color: rgba(128, 128, 128, 0.292);
};
/** Nav hover*/
.menuexp {
     color: white;
}
.menuexp:hover {
     background-color: rgba(128, 128, 128, 0.292);
}


/** Very left nav animation*/
.navicon {
     margin-left: 0px;
     margin-right: 15px;
     padding-left: 10px;
}
.navicon.active {
     border-left: var(--accent-color) 3px solid;
}