@import "https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap";*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-family:Google Sans Flex,sans-serif;font-size:1.05rem;letter-spacing:.3px!important}body{width:100%;height:max-content;min-height:100vh;position:relative}body::-webkit-scrollbar{background-color:#eaeaea;width:5px}body::-webkit-scrollbar-thumb{background-color:silver;border-radius:99px}#background{z-index:-1;background-color:#f5f5f5;width:100%;height:100vh;position:fixed;top:0;left:0}#background>span{background-color:#0000;width:4px;height:4px;position:absolute}#background>span>span{width:4px;height:4px;position:absolute;left:0}#background>span>span:first-child{background-color:#232323;top:0;box-shadow:0 0 6px .5px #191919f2}#gradient-layer{z-index:150;opacity:0;background:linear-gradient(#f5f5f5 5%,#f5f5f5e6 20% 30%,#f5f5f5cc 40%,#0000 100%);width:100%;height:15vh;transition:all .1s;position:fixed;top:0;left:0;transform:translateY(-100%)}button#scrollback{color:#f5f5f5;opacity:0;z-index:150;background-color:#232323;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.5rem;transition:all .2s;display:flex;position:fixed;bottom:2rem;right:2rem}#app{z-index:1;background-color:#0000;flex-direction:column;gap:2rem;width:100%;max-width:1024px;height:max-content;min-height:100vh;margin:auto;display:flex;position:relative}main{grid-template-rows:61.8047% 1fr;grid-template-columns:1fr;gap:2rem;width:100%;height:100vh;display:grid}main .content{flex-direction:column;justify-content:center;gap:4rem;width:100%;height:100%;display:flex}main h2{text-align:center}main .introduction{width:100%;max-width:768px;margin:0 auto;font-weight:500;line-height:1.55}main .btns{justify-content:space-evenly;align-items:start;width:100%;height:100%;display:flex}main .btns a{font-weight:500}section h2{text-align:center}#portfolio{width:100%;height:max-content}.projects{flex-direction:column;gap:4rem;width:100%;display:flex}.projects>.project{grid-template-columns:1fr 1fr;align-items:center;gap:2rem;width:100%;height:90vh;display:grid}.project-1{text-shadow:2px 3px 3px #81a299}.project-1 .imgs{box-shadow:2px 3px 4px 2px #81a299}.project-1 .skills span{text-shadow:none;background-color:#465651}.project-2{text-shadow:2px 3px 3px #9a9a9a}.project-2 .imgs{box-shadow:2px 3px 4px 2px #9a9a9a}.project-2 .skills span{text-shadow:none;background-color:gray}.project-3{text-shadow:2px 2px 3px gray}.project-3 .imgs{box-shadow:2px 3px 4px 2px gray}.project-3 .skills span{text-shadow:none;background-color:#232323}.projects>.project .name,.projects>.project .description,.projects>.project .skills,.projects>.project .imgs,.projects>.project .imgs>div,.projects>.project .imgs>div>div{opacity:0;transform:translateY(35px)}.project .imgs{aspect-ratio:1;background-color:silver;border-radius:15px;justify-self:center;width:80%;padding:3px}.project .imgs>div{border-radius:15px;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;width:100%;height:100%;display:grid;overflow:hidden}.project .imgs>div>div{perspective:400px;background-color:#dcdcdc;width:100%;height:100%;position:relative;overflow:hidden}.project .imgs>div>div img{object-fit:cover;width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;transition:all .3s ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.project .imgs>div>div img:hover{opacity:.7;transform:translate(-50%,-50%)translateZ(30px)}.project .imgs>div>div:first-child{border-bottom:1px solid gray;grid-area:1/1/2/2 span}.project .imgs>div>div:nth-child(2){border-top:1px solid gray;border-right:.5px solid gray;grid-area:2/1/auto/2}.project .imgs>div>div:nth-child(3){border-top:1px solid gray;border-left:.5px solid gray;grid-area:2/2}.img-overlay{z-index:150;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:0;background-color:#00000080;width:100%;height:100vh;animation:.15s ease-out forwards img-overlay;position:fixed;top:0;left:0}@keyframes img-overlay{0%{opacity:0}to{opacity:1}}.img-overlay button{color:#f5f5f5;cursor:pointer;background-color:#0000;border:none;outline:none;font-size:2rem;display:flex;position:absolute;top:10%;right:10%}.img-modal{opacity:0;border:2px solid #f5f5f5;border-radius:15px;width:100%;max-width:800px;height:auto;max-height:80vh;animation:.3s ease-out .15s forwards img-modal;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-48%)}@keyframes img-modal{0%{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}.img-modal img{object-fit:cover;width:100%;height:100%;max-height:75vh;position:relative}.project .details{flex-direction:column;place-self:center;gap:1rem;width:90%;height:max-content;display:flex}.project .details .name{flex-direction:column;gap:.5rem;display:flex}.project .details .name>div{align-items:center;gap:1rem;display:flex}.project .details .name a{font-weight:500}.project .details .name span{color:#232323;font-size:.9rem}.project .details .description,.project .details .skills p{font-weight:500;line-height:1.5}.project .details .description{max-width:90%}.project .details .skills{flex-direction:column;gap:.5rem;display:flex}.project .details .skills>div{flex-wrap:wrap;gap:.5rem;width:100%;display:flex}.project .details .skills>div span{color:#f5f5f5;border-radius:7px;padding:.5rem}.project-other h3{text-align:center}.project-other>div{justify-content:space-around;align-items:start;gap:2rem;width:100%;height:max-content;margin:10vh 0;display:flex}.project-other>div>div{background-color:#e8e8e8;border-radius:18px;width:30%;height:220px;padding:3px;position:relative;overflow:hidden}.project-other>div>div>span{filter:blur(25px);z-index:0;opacity:0;background-color:#232323cc;border-radius:50%;width:180px;height:180px;transition:all .3s ease-in;position:absolute;top:0;left:0}.project-other>div>div>div{z-index:1;background-color:#eee;border-radius:15px;flex-direction:column;justify-content:space-between;gap:1rem;height:100%;padding:1rem;font-weight:500;transition:all .2s;display:flex;position:relative}.project-other>div>div>div:hover{opacity:.95;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px)}.project-other>div>div>div>div{gap:1rem;display:flex}.contact-details{grid-template-columns:1fr 1fr;align-items:center;gap:2rem;width:100%;height:90vh;display:grid}.links{flex-direction:column;justify-self:center;gap:2rem;width:90%;display:flex}.links div{align-items:center;gap:1rem;display:flex}.links div span{color:#232323;z-index:1;background-color:#0000;border-radius:5px;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:1.5rem;display:flex;position:relative}.links div span:before{content:"";z-index:-1;background-color:#232323;border-radius:5px;width:100%;height:100%;position:absolute;top:20%;right:20%}.links div span:after{content:"";z-index:-1;background-color:#eaeaea;border-radius:5px;width:100%;height:100%;position:absolute;top:0;right:0}.links div a{color:#000;font-size:1.05rem;font-weight:500;text-decoration:none}.links div a:hover{text-decoration:underline}.message{justify-self:center;width:90%;position:relative}.message h3{position:absolute;bottom:100%;transform:translateY(-50%)}.message form{flex-direction:column;align-items:center;gap:1rem;width:100%;display:flex}.message form input,.message form textarea{border:2px solid silver;border-radius:10px;outline:none;width:100%;padding:.25rem;font-size:1rem;font-weight:500}.message form input{min-height:1.5rem}.message form textarea{resize:none;height:12rem;font-family:Google Sans Flex,sans-serif}.message form button{color:#f5f5f5;cursor:pointer;background-color:#232323;border:none;border-radius:7px;outline:none;width:max-content;padding:.5rem 2rem;font-size:1.05rem;box-shadow:0 0 12px #000c}@media screen and (width<=1024px){#app{padding:2rem}.project .imgs{width:90%}.project .details .description{width:100%;max-width:none}}@media screen and (width<=911px){.projects .project{grid-template-rows:auto auto;grid-template-columns:1fr}.project .details{grid-row-start:2;justify-self:start}.project .imgs{grid-row:1/2;justify-self:end;width:70%}.project-2 .details{justify-self:end}.project-2 .imgs{justify-self:start}}@media screen and (width<=767px){.projects .project{height:max-content}.project .details,.project .imgs{width:100%}.project-other>div{flex-wrap:wrap}.project-other>div>div{width:100%}.contact-details{grid-template-rows:auto auto;grid-template-columns:1fr}.links,.message{width:100%}}@media screen and (width>=1600px){html{font-size:1.15rem}#app{max-width:1360px}main .introduction{max-width:1024px}}@media screen and (width>=1980px){html{font-size:1.2rem}}