:root,#root,body,html{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;background-color:#06070c;width:100%;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;text-align:center;scroll-behavior:smooth;--main-blue: #22d3ee;--light-blue: #5ae7fd;--main-black: rgba(6, 7, 12, 255);--border-color: #0a474f}p{font-weight:400;margin:0}@keyframes profileAnimation{0%{transform:translate(0)}50%{transform:translateY(-10%)}to{transform:translate(0)}}@keyframes animatedCircle{0%{scale:1;opacity:0}70%{scale:1.5;opacity:1}90%{scale:1.5;opacity:0}to{scale:2;opacity:0}}main{width:100%;min-height:100%;display:flex;background:linear-gradient(45deg,#06070c,#0f1522);justify-content:center;align-items:center;scroll-margin-top:5rem}main .hero-content{margin:7rem;width:50%;display:flex;flex-direction:column;align-items:center;min-width:40rem;z-index:1}main .hero-content img{height:13rem;object-fit:cover;aspect-ratio:1/1;border-radius:100%;background-color:#f000;border:3px solid var(--main-blue);box-shadow:0 0 10px 1px var(--main-blue);animation-name:profileAnimation;animation-duration:4s;animation-iteration-count:infinite}main .hero-content h1{font-size:5rem;margin:0;text-shadow:0px 0px 10px var(--main-blue)}main .hero-content h3{font-size:2rem;margin:1rem 0;color:var(--main-blue);font-weight:400}main .hero-content p{font-weight:400;font-size:1.3rem;margin:0rem}main .hero-content .main-buttons{display:flex;margin-top:3rem}main .hero-content .main-buttons a{text-decoration:none;border:2px solid var(--main-blue);height:3rem;display:flex;align-items:center;justify-content:center;font-weight:700;padding:.2rem 1.5rem;color:var(--main-blue);box-shadow:0 0 10px 1px var(--main-blue);margin:0 .5rem;width:10rem;cursor:pointer;transition-duration:.3s}main .hero-content .main-buttons a:hover{background-color:var(--main-blue);color:#000}main .hero-content .main-buttons a img{width:17%;height:100%;margin-right:.5rem;object-fit:contain;background-color:#fff0;box-shadow:none;border:none;animation:none}main .hero-content .main-buttons a:last-child{background-color:var(--main-blue);color:#000}main .hero-content .main-buttons a:last-child:hover{background-color:var(--light-blue)}main .animated-circle{height:10rem;width:10rem;border:2px solid var(--border-color);position:absolute;border-radius:100%;animation-name:animatedCircle;animation-iteration-count:infinite;z-index:0}main #first-circle{top:10rem;left:10rem;animation-duration:4s}main #second-circle{bottom:10rem;right:10rem;animation-duration:3s}@media only screen and (max-width: 700px){main .hero-content{margin:7rem 0;width:100%;min-width:0rem;padding:0 1rem}main .hero-content h1{font-size:3rem}main .hero-content h3{font-size:1.8rem}main .hero-content p{font-weight:400;font-size:1.2rem}main .hero-content .main-buttons{margin-top:3rem;display:flex;flex-direction:column}main .hero-content .main-buttons a{margin:1rem 0rem}main #first-circle{top:10rem;left:10rem;animation-duration:4s}main #second-circle{display:none}}nav{height:5rem;width:100%;justify-content:space-between;display:flex;margin:0;padding:1rem 3rem;border-bottom:2px solid #0a303e;box-sizing:border-box;align-items:center;position:sticky;top:0;z-index:1;background-color:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2}nav img{height:100%;object-fit:contain}nav .navigate-buttons{height:90%;display:flex;align-items:center}nav .navigate-buttons a{text-decoration:none;background-color:#fff0;color:#fff;border:none;font-size:1rem;font-weight:700;margin:0 1rem;transition-duration:.2s}nav .navigate-buttons a:hover{color:var(--main-blue)}@media only screen and (max-width: 650px){nav{padding:1rem}nav .navigate-buttons{display:none}}#about{width:100%;display:flex;flex-direction:column;align-items:center;margin:5rem;scroll-margin-top:5rem}#about h1{color:var(--main-blue);text-shadow:0px 0px 10px var(--main-blue);font-size:3rem;margin:0}#about .underline{height:.2rem;width:20rem;margin-top:.5rem;border-radius:60%;display:flex;justify-content:center;overflow:hidden}#about .underline .underline-content{background-color:var(--main-blue);height:100%;box-shadow:0 0 20px 20px var(--main-blue)}#about .about-content{display:flex;justify-content:space-between;align-items:center;margin-top:5rem;max-width:70rem;height:30rem}#about .about-content .content-left{width:47%;text-align:left}#about .about-content .content-left .description{border:1px solid var(--border-color);border-radius:10px;padding:1rem 2rem;margin-bottom:1rem;background-color:#060b12}#about .about-content .content-left .description p{margin:.5rem 0}#about .about-content .content-left .description p:last-child{font-size:1.1rem}#about .about-content .content-left .titles{display:flex;width:100%;justify-content:space-between}#about .about-content .content-left .titles .title{width:48%;height:5rem;border:1px solid var(--border-color);border-radius:10px;padding:.9rem 1rem;box-sizing:border-box;background-color:#001919;transition-duration:.3s}#about .about-content .content-left .titles .title img{height:50%;object-fit:contain}#about .about-content .content-left .titles .title:hover{background-color:#082f36}#about .about-content .content-right{width:47%;height:70%;display:flex;align-items:center;justify-content:center;flex-direction:column}#about .about-content .content-right .row{width:100%;display:flex;align-items:center}#about .about-content .content-right .row .skill{border:1px solid var(--border-color);border-radius:10px;display:flex;flex-direction:column;padding:1rem;width:50%;box-sizing:border-box;text-align:left;color:var(--main-blue);background:linear-gradient(to right,#001919,#000);transition-duration:.3s;margin:.5rem}#about .about-content .content-right .row .skill .img-container{height:30%}#about .about-content .content-right .row .skill .img-container img{height:100%;object-fit:contain}#about .about-content .content-right .row .skill .backgroundSkill{height:.5rem;background-color:#d3d3d3;width:100%;border-radius:12px}#about .about-content .content-right .row .skill .backgroundSkill .contentSkill{height:100%;background:linear-gradient(to right,var(--main-blue),#3a87f6);border-radius:12px}#about .about-content .content-right .row .skill p{margin:.3rem 0;font-weight:700}#about .about-content .content-right .row .skill p:last-child{font-size:.9rem;color:gray;font-weight:400}#about .about-content .content-right .row .skill:hover{background:linear-gradient(to right,#082f36,#000);scale:1.05;border:1px solid var(--main-blue)}@media only screen and (max-width: 1200px){#about{flex-direction:column;padding:0 1rem;box-sizing:border-box}#about h1{font-size:2.5rem}#about .about-content{flex-direction:column;height:auto}#about .about-content .content-left{width:100%;text-align:left}#about .about-content .content-left .titles{display:flex;flex-direction:column;width:100%;justify-content:space-between;margin-bottom:2rem}#about .about-content .content-left .titles .title{height:auto;padding:.9rem 1rem;border:none;display:flex;align-items:center;width:100%;margin:.5rem 0;background-color:#fff0}#about .about-content .content-left .titles .title img{height:auto;width:10%;margin-right:1rem}#about .about-content .content-right{width:100%;height:auto;display:flex;align-items:center;justify-content:center;flex-direction:column}#about .about-content .content-right .row{width:100%;display:flex;justify-content:center;align-items:stretch}#about .about-content .content-right .row .skill{flex:1}#about .about-content .content-right .row .skill .img-container{width:100%}#about .about-content .content-right .row .skill .img-container img{width:25%;object-fit:contain}}#portfolio{margin:5rem;max-width:70rem;display:flex;flex-direction:column;align-items:center;scroll-margin-top:5rem}#portfolio .underline{height:.2rem;width:20rem;margin-top:.5rem;border-radius:60%;display:flex;justify-content:center;overflow:hidden}#portfolio .underline .underline-content{background-color:var(--main-blue);height:100%;box-shadow:0 0 20px 20px var(--main-blue)}#portfolio h1{color:var(--main-blue);text-shadow:0px 0px 10px var(--main-blue);font-size:3rem;margin:0}#portfolio ul{width:100%;display:flex;padding:0;margin-top:5rem}#portfolio ul li{width:100%;border:1px solid var(--border-color);background:linear-gradient(to right,#001919,#000);list-style:none;margin:0 1rem;border-radius:12px;transition-duration:.3s;text-align:start;overflow:hidden}#portfolio ul li .img-container{position:relative;transition-duration:.3s}#portfolio ul li .img-container img{width:100%;height:100%;object-fit:contain;border-top-left-radius:12px;border-top-right-radius:12px}#portfolio ul li .img-container p{position:absolute;color:green;bottom:10%;left:10%;font-weight:700;font-size:.8rem;display:none}#portfolio ul li:hover{background:linear-gradient(to right,#082f36,#000);scale:1.01;border:1px solid var(--main-blue)}#portfolio ul li:hover .img-container{scale:1.05}#portfolio ul li .card-content{padding:0 1.5rem;height:16rem;display:flex;flex-direction:column}#portfolio ul li .card-content h2{color:var(--main-blue);margin:1rem 0 0}#portfolio ul li .card-content .type{color:gray;margin:0}#portfolio ul li .card-content .description{height:40%;margin-top:1rem}#portfolio ul li .card-content ul{width:100%;display:flex;align-items:start;justify-content:start;margin:0}#portfolio ul li .card-content ul li{margin:1rem .2rem;width:auto;padding:.2rem .5rem;background-color:#082c33;border-radius:5px;color:var(--main-blue);font-weight:700;font-size:.8rem}#portfolio ul li .card-content ul li:hover{scale:1}#portfolio ul li .card-content .details-container{display:flex;justify-content:space-between;color:gray;height:2.5rem;align-items:center;margin-bottom:1rem}#portfolio ul li .card-content .details-container p{margin:0;font-size:.8rem}#portfolio ul li .card-content .details-container a{background:linear-gradient(var(--main-blue),#3a87f6);border-radius:100%;padding:.5rem;box-sizing:border-box;border:none;height:100%;cursor:pointer}#portfolio ul li .card-content .details-container a img{height:100%;object-fit:contain}@media only screen and (max-width: 1300px){#portfolio h1{font-size:2.5rem}#portfolio ul{flex-direction:column}#portfolio ul li{margin:1rem 0rem}#portfolio ul li .card-content{height:auto;margin-bottom:1rem}#portfolio ul li .card-content ul{flex-direction:row}#portfolio ul li .card-content ul li:hover{border:1px solid var(--border-color)}}@keyframes lineAnimation{0%{opacity:0}50%{opacity:1}to{opacity:0}}#contact{display:flex;flex-direction:column;align-items:center;margin:5rem 3rem}#contact h1{color:var(--main-blue);text-shadow:0px 0px 10px var(--main-blue);font-size:3rem;margin:0}#contact .underline{height:.2rem;width:20rem;margin-top:.5rem;border-radius:60%;display:flex;justify-content:center;overflow:hidden}#contact .underline .underline-content{background-color:var(--main-blue);height:100%;box-shadow:0 0 20px 20px var(--main-blue)}#contact .contact-content{max-width:70rem;display:flex;text-align:left;margin-top:5rem;justify-content:space-between}#contact .contact-content .details{width:45%;display:flex;flex-direction:column}#contact .contact-content .details .animation{width:100%;border:1px solid var(--border-color);border-radius:12px;padding:1rem 2rem;box-sizing:border-box}#contact .contact-content .details .animation .email{margin-bottom:1rem;color:#3aaf67;display:flex;align-items:center;height:1rem}#contact .contact-content .details .animation .email p{-webkit-user-select:text;-ms-user-select:text;user-select:text}#contact .contact-content .details .animation .email .line{margin-left:.1rem;width:.3rem;height:100%;background-color:#3aaf67;animation:lineAnimation;animation-iteration-count:infinite;animation-duration:1s}#contact .contact-content .details a{color:#fff;text-decoration:none;margin:3rem 0 1rem;display:flex;align-items:center;transition-duration:.3s;width:auto}#contact .contact-content .details a img{width:5%;object-fit:contain;margin-right:1rem}#contact .contact-content .details a:hover{color:var(--main-blue)}#contact .contact-content .details a:last-child{margin-top:1rem}#contact .contact-content .form-container{width:45%;display:flex;flex-direction:column;position:relative}#contact .contact-content .form-container input{margin:1rem 0;padding:1rem;background-color:#fff0;color:#fff;border:1px solid var(--border-color);border-radius:10px}#contact .contact-content .form-container input:focus{outline:1px solid var(--main-blue);border:1px solid var(--main-blue)}#contact .contact-content .form-container textarea{margin:1rem 0;padding:1rem;background-color:#fff0;color:#fff;border:1px solid var(--border-color);border-radius:10px;resize:none;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;height:6rem}#contact .contact-content .form-container textarea:focus{outline:1px solid var(--main-blue);border:1px solid var(--main-blue)}#contact .contact-content .form-container button{border:2px solid var(--main-blue);height:3rem;display:flex;align-items:center;justify-content:center;font-weight:700;padding:.2rem 1.5rem;color:var(--main-blue);box-shadow:0 0 10px 1px var(--main-blue);cursor:pointer;transition-duration:.3s;background-color:#fff0;margin-top:1rem}#contact .contact-content .form-container button:hover{background-color:var(--main-blue);color:#000}#contact .contact-content .form-container .info{position:absolute;background-color:#06070c;border:1px solid var(--main-blue);padding:1rem 2rem;border-radius:10px;bottom:20%;left:50%;transform:translate(-50%)}@media only screen and (max-width: 700px){#contact{padding:0 1rem}#contact h1{font-size:2.5rem}#contact .contact-content{flex-direction:column;justify-content:space-between}#contact .contact-content .details{width:100%;display:flex;flex-direction:column}#contact .contact-content .details a{margin-left:.5rem}#contact .contact-content .form-container{width:100%;display:flex;flex-direction:column}#contact .contact-content .form-container input{margin:1rem 0;padding:1rem;background-color:#fff0;color:#fff;border:1px solid var(--border-color);border-radius:10px}#contact .contact-content .form-container input:focus{outline:1px solid var(--main-blue);border:1px solid var(--main-blue)}#contact .contact-content .form-container textarea{margin:1rem 0;padding:1rem;background-color:#fff0;color:#fff;border:1px solid var(--border-color);border-radius:10px;resize:none;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;height:6rem}#contact .contact-content .form-container textarea:focus{outline:1px solid var(--main-blue);border:1px solid var(--main-blue)}#contact .contact-content .form-container button{border:2px solid var(--main-blue);height:3rem;display:flex;align-items:center;justify-content:center;font-weight:700;padding:.2rem 1.5rem;color:var(--main-blue);box-shadow:0 0 10px 1px var(--main-blue);cursor:pointer;transition-duration:.3s;background-color:#fff0;margin-top:1rem}#contact .contact-content .form-container button:hover{background-color:var(--main-blue);color:#000}}footer{margin:2rem 0;border-top:1px solid var(--main-blue);width:100%;padding-top:1rem}footer p:first-child{color:var(--main-blue)}@media only screen and (max-width: 600px){footer{padding:1rem;box-sizing:border-box}}