@import"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;900&display=swap";:root{--primary-color: #ffffff;--secondary-color: #2c2c2c;--accent-light-color: #ffffff;--accent-dark-color: #000000}*{box-sizing:border-box}body{background-color:var(--primary-color);font-family:Roboto,sans-serif;margin:0;overflow:scroll}.root-container{display:flex;flex-direction:column;align-items:center}.page-container{margin:2svh 2svw 2svh 2svw;height:90svh;align-items:center;width:90svw;display:flex;flex-direction:column;align-self:center}.top-container{width:70%;height:5%;align-self:center;margin-bottom:.35svh;min-height:25px}.middle-container{width:70%;height:80%;align-self:center;min-height:480px}.bottom-container{width:70%;height:10%;align-self:center;min-height:25px}.project-description-container{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;width:100%;height:100%}.project-description-container-grid-left{height:100%;border-style:solid;border-top:none;border-bottom:none;border-left:none;border-width:1px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;padding-right:5%;padding-bottom:.5svh;font-size:1.5svw;font-weight:800}.project-description-container-grid-center{height:100%;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;font-size:1svw;padding-bottom:.5svh}.project-description-container-grid-right{height:100%;border-style:solid;border-top:none;border-bottom:none;border-right:none;border-width:1px;display:flex;flex-direction:column;justify-content:flex-end;padding-left:5%;text-align:right;font-size:1svw;padding-bottom:.5svh}.project-description-bottom-container{height:100%;width:100%;border-style:solid;border-width:1px;border-top:none;border-bottom:none;display:flex;flex-direction:column;justify-content:flex-end;font-size:1svw;padding:.5svh .5svw .5svh .5svw}.grid-container-main-page{width:100%;height:100%;display:grid;gap:.5%;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);overflow:hidden}.grid-container-details-page{width:100%;height:100%;display:grid;gap:.5%;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(4,1fr)}.project-card{height:100%;width:100%;border-radius:5px;background-color:var(--secondary-color);position:relative;overflow:hidden;display:flex;justify-content:center;cursor:pointer}.project-card img{opacity:.25;filter:grayscale();width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;transition:2s}.project-card h4{align-self:center;color:var(--accent-light-color)}.project-card:hover img{opacity:1;filter:none;transition:opacity .1s ease}.info-contact-card{height:100%;width:100%;border-radius:5px;background-color:var(--secondary-color);position:relative;overflow:hidden;display:flex;justify-content:center;cursor:pointer}.info-contact-card:hover{background-color:var(--primary-color);border-style:solid;border-width:2px}.info-contact-card h4{align-self:center;color:var(--primary-color);position:absolute;font-size:1.75svh;font-weight:500;opacity:1}.info-contact-card:hover h4{color:var(--secondary-color);font-weight:700}.single-project-img-big{border-radius:5px;width:100%;height:100%;grid-column:span 6;grid-row:span 4}.single-project-img-small{border-radius:5px;background-color:var(--secondary-color);position:relative;overflow:hidden;display:flex;justify-content:center;cursor:pointer}.single-project-img-small img{opacity:.25;filter:grayscale();width:100%;height:100%;object-fit:cover;transition:1s}.single-project-img-small:hover img{opacity:1;filter:none;transition:opacity .1s ease}.modal-overlay{position:fixed;top:0;left:0;width:100svw;height:100svh;background-color:var(--secondary-color)}.modal-content{position:fixed;top:50svh;left:50svw;border-radius:5px;transform:translate(-50%,-50%);height:50%;width:30%;background-color:var(--primary-color);padding:2svh;display:flex;flex-direction:column;justify-content:center}.modal-content h2{font-size:4svh;align-self:center}.modal-content h3{font-size:2svh;font-weight:600;align-self:center}.modal-content h4{font-size:2svh;font-weight:500;align-self:center}.modal-content h5{font-size:1.5svh;font-weight:400;align-self:center;margin:0}.modal-btn{background-color:var(--secondary-color);color:var(--primary-color);width:40%;height:10%;align-self:center;margin-top:3svh;border-radius:5px;font-weight:500;font-family:Roboto,sans-serif;font-size:1.5svh}.icon-back{position:absolute;scale:300%;margin-left:10svw;left:auto;top:50%}.random-quote-container{height:100%;width:100%;border-style:solid;border-width:1px;border-top:none;border-bottom:none;display:flex;flex-direction:column;justify-content:flex-end;font-size:1svw;text-align:center;padding:.5svh .5svw .5svh .5svw}.notfound-container{position:absolute;margin-left:25svw;font-size:5svh;left:auto;top:47.5%}@media (hover: none){.top-container{width:70%;height:5%;align-self:center;margin-bottom:.35svh}.middle-container{width:70%;height:80%;align-self:center}.bottom-container{width:70%;height:10%;align-self:center}.project-card img{opacity:1;width:100%;height:100%;filter:none;aspect-ratio:1/1;object-fit:cover}.grid-container-main-page{width:100%;height:100%;display:grid;gap:.5%;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(6,1fr);overflow:scroll}.grid-container-details-page{width:100%;height:100%;display:grid;gap:.5%;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,1fr);overflow:scroll}.single-project-img-big{border-radius:5px;width:100%;height:100%;grid-column:span 4;grid-row:span 6;object-fit:cover}.single-project-img-big img{width:100%;height:100%;filter:none}.single-project-img-small img{opacity:1;filter:none;width:100%;height:100%;object-fit:cover}.icon-back{position:fixed;scale:300%;margin-left:5px;left:auto;top:50%}@media (orientation: portrait){.modal-content{position:fixed;top:50svh;left:50svw;border-radius:5px;transform:translate(-50%,-50%);height:40%;width:90%;background-color:var(--primary-color);padding:2svh;display:flex;flex-direction:column;justify-content:center}.modal-content h2{font-size:3svh;align-self:center}.modal-content h3{font-size:1.5svh;font-weight:600;align-self:center}.modal-content h4{font-size:1.5svh;font-weight:500;align-self:center}.modal-content h5{font-size:1.5svh;font-weight:400;align-self:center;margin:0}.modal-btn{background-color:var(--secondary-color);color:var(--primary-color);width:40%;height:10%;align-self:center;margin-top:3svh;border-radius:5px;font-weight:500;font-family:Roboto,sans-serif;font-size:1.5svh}}@media (orientation: landscape){.modal-content{position:fixed;top:50svh;left:50svw;border-radius:5px;transform:translate(-50%,-50%);height:60%;width:40%;background-color:var(--primary-color);padding:2svh;display:flex;flex-direction:column;justify-content:center}.modal-content h2{font-size:4svh;align-self:center}.modal-content h3{font-size:2svh;font-weight:400;align-self:center}}}