@import"https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap";@import"https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap";.app{max-width:115rem;margin:0 auto}@media screen and (max-width: 768px){.app{max-width:600px;margin:auto}}.about{display:grid;place-content:center;min-height:100vh;min-height:40svh;margin:0rem 0;padding:0 1rem}.about .container h2{text-align:center;font-size:2.4rem;margin:2rem 0;position:sticky;top:4.5rem;z-index:-2}.about .container .my-info .my-img{overflow:hidden;height:18rem;border-radius:1.3rem;margin-bottom:2rem;position:sticky;top:5rem;width:100%;z-index:-2}.about .container .my-info .my-img img{height:100%;width:100%;object-fit:cover}.about .container .my-info .details{background:var(--bg-color);padding:.5rem 0}.about .container .my-info .details .detail{margin-bottom:.8rem}.about .container .my-info .details .detail h3{color:var(--primary-color);font-size:1.37rem;text-transform:capitalize}@media screen and (min-width: 850px){.about .container h2{position:static}.about .container .my-info{display:flex;gap:1rem}.about .container .my-img{width:40%!important}.about .container .details{width:60%!important}}.contact{min-height:100vh;min-height:40svh;display:flex;align-items:center;justify-content:center;margin:0rem 0 2rem;padding:0 .6rem}.contact .container{width:100%}.contact .container h1{font-size:2rem;text-transform:capitalize;margin:.5rem 0;text-align:center}.contact .container .socials{display:flex;align-items:center;flex-direction:column;gap:1rem;margin-bottom:2rem}.contact .container .socials a{background:var(--dark-bg-color);display:flex;justify-content:center;align-items:center;gap:1rem;padding:.5rem 1rem;border-radius:0 .7rem;transition:.5s}.contact .container .socials a:hover{box-shadow:1px 1px 12px var(--primary-color)}.contact .container .socials a svg{font-size:2.2rem;color:var(--primary-color);aspect-ratio:1/1}.contact .container .socials a span{font-weight:600;font-size:1.1rem;text-transform:capitalize}.contact .container .fun{background:linear-gradient(150deg,var(--primary-color),var(--dark-bg-color),var(--dark-bg-color),var(--primary-color),var(--dark-bg-color),var(--dark-bg-color),var(--primary-color),var(--dark-bg-color));max-width:18rem;padding:2rem 1rem;margin:2rem auto;text-align:center;border-radius:1rem}.contact .container .fun h3{font-size:1.4rem;margin-bottom:1rem}.contact .container .fun p{font-weight:500;margin-bottom:1.8rem}.contact .container .fun .fun-btn{font-size:1.2rem;font-weight:600;color:var(--text-color);border:2px solid var(--primary-color);cursor:pointer;padding:.6rem 1.1rem;border-radius:2rem;transition:.5s}.contact .container .fun .fun-btn:hover{transform:scale(1.1)}.contact .container .mail .picture{display:none}.contact .container .mail .mail-me h2{font-size:1.8rem;text-align:center;margin-bottom:2rem;text-transform:capitalize}.contact .container .mail .mail-me form .err{color:red;margin-bottom:.3rem}.contact .container .mail .mail-me form>div{margin-bottom:1.5rem}.contact .container .mail .mail-me form>div label{display:block;margin:.5rem 0;font-family:var(--f2)}.contact .container .mail .mail-me form>div>div{border:1.5px solid var(--primary-color);display:flex;align-items:center;gap:.8rem;padding:.6rem 1rem;border-radius:.5rem}.contact .container .mail .mail-me form>div>div svg{font-size:1.5rem;width:2rem}.contact .container .mail .mail-me form>div>div input{color:var(--text-color);font-size:1.1rem;width:100%}.contact .container .mail .mail-me form>div textarea{border:1.5px solid var(--primary-color);border-radius:.5rem;width:100%;min-height:13rem;font-size:1rem;color:var(--text-color);padding:.6rem}.contact .container .mail .mail-me form button{color:var(--bg-color);font-weight:600;font-size:1.1rem;padding:.6rem 1.5rem;border-radius:.5rem;background:var(--primary-color);border:1.8px solid var(--primary-color);transition:.5s;cursor:pointer}.contact .container .mail .mail-me form button:hover{color:var(--primary-color);background:var(--bg-color)}@media screen and (min-width: 800px){.contact h1{margin-bottom:-12rem!important;font-size:2.3rem}.contact .container .socials{width:fit-content;position:sticky;left:0;top:4rem;align-items:start;z-index:10}.contact .container .socials a{width:fit-content;transition:.5s}.contact .container .socials a:hover span{display:block}.contact .container .socials a svg{font-size:1.8rem}.contact .container .socials a span{display:none}.contact .container .fun{max-width:26rem!important}.contact .container .mail{width:92%;display:flex;align-items:center;gap:1.5rem;margin-left:auto;margin-right:1.3rem}.contact .container .mail .picture{display:grid;place-content:center;width:35%}.contact .container .mail .picture img{height:100%;width:100%;object-fit:cover}.contact .container .mail .mail-me{width:65%}.contact .container .mail .mail-me h2{text-align:left;font-size:1.8rem}}.loader{background:#000000a4;height:100vh;width:100vw;display:grid;place-content:center;position:fixed;top:0;z-index:10;transition:.5s}.loader .wrapper{background:var(--bg-color);padding:1rem;border-radius:1rem}.submit-success{background:#027426;position:fixed;top:5rem;left:50%;margin:0 .5rem;transform:translate(-50%,50%);padding:1.2rem 2.5rem;text-align:center;text-transform:uppercase;font-weight:600;border-radius:.7rem;width:77%;opacity:0}.submit-success.err{background:#b01d1d}.submit-success.err svg{color:#b01d1d}.submit-success svg{background:var(--text-color);color:#027426;padding:.5rem;box-sizing:content-box;font-size:2rem;margin-bottom:.5rem;border-radius:50%}@media screen and (min-width: 500px){.submit-success{width:20rem}}.hero{display:grid;place-content:center;min-height:calc(100vh - 4rem);min-height:calc(40svh - 4rem);margin-bottom:2rem}.hero .container{width:85%;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:3rem}.hero .container .left-col{transition:.7s;visibility:hidden;width:100%;opacity:0}.hero .container .left-col h1{font-size:2.6rem;margin-bottom:.2rem}.hero .container .left-col .type-writer{width:fit-content;display:flex;align-items:center}.hero .container .left-col .type-writer h2{font-size:1.6rem;text-transform:uppercase;color:var(--primary-color);font-family:var(--f2)}.hero .container .left-col .type-writer span{font-size:2rem;display:block}.hero .container .left-col p{margin:.4rem 0 1.5rem;font-weight:500;line-height:1.5rem}.hero .container .left-col .btns{display:flex;align-items:center;gap:2rem}.hero .container .left-col .btns button,.hero .container .left-col .btns a{font-size:1.2rem;border-radius:0 .5rem;border:.1rem solid var(--primary-color);padding:.6rem 1.1rem;color:var(--primary-color);cursor:pointer;transition:.5s;font-weight:600}.hero .container .left-col .btns button:hover,.hero .container .left-col .btns a:hover{background:var(--primary-color);color:var(--bg-color)}.hero .container .left-col .btns a{color:var(--bg-color);background:var(--primary-color)}.hero .container .left-col .btns a:hover{background:var(--bg-color);color:var(--primary-color)}.hero .container .right-col{transition:1s;visibility:hidden;opacity:0;width:100%;background-color:var(--dark-bg-color);border-radius:2rem;position:relative;top:2rem;right:-2rem}.hero .container .right-col .container{border-radius:2rem;width:100%;overflow:hidden;aspect-ratio:1.3/1;position:relative;top:-2rem;right:2rem}.hero .container .right-col .container img{height:100%;width:100%;object-fit:cover}@media screen and (max-width: 850px){.hero .container{width:90%}.hero .container .left-col h1{font-size:2.3rem}.hero .container .left-col h2{font-size:1.5rem}.hero .container .left-col p{font-size:.94rem}}@media screen and (max-width: 800px){.hero{margin-top:5.5rem}.hero .container{padding:0 .2rem;display:block}.hero .container .left-col{text-align:center}.hero .container .left-col .type-writer{margin:0 auto}.hero .container .left-col h1{margin-bottom:1rem;font-size:1.94rem}.hero .container .left-col h2{font-size:1.3rem}.hero .container .left-col .btns{justify-content:center;margin-bottom:1.7rem}.hero .container .right-col{background:none;margin:0 auto;margin-bottom:3rem;max-width:16rem;position:static}.hero .container .right-col .container{aspect-ratio:1/1;border:4px double var(--primary-color);width:100%;border-radius:50%;padding:0;position:static}}.navbar{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:fixed;top:0;z-index:99;width:100vw;height:4rem;overflow-y:auto}.navbar nav{margin:0 auto;height:100%;width:80%;display:flex;align-items:center;justify-content:space-between;font-family:var(--f1)}.navbar nav .left a{font-size:1.2rem;cursor:pointer;font-weight:500}.navbar nav .left a.mobile-name{display:none}.navbar nav .left a span{color:var(--primary-color)}.navbar nav .left .svg{width:3rem;overflow:hidden;display:grid;grid-template-columns:2rem 2rem;align-items:center}.navbar nav .left .svg svg{display:none;transition:.5s}.navbar nav .left .svg svg:last-child{transform:translate(1rem)}.navbar nav ul{display:flex;align-items:center;gap:1rem}.navbar nav ul li{list-style:none;cursor:pointer}.navbar nav ul li a{color:var(--text-color);text-transform:capitalize;font-size:1rem;font-weight:500;transition:.6s}.navbar nav ul li a:hover{color:var(--primary-color)}@media screen and (max-width: 800px){nav{width:90%!important}}@media screen and (max-width: 630px){nav .left .desktop-name{display:none}nav .left .mobile-name{display:block!important}}@media screen and (max-width: 580px){.navbar{height:3.5rem}.navbar nav{width:80%!important}.navbar nav .left{height:100%;width:100%;display:flex;align-items:center;justify-content:space-between}.navbar nav .left a{font-size:1.5rem!important}.navbar nav .left svg{display:block!important;font-size:2.3rem!important;cursor:pointer;transition:.5s}.navbar nav .left svg:hover{color:var(--primary-color)}.navbar nav ul{display:none!important}}.view-menu{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:backdrop-filter .5s;height:100vh;width:100vw}.view-menu nav{align-items:start!important;flex-direction:column;justify-content:start}.view-menu nav .left{height:3.5rem}.view-menu nav ul{display:flex!important;margin:3rem auto;flex-direction:column;align-items:center!important}.view-menu nav ul li{margin-top:.7rem}.view-menu nav ul li a{font-size:1.6rem}.view-menu .svg svg:first-child{transform:translateY(-2rem)}.view-menu .svg svg:last-child{transform:translate(-2rem)!important}.portfolio{min-height:100vh;margin:3rem 0;opacity:0;animation:fadeIn .8s ease-in forwards}.portfolio .container h2{text-align:center;font-size:2.4rem;margin-bottom:3rem;text-transform:capitalize}.portfolio .container .works{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:1200px;margin:0 auto;padding:0 1rem}.portfolio .container .works .work{background:var(--dark-bg-color);border-radius:.7rem;padding:0rem;transition:transform .3s ease;cursor:pointer;border:1px solid var(--primary-color)}.portfolio .container .works .work:hover{box-shadow:1px 1px 29px #243069;transition:box-shadow .3s ease}.portfolio .container .works .work .work-img{position:relative;margin-bottom:1rem}.portfolio .container .works .work .work-img a{display:block;width:100%;overflow:hidden;border-radius:.7rem .7rem 0rem 0rem!important}.portfolio .container .works .work .work-img a img{width:100%;height:250px;object-fit:cover;transition:transform .3s ease;border-radius:0}.portfolio .container .works .work .work-img a:hover img{transform:scale(1.05)}.portfolio .container .works .work .work-img .work-num{position:absolute;top:1rem;right:1rem;background:var(--bg-color);border-radius:50%;padding:.5rem}.portfolio .container .works .work .work-img .work-num span{color:var(--primary-color);font-size:1.2rem;font-weight:700}.portfolio .container .works .work .work-details .desc{padding:1rem;border-radius:.7rem;display:flex;justify-content:center}.portfolio .container .works .work .work-details .desc p{margin-bottom:1rem;line-height:1.6}.portfolio .container .works .work .work-details .desc button{background:var(--primary-color);color:var(--dark-bg-color);padding:.7rem 1.5rem;border-radius:.5rem;font-weight:600;transition:transform .3s ease}.portfolio .container .works .work .work-details .desc button:hover{transform:scale(1.05)}.portfolio .container .works .work h3{margin-top:1rem;font-size:1.2rem;text-transform:uppercase}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media screen and (max-width: 968px){.portfolio .container .works{grid-template-columns:1fr}}@media screen and (max-width: 480px){.portfolio .container h2{font-size:1.8rem}.portfolio .container .works .work .work-img img{height:200px}.portfolio .container .works .work .work-details .desc{padding:.8rem}.portfolio .container .works .work .work-details .desc p{font-size:.9rem}.portfolio .container .works .work .work-details .desc button{padding:.6rem 1.2rem;font-size:.9rem}}.project-details{background:#00000087;position:fixed;top:0;height:100vh;height:40svh;width:100vw;z-index:999;display:flex;align-items:center;justify-content:center}.project-details .container{background:var(--dark-bg-color);margin:0 1.7rem;padding:1rem;position:relative;overflow-y:auto;height:fit-content;max-height:89%;border-radius:1rem;max-width:30rem}.project-details .container>svg{font-size:2rem;cursor:pointer;position:absolute;top:1rem;right:1rem}.project-details .container>svg:hover{color:var(--primary-color)}.project-details .container h3{margin-top:2rem;text-transform:uppercase;text-align:center;font-size:1.4rem}.project-details .container .img{width:100%;height:15rem;margin:.7rem 0;border-radius:1rem;overflow:hidden}.project-details .container .img img{height:100%;width:100%;object-fit:cover}.project-details .container p{font-size:.96rem}.project-details .container .tags{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.3rem 0}.project-details .container .tags p{background:var(--bg-color);padding:.6rem 1rem;border-radius:10rem;color:var(--primary-color);text-transform:capitalize;font-weight:600}.project-details .container h4{margin-bottom:.5rem;margin-top:1.6rem;font-size:1.2rem}.project-details .container ul{margin-left:1rem}.project-details .container ul li{list-style-type:square}.project-details .container .github{display:block;font-size:2.2rem;color:var(--primary-color);margin:1.3rem 0;width:fit-content}.project-details .container .btn{background:var(--primary-color);display:block;width:fit-content;padding:.7rem 1.3rem;font-size:1.1rem;font-weight:600;color:var(--dark-bg-color);border-radius:.4rem;margin:.5rem auto 1rem}@media screen and (max-width: 450px){.project-details .container .img{height:11rem}}.skills{min-height:100vh;min-height:40svh;padding:0 1rem;margin:0rem 0;overflow:hidden}.skills .container h2{text-align:center;font-size:2.4rem;margin:2rem 0}.skills .container>p{text-align:center;margin:0 auto;max-width:45rem}.skills .container h3{text-align:center;margin:2.5rem 0;font-size:1.3rem;text-transform:capitalize}.skills .container .techs{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.6rem,1fr));gap:1rem;margin:0 auto;max-width:67rem}.skills .container .techs.mobile{display:none}.skills .container .techs .tech{background:var(--dark-bg-color);display:flex;align-items:center;gap:1rem;padding:.5rem .8rem;border-radius:.6rem}.skills .container .techs .tech:hover p{width:fit-content;overflow:visible}.skills .container .techs .tech img{width:3.7rem;aspect-ratio:1/1;object-fit:cover;border-radius:.5rem}.skills .container .techs .tech p{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (max-width: 500px){.skills .container .techs.desktop{display:none}.skills .container .techs.mobile{display:grid}}.testimonials{text-align:center;display:grid;place-content:center;margin-bottom:3rem}.testimonials .container{padding:1rem}.testimonials .container h1{font-size:2.4rem}.testimonials .container p{margin:0 auto;margin-top:1rem;max-width:37rem}.testimonials .container .cards{display:flex;align-items:center;justify-content:center;gap:1.3rem;margin-top:3.5rem;max-width:63rem}.testimonials .container .cards .card{background:var(--dark-bg-color);padding:1rem;border-radius:0 .8rem;transition:.5s;-webkit-user-select:none;user-select:none;max-width:26rem;min-height:20rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.testimonials .container .cards .card:hover{box-shadow:1px 1px 12px var(--primary-color);transform:translateY(-.8rem)}.testimonials .container .cards .card svg{font-size:2.3rem;color:var(--primary-color)}.testimonials .container .cards .card p{font-size:.9rem;margin:.7rem 0;font-weight:500}.testimonials .container .cards .card .person{width:5rem;aspect-ratio:1/1;border-radius:50%;overflow:hidden;margin:0 auto;border:2px solid var(--primary-color)}.testimonials .container .cards .card .person img{height:100%;width:100%;object-fit:cover}.testimonials .container .cards .card small{display:block;font-size:.88rem;font-weight:600;margin:.5rem 0;color:var(--primary-color)}@media screen and (max-width: 860px){.testimonials .container .cards{flex-direction:column!important}}:root{--text-color: #d3d5d8;--primary-color: #00a4e8;--bg-color: #091b2a;--dark-bg-color: hsl(207, 65%, 15%);--f2: "Black Ops One", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--f1: "Luckiest Guy", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif}*,*:after,*:before{padding:0;margin:0;box-sizing:border-box;background:none;outline:none;border:none}a{text-decoration:none;cursor:pointer;color:var(--text-color)}body{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;background:var(--bg-color);color:var(--text-color);padding-top:4rem}h1,h2,h3,h4{font-family:var(--f1)}