.card__project{position:relative;overflow:hidden;padding:15px;z-index:999;border-radius:6px;transition:.5s;background-color:#2f4159;box-shadow:0 3px 10px -2px rgba(0,0,0,.5)}.card__project:after,.card__project:before{position:absolute;content:"";width:0;height:100%;top:0;transition:.5;z-index:-1}.card__project:hover{transform:translateY(-5px);scale:1.01}.card__project:after{background-color:#92d57636;left:0}.card__project:before{background-color:#35ab8036;right:0}.card__project:hover:after{animation:Fill-in-left .4s ease-in-out forwards}.card__project:hover:before{animation:Fill-in-right .4s ease-in-out forwards}.card__project img{margin:0 0 15px;border-radius:6px}.card__info{margin:0}.tool{font-size:14px;font-weight:300;background-color:var(--darkTeal);padding:3px 5px;border-radius:4px}.btn-live{color:#fff;font-weight:400;transition:.5s;background-image:linear-gradient(270deg,#f6b4d1,#e2a8c9,#ce9dc1,#b992b7,#a587ad,#947ea3,#837499,#726b8e,#606081,#4f5674,#3e4b67,#2f4159)}.btn-live:hover{background-image:linear-gradient(180deg,#f6b4d1,#e2a8c9,#ce9dc1,#b992b7,#a587ad,#947ea3,#837499,#726b8e,#606081,#4f5674,#3e4b67,#2f4159);color:#fff}.btn-github{color:#fff;font-weight:400;transition:.5s;background-image:linear-gradient(270deg,#8b799e,#747ba4,#577da5,#367f9f,#0e7f92,#08798a,#037482,#006e7a,#106376,#1f576f,#294c65,#2f4159)}.btn-github:hover{background-image:linear-gradient(180deg,#8b799e,#747ba4,#577da5,#367f9f,#0e7f92,#08798a,#037482,#006e7a,#106376,#1f576f,#294c65,#2f4159);color:#fff}.project-details h5{font-size:1.5rem;font-weight:800;margin:0;padding:0}.project-details .role{font-size:14px;color:var(--paleYellow);margin:0;padding:0}.project-details .tech{color:#fff;margin-top:.4rem;font-size:13px;position:relative;padding:3px;width:150px}.project-details .tech:after{position:absolute;content:"";width:40%;height:100%;background-color:var(--altColor);border-radius:4px;top:0;left:0;z-index:-1}.project-details .fDate{color:#cecece;font-size:14px;margin:0;padding:0}@keyframes Fill-in-left{0%{width:0;left:0}to{width:50%;left:0}}@keyframes Fill-in-right{0%{width:0;right:0}to{width:50%;right:0}}.projectsPage{min-height:calc(100vh - 90px);padding:var(--secpadding) 0}.sec__heading{margin:0 0 25px}.heading{color:var(--greenishLemonada);font-size:36px;font-weight:700;text-transform:uppercase}.sec__heading p{text-transform:capitalize;font-weight:200}