.preloader,a.logo,nav,nav ul{display:flex}*,a.logo,nav ul li a{text-decoration:none}#scroll-top,.preloader,nav{position:fixed}*{margin:0;padding:0;box-sizing:border-box;text-transform:capitalize;outline:0;transition:.3s}body{font-family:Outfit,sans-serif;overflow-x:hidden}body.hidden{overflow:hidden}section{padding:1.8rem 18%}section:nth-child(odd){background-color:#2b2b2b}.preloader,.skills .container .bar,nav,section:nth-child(2n){background-color:#202020}.heading{color:#fff;font-size:2rem;text-align:center}html::-webkit-scrollbar{width:.6rem}html::-webkit-scrollbar-track{background:#202020}html::-webkit-scrollbar-thumb{border-radius:5px;background:rgba(17,119,255,.5)}html::-webkit-scrollbar-thumb:hover{border-radius:5px;background:#07f}.preloader{height:100vh;width:100%;justify-content:center;align-items:center;z-index:9999}.preloader.hidden{transition:1s;opacity:0;transform:scale(2.5);visibility:hidden}.preloader .loading{transform:scale(.5)}.preloader .loading svg{width:12em;height:12em;animation:1.5s linear infinite spinner}@keyframes spinner{100%{transform:rotate(360deg)}}nav{width:100%;justify-content:space-around;padding:10px 0;box-shadow:0 0 3px rgba(0,0,0,.5);z-index:100}a.logo{margin-top:5px}nav .logo img{border-radius:50%;box-shadow:0 0 2px #444}nav .logo h4{color:#fff;padding-left:10px;line-height:41px}nav ul{list-style:none;width:25%;justify-content:space-between;line-height:50px}nav ul li a{color:#f0f8ff;transition:.2s}nav ul li a.active,nav ul li a:hover{color:#07f;border-bottom:.2rem solid #07f;padding:.5rem 0}.menu-toggle{margin-top:10px;display:none;flex-direction:column;height:20px;justify-content:space-between;position:relative}.menu-toggle input{width:28px;height:28px;position:absolute;opacity:0;cursor:pointer;z-index:2}.menu-toggle span{display:block;width:28px;height:4px;background-color:#fff;border-radius:1px;transition:.5s}.menu-toggle span:nth-child(2){transform-origin:0 0}.menu-toggle span:nth-child(4){transform-origin:0 100%}.menu-toggle input:checked~span:nth-child(2){transform:rotate(45deg) translate(-1px,-1px)}.menu-toggle input:checked~span:nth-child(4){transform:rotate(-45deg) translate(-1px,0)}.menu-toggle input:checked~span:nth-child(3){opacity:0;transform:scale(0)}.home{min-height:100vh;padding:5rem 16%;position:relative;display:flex;flex-wrap:wrap;align-items:center}.footer,section.about{min-height:auto}.home #particles-js{position:absolute;top:0;left:0;height:100%;width:100%}.home div.foto{flex:1 1 40rem;z-index:1}.home div.foto img{width:35%;margin-left:33rem;margin-top:4rem;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)}.home div.foto img:hover{box-shadow:0 5px 15px rgba(0,0,0,.5)}.home div.content{position:relative;width:30%;flex:1 1 40rem;padding-top:1rem;z-index:1}.home div.content h2{position:absolute;color:#fff;font-weight:800;font-size:3rem;margin-top:-20rem}.home div.content p{position:absolute;color:#fff;font-size:1.5rem;margin-top:-12rem}.footer .credit a,.home div.content p span{color:#07f}.home div.content a{font-weight:600;margin-top:-8rem;position:absolute;line-height:0;padding:1.3rem 2.4rem;border-radius:5em;transition:transform .3s,background .3s,color;box-shadow:0 5px 18px rgba(32,32,32,.6)}.home div.content a span{font-size:1rem}.home div.content a.email{color:#000;background:#fff}.home div.content a.cv{color:#fff;background:#4e4e4e;margin-left:9.5rem}.about div.about-me div.about-desc a:hover,.home div.content a:hover{background:#07f;color:#fff}.home div.content a:hover{transform:scale(1.1)}@media screen and (max-width:968px){nav{bottom:0;box-shadow:0 0 5px rgba(0,0,0,.5)}ul li{width:50%;text-align:center}nav ul{position:absolute;right:0;top:0;width:100%;height:30vh;flex-direction:row;flex-wrap:wrap;align-items:center;background-color:#202020;z-index:-999;transform:translateY(30%);opacity:0;transition:transform .2s linear,opacity .3s linear;border-radius:20px;box-shadow:0 0 5px#202020}.menu-toggle{display:flex;margin-top:15px}nav ul.slide{transform:translateY(-90%);opacity:1}.home div.foto img{width:50%;margin-top:2rem;margin-left:20%;margin-bottom:-10rem}.home div.content{margin-top:30rem;margin-left:30%}.home div.content h2{text-align:center;font-size:2rem}.home div.content p{margin-top:-15rem;margin-left:-2rem;font-size:1rem}.home div.content a{margin-left:-3rem;margin-top:-13rem;padding:1rem}.home div.content a.cv{margin-left:6rem}}.about div.about-me{display:flex;flex-wrap:wrap;position:relative;padding:1rem}.about div.about-me div.foto{flex:2 1 10rem;z-index:1;text-align:center;padding:30px}.about div.about-me div.foto img{width:100%;border-radius:20px;margin-top:0;filter:grayscale(100);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)}.about div.about-me div.foto img:hover{filter:none;box-shadow:0 5px 15px rgba(0,0,0,.5)}.about div.about-me div.about-desc{flex:1 1 20rem;z-index:1;padding:30px;margin-bottom:40px}.about div.about-me div.about-desc p{color:#fff;font-size:1.3rem;font-weight:300;text-transform:none;text-align:justify}.about div.about-me div.about-desc a{color:#000;background-color:#fff;font-weight:600;margin-top:1rem;position:absolute;line-height:0;padding:1rem 1.8rem;border-radius:.5em;transition:background-color .3s;box-shadow:0 5px 18px rgba(43,43,43,.6)}.about div.about-me div.about-desc a i{transition:color,transform .3s}.about div.about-me div.about-desc a:hover i,.project .desc .btns .btn.code:hover i,.project .viewall .btn:hover i{transform:translateX(5px)}@media screen and (max-width:968px){.about div.about-me{display:inline-block;flex-wrap:wrap}.about div.about-me .foto{width:50%;margin:-25px auto}section.about{padding:2rem 0}}section.skills{min-height:80vh;padding:1.8rem 10%}.skills .container{color:#fff;border-radius:1rem;padding:2rem;width:90%;margin:auto}.skills .container .row{display:grid;grid-template-columns:repeat(5,1fr);flex-wrap:wrap;gap:1.8rem}.skills .container .bar{margin-bottom:15px;padding:10px;border-radius:1rem;filter:grayscale(100);transition:.2s}.skills .container .bar:hover{filter:none;box-shadow:0 0 7px #07f;background-color:rgba(0,0,0,.5)}.skills .container .bar .info{display:flex;flex-direction:column;align-items:center;margin-top:1rem}.skills .container .bar .info img{width:70px;height:70px}.skills .container .bar .info span{font-size:1rem;font-weight:500}@media screen and (max-width:968px){.skills .container .row{grid-template-columns:repeat(4,1fr)}}section.project{padding:1.8rem 13%;min-height:70vh}.project .heading span{color:#ffe600}.project .box-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin:2rem}.project .box-container .box{flex:1 1 17rem;border-radius:.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.1);position:relative;overflow:hidden;height:17rem}.project .box-container .box img{height:100%;width:100%;object-fit:cover}.project .box-container .box .content{height:100%;width:100%;position:absolute;top:82%;left:0;background:rgba(32,32,32,.9);display:flex;flex-direction:column}.project .box-container .box .content .tag{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:3rem;width:100%;padding-left:1rem;background:#2b2b2b}.project .box-container .box .content .tag h3{color:#fff;font-size:1.2rem}.project .box-container .box:hover .content{top:15%}.project .desc{margin:1rem 1.5rem;display:flex;flex-direction:column;justify-content:center}.project .desc p{text-transform:none;color:#fff;font-size:1rem;margin-top:.5rem}.project .desc .btns{display:flex;justify-content:space-between;width:100%;margin-top:1rem;padding:0 1rem}.project .desc .btns .btn{line-height:0;display:inline;padding:1rem 2rem;border-radius:.5rem;font-size:1rem;color:#fff;background:#101010}.project .desc .btns .btn.view:hover i,.project .viewall .btn.email:hover i{transform:translateX(-5px)}.project .desc .btns .btn:hover{background:#07f}.project .viewall{background-color:#4e4e4e;display:flex;height:5rem;justify-content:space-evenly;border-radius:.5rem}.project .viewall h2{text-transform:none;color:#fff;line-height:5rem}.project .viewall div{margin-top:2rem}.project .viewall .btn{height:3rem;margin-left:1rem;position:relative;padding:1rem;border-radius:.5em;transition:background-color .3s,color;color:#fff;font-weight:700;background-color:#2b2b2b}.project .viewall .btn.email{background-color:#fff;color:#000}.project .viewall .btn.email i{transition:transform .3s,color}.project .viewall .btn span{font-weight:600;font-size:1rem}.project .viewall .btn i{margin:0 .3rem;font-size:1rem}.project .viewall .btn:hover{background:#07f;color:#fff}@media screen and (max-width:968px){.project .viewall{position:relative;display:block;min-height:150px}.project .viewall h2{font-size:1.2rem;text-align:center}.project .viewall .btn.more{position:absolute;left:0;margin-left:15%;bottom:1.5rem}.project .viewall .btn.email{position:absolute;right:0;margin-right:15%;bottom:1.5rem}}@media screen and (max-width:568px){.home{height:10vh}.home div.foto img{width:80%;margin:0 10% -10rem}.home div.content{margin-left:20%;margin-top:30rem;margin-bottom:-10rem}.home div.content h2{font-size:2rem}.home div.content p{margin-top:-15rem;font-size:.9rem}.home div.content a{margin-top:-13rem;padding:1rem}.home div.content a.cv{margin-left:30%}.about div.about-me .foto{width:100%;margin:-25px auto}.skills .container{padding:0;margin:5px 0 0;width:100%}.skills .container .row{grid-template-columns:repeat(2,1fr);margin:1rem;padding:2rem .2rem;gap:1rem}section.project{padding:1.8rem 2%}.project .box-container{grid-template-columns:repeat(1,1fr)}.project .desc .btns .btn{padding:1rem}.project .viewall .btn.more{position:absolute;left:0;margin-left:5%;bottom:1.5rem}.project .viewall .btn.email{position:absolute;right:0;margin-right:5%;bottom:1.5rem}}.footer{padding:0 16%;background-color:#2b2b2b}.footer .box-container{display:flex;justify-content:center;flex-wrap:wrap}.footer .box-container .box{flex:1 1 10rem;margin:2rem}.footer .box-container .box.right{position:relative;left:9rem}.footer .box-container .box h3{font-size:1.5rem;color:#fff;padding-bottom:1rem;font-weight:400}.footer .box-container .box p{font-size:1rem;color:#ccc;padding:.7rem 0;text-transform:none}.footer .box-container .box p i{padding-right:1rem;color:#07f}.footer .box-container .box .share{display:flex;flex-wrap:wrap;padding:0}.footer .box-container .box .share a{height:2.2rem;width:2.2rem;padding:.5rem;text-align:center;border-radius:50%;font-size:1rem;margin-right:1rem;transition:.3s;background:#e6e6e6;color:#02094b;border:none}.footer .box-container .box .share a:hover{background:0 0;transform:scale(.9);border:.1rem solid #b4b2b2;color:#07f}.footer .credit{padding:1rem 0;text-align:center;font-size:1rem;font-weight:400;color:#fff;border-top:.1rem solid #fff3}.footer .credit i{font-size:.9rem}.footer .fa{color:#e90606;margin:0 .3rem;font-size:1.5rem;animation:.35s infinite alternate pound}@-webkit-keyframes pound{to{transform:scale(1.1)}}@keyframes pound{to{transform:scale(1.1)}}@media screen and (max-width:968px){section.footer{min-height:72vh}.footer .box-container .box.right{left:0}}#scroll-top{top:-140%;right:3rem;padding:.6rem .8rem;font-size:1rem;background:#07f;color:#fff;border-radius:10px;transition:1s linear;z-index:1}#scroll-top.active{top:calc(100% - 7rem)}@media (max-width:568px){section.footer{padding:1.8rem 0;min-height:72vh}.footer .box-container .box h3{margin-left:10px}.footer .box-container .box{margin:1rem}.footer .box-container .box p{padding:.7rem}#scroll-top{top:140%}}