#projects .contents{display:flex;color:var(--background-color);flex-wrap:wrap;justify-content:space-evenly;align-items:center;margin-top:3%}#projects .contents .product{position:relative;overflow:hidden;border-top-right-radius:10px;border-top-left-radius:10px;border:1px solid var(--text-color);width:100%}#projects .contents .product img{width:100%;max-height:250px;height:100%;transition:all .4s ease-in-out}#projects .contents .product .text{top:0;left:0;opacity:0;width:100%;height:100%;display:flex;color:var(--text-color);position:absolute;align-items:center;justify-content:center;transition:opacity .4s ease-in-out;background-color:rgba(0,0,0,.6)}.projectName{color:var(--text-color);font-size:1.5rem;padding-top:1%;background-color:#252627;width:100%;text-align:center}.productBox{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:1%;border:1px solid var(--themeColor);border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.2);transition:transform .3s ease,box-shadow .3s ease;background-color:rgba(58,57,57,.2);width:30%}.productBox:hover{transform:translateY(-5px);box-shadow:0 8px 16px rgba(0,0,0,.3)}.projectDescription{font-size:1rem;color:var(--text-color);text-align:justify;line-height:1.5;padding:10px 10px 0;border-radius:0 0 10px 10px}#projects .contents .product a{color:var(--text-color);text-decoration:none;border:1px solid #fff;background-color:var(--themeColor);padding:.7% 2%;margin:3%;border-radius:30px;transition:transform .3s ease-in-out;font-weight:400}#projects .contents .product a:hover{transform:scale(1.2)}#projects .contents .product:focus .text,#projects .contents .product:hover .text{opacity:1}#projects .contents .product:focus img,#projects .contents .product:hover img{transform:scale(1.3)}.domainbuttons{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.domainbuttons button{border:0;margin:0 1%;background-color:var(--background-color);color:var(--text-color);border:1px solid var(--themeColor);padding:.2% .6%;border-radius:10px;font-size:1.3rem;transition:transform .3s ease-in-out}.domainbuttons button:hover{transform:scale(1.1);border:1px solid var(--text-color)}.domainbuttons .highlight{background-color:var(--themeColor);color:var(--text-color);border:1px solid var(--text-color)}.technologiesUsed{display:flex;width:100%;flex-wrap:wrap;margin-bottom:1%}.technologiesUsed div{color:#fff;font-size:.9rem;padding:2px 5px;background:transparent;border:1px solid #fff;border-radius:10px;margin:1%}.projectDescription span{font-weight:500;transition:all .3s ease}.projectDescription span:hover{text-decoration:underline}@media only screen and (max-width:1050px){.productBox{width:38%}}@media only screen and (max-width:915px){#projects .contents .product img{max-height:190px}.projectName{font-size:1.3rem}.productBox{width:40%}}@media only screen and (max-width:880px){.productBox{width:45%}}@media only screen and (max-width:600px){#projects .contents{margin-bottom:22%}}@media only screen and (max-width:665px){#projects .contents .product img{max-height:200px}.projectName{font-size:1.2rem}.domainbuttons button{font-size:1.1rem}.productBox{width:80%;margin-top:5%}}@media only screen and (max-width:500px){.domainbuttons button{margin:2%}#projects .contents .product img{max-height:180px}.productBox{width:95%}}