.project-container{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.single-project{all:unset;height:20rem;width:20rem;box-shadow:#00000059 0 5px 15px;background-color:var(--primary-color);position:relative}.project-title{padding:.2rem;display:flex;justify-content:center;margin-left:auto;margin-right:auto;font-family:Stick No Bills,sans-serif}.project-images{height:17.3rem;width:100%;object-fit:cover;font-family:Playfair Display SC,serif}.project-images-hover{position:absolute;top:0;left:0;height:100%;z-index:1;transition:all .3s ease-in-out}.image-overlay{position:absolute;top:0;left:0;height:100%;width:100%;z-index:2;background-color:#000000d4}.hover-project-state{display:flex;justify-content:space-around}.hidden-project-state{display:none}.project-icons{font-size:6rem;margin:0rem auto;z-index:3}.icon-link{text-decoration:none;color:var(--secondary-color)}.icon-link:hover{color:var(--word-color);transition-duration:.3s}.portfolio-buttons-container{margin-bottom:4rem;display:flex;flex-wrap:wrap;justify-content:center}.portfolio-buttons{width:10rem;height:3rem;border:none;outline:none;color:var(--word-color);background:var(--primary-color);cursor:pointer;position:relative;z-index:0;border-radius:10px;box-shadow:var(--secondary-color) 0 5px 15px;text-transform:uppercase;letter-spacing:.1em;font-family:Stick No Bills,sans-serif;font-weight:600;margin:1rem;font-size:1.2rem}.portfolio-buttons:before{content:"";background:linear-gradient(45deg,var(--secondary-color),var(--word-color),var(--secondary-color),var(--word-color),var(--secondary-color),var(--word-color));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}.portfolio-buttons:active{color:var(--primary-color)}.portfolio-buttons:active:after{background:transparent}.portfolio-buttons:hover:before{opacity:1}.portfolio-buttons:after{z-index:-1;content:"";position:absolute;width:100%;height:100%;background:var(--primary-color);left:0;top:0;border-radius:10px}@keyframes glowing{0%{background-position:0 0}50%{background-position:400% 0}to{background-position:0 0}}@media screen and (max-width: 1023px){.portfolio-buttons{width:14rem}}@media screen and (max-width: 576px){.portfolio-buttons{width:8rem;font-size:1rem}}#portfolio-page{flex-direction:column;align-items:center;width:90%;margin:auto}@media screen and (max-width: 576px){#portfolio-page{width:95%}}