*{margin:0;padding:0;box-sizing:border-box;font-family:Plus Jakarta Sans,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#root{width:100%}a{display:contents;color:inherit;text-decoration:none}a.active{display:contents;font-weight:800;color:#75cc00;text-decoration:none;transition:.3s ease-in-out}.container.light-mode a.active{color:#4fc3f7}.container{width:100%;background:#00050f;transition:.3s ease-in-out;position:relative;padding:0 3%;overflow-x:hidden;z-index:0}.container.light-mode{background:#f4f7fd}.container h1,.container h2,.container h3,.container input,.container textarea{color:#fff;transition:.3s ease-in-out}.container.light-mode h1,.container.light-mode h2,.container.light-mode h3,.container.light-mode input,.container.light-mode textarea{color:#00050f}.container p,.container h5,.container h6{color:#e5e5e5;transition:.3s ease-in-out}.container.light-mode p,.container.light-mode h5,.container.light-mode h6{color:#333}header{width:100%;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 3%;position:fixed;top:10px;left:0;transition:.3s ease-in-out;background:transparent;z-index:100}header.scrolled{background:#00050f;top:0;opacity:.99;box-shadow:0 0 10px #90ff00}.container.light-mode header.scrolled{background:#f4f7fd;box-shadow:0 0 10px #0003}.logo{width:50px;height:50px;border-radius:50%;border:1px solid #00050F;cursor:pointer;transition:.3s ease-in-out}.logo:hover{border:1.5px solid #90FF00}.container.light-mode .logo:hover{border-color:#4fc3f7}span.click,div.click,.mobile-nav-container{display:none}header nav.desktop-nav{display:flex;align-items:center;justify-content:space-between;width:35%;margin-right:2%}header nav h3{text-transform:capitalize;text-decoration:none;font-size:1rem;font-weight:600;cursor:pointer;transition:.3s ease-in-out}header nav h3:hover{color:#90ff00}.container.light-mode nav h3:hover{color:#4fc3f7}.light-dark-mode{width:24px;position:absolute;top:36%;right:1%;cursor:pointer;transition:.3s ease-in-out}.light-dark-mode:hover,.light-dark-mode.clicked{width:26px;animation:mode-turn 1.5s .35s 1 forwards ease-in-out}.changed-mode-move{animation:mode-turn 1.5s 1 forwards ease-in-out}@keyframes mode-turn{0%{rotate:0deg}40%,50%{rotate:180deg}99%{rotate:0deg}}@media only screen and (max-width: 800px){div.click{display:flex;justify-content:center;align-items:center;height:35px;width:40px;z-index:20;margin-right:1%}span.click{display:block;width:30px;height:2.5px;background:#fff;position:relative;transition:.3s ease-in-out;z-index:20}span.click:before,span.click:after{content:"";position:absolute;width:30px;height:2.5px;background:#fff;transition:.3s ease-in-out;z-index:20}.container.light-mode span.click,.container.light-mode span.click:before,.container.light-mode span.click:after{background:#00050f}span.click:before{bottom:7px}span.click:after{top:7px}span.click.close,.container.light-mode span.click.close{background:transparent}span.click.close:before{transform:rotate(-135deg);bottom:0}span.click.close:after{transform:rotate(135deg);top:0}.mobile-nav-container{display:block;background:#00000080;position:fixed;top:-110%;left:0;width:100%;height:100%;display:flex;justify-content:center;transition:.3s ease-in-out}.mobile-nav-container.open{top:0}.mobile-nav{background:#f4f7fd;width:40%;height:400px;margin-top:10%;display:flex;flex-direction:column;align-items:center;gap:30px;padding:5% 2%;border-radius:5px;box-shadow:2px 2px 20px 5px #0003;color:#00050f}.mobile-nav h3{color:#00050f;font-size:1.3rem}.change-mode{margin-top:10%;display:flex;gap:7px;align-items:center;justify-content:space-between}.fa-icon{font-size:1.2rem}.change-mode span{display:block;width:50px;height:20px;background:#00050f;border-radius:20px;position:relative;transition:.3s ease-in-out}.change-mode span:before{content:"";background:#f4f7fd;width:15px;height:15px;border-radius:50%;position:absolute;top:2.5px;left:3px;transition:.3s ease-in-out}.container.light-mode .change-mode span:before{left:32px}header nav.desktop-nav,.light-dark-mode{display:none}}@media only screen and (max-width: 500px){.mobile-nav{width:70%;margin-top:20%}}.banner-intro{position:relative}span.eclipse{width:390px;height:200px;display:block;position:absolute;top:140px;left:270px;background:transparent;border-radius:50%;rotate:-10deg}span.eclipse:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;padding:2px;background:linear-gradient(90deg,#d5f60c1a,#d5f60c1a 30%,#4269f6cc 80%,#4269f6cc);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask-composite:xor;z-index:-1;transition:.3s ease-in-out}.container.light-mode span.eclipse:before{background:linear-gradient(90deg,#d5f60c1a,#4269f6cc)}span.blur{display:block;width:450px;height:450px;background:#1c2b28;filter:blur(150px);position:absolute;top:50px;left:3%;transition:.3s ease-in-out;z-index:-1}.container.light-mode span.blur{background:#ced7d3}img.star{width:24px;position:absolute}img.star:nth-of-type(1){top:129px;left:550px;rotate:8deg}img.star:nth-of-type(2){top:329px;left:380px;rotate:6deg}@media only screen and (max-width: 800px){span.eclipse{left:100px}img.star:nth-of-type(1){left:380px}img.star:nth-of-type(2){left:210px;display:none}}@media only screen and (max-width: 500px){span.eclipse{left:50px;width:290px;height:150px}img.star:nth-of-type(1){top:129px;left:250px}img.star:nth-of-type(2){top:275px;left:100px;rotate:12deg}}.banner-intro{z-index:1;display:flex;justify-content:space-between;align-items:center;padding-top:150px}.banner-info{width:55%}.banner-info h2{width:95%;font-size:3rem;font-weight:700;margin-bottom:20px}.banner-info p{width:90%;font-size:1.1rem;font-weight:500;margin-bottom:40px}.banner-info button{width:170px;height:45px;border-radius:60px;font-size:1rem;font-weight:600;text-transform:capitalize;cursor:pointer;outline:none;transition:.3s ease-in-out}.contact-me-button{border:none;margin-right:20px;color:#00050f;background:#90ff00}.contact-me-button:hover{background:#5ba100}.container.light-mode .contact-me-button{background:#457b9d;color:#fff}.container.light-mode .contact-me-button:hover{background:#4fc3f7}.explore-projects-button{border:1px solid #90FF00;color:#90ff00;background:transparent}.container.light-mode .explore-projects-button{border-color:#4fc3f7;color:#4fc3f7}.explore-projects-button:hover{border:1px solid #5ba100;color:#5ba100;background:#00050f}.container.light-mode .explore-projects-button{background:#00050f}.container.light-mode .explore-projects-button:hover{background:#1c2b28;border-color:#457b9d}.banner-images{position:relative}.legend-banner-image{width:450px;border-radius:50%;transition:.3s ease-in-out}.legend-banner-image:hover{animation:border-swirl 30s infinite ease-in-out 8s}img.legend-banner-star{position:absolute;top:50px;right:50px}.legend-banner-image:hover~img.legend-banner-star{animation:revolve 5s 2s linear 1 forwards}@keyframes revolve{0%,to{rotate:0deg;top:50px;right:50px}25%,75%{rotate:-180deg;top:-70px;right:215px}50%{rotate:-359deg;top:50px;right:380px}}img.pointer{position:absolute;width:180px;top:65%;left:48%}@media only screen and (max-width: 800px){.banner-info h2{font-size:2.2rem}.banner-info p{font-size:.8rem}.banner-info button{width:150px;height:35px;font-size:.8rem}.legend-banner-image{width:300px}img.legend-banner-star{width:20px}img.pointer{width:100px;top:75%}}@media only screen and (max-width: 500px){.banner-intro{flex-direction:column-reverse}.banner-info{width:100%}.banner-info h2{font-size:1.8rem}.banner-info p{font-size:1rem}.banner-info button{width:140px;height:35px;font-size:.8rem}.legend-banner-image{width:350px;margin-bottom:20px}img.legend-banner-star,img.pointer{display:none}}.about-me{margin-top:150px}.about-me section{display:flex;align-items:center;justify-content:space-between;margin-bottom:50px}.about-me-text h4{font-size:1.2rem;font-weight:700;color:#90ff00;text-transform:capitalize;word-spacing:1px;margin-bottom:20px}.container.light-mode .about-me-text h4{color:#457b9d}.about-me-text h3{font-size:2.5rem;font-weight:700;width:65%;margin-bottom:40px}.about-me-text button,.view-all button,.skills h5{width:170px;height:45px;border-radius:60px;font-size:1rem;font-weight:600;cursor:pointer;outline:none;transition:.3s ease-in-out;background:transparent;border:1px solid #FAFAFA;color:#fff}.about-me-text button:hover,.view-all button:hover,.skills h5:hover{color:#90ff00;border:1px solid #90FF00}.container.light-mode .about-me-text button,.container.light-mode .view-all button,.container.light-mode .skills h5{border:1px solid #00050F;color:#00050f}.container.light-mode .about-me-text button:hover,.container.light-mode .view-all button:hover,.container.light-mode .skills h5:hover{color:#4fc3f7;border:1px solid #4FC3F7}.about-me-second-section p{width:60%;float:right}.about-me-second-section svg{margin-left:-6.5%}@media only screen and (max-width: 800px){.about-me{margin-top:100px}.about-me-text h4{font-size:1rem}.about-me-text h3{font-size:2.1rem}.about-me-text button,.view-all button,.skills h5{width:150px;height:35px;font-size:.8rem}.about-me-second-section p{font-size:.8rem}}@media only screen and (max-width: 500px){.about-me-text h3{font-size:1.8rem;font-weight:700;margin-bottom:20px;width:95%}.about-me-text button,.view-all button,.skills h5{width:150px;height:35px;font-size:.8rem}.about-me-second-section p{width:65%;font-size:.8rem}.about-me-second-section svg{margin-left:-10.5%}}.development-section{position:relative;margin-top:200px;cursor:default}.development-section section,.skills-and-services section{width:130%;padding:1%;display:flex;align-items:center;background:#90ff00;margin-left:-10%}.container.light-mode .development-section section,.container.light-mode .skills-and-services section{background:#4fc3f7}.development-section section div,.skills-and-services section div{display:flex;align-items:center}.development-section section h6,.skills-and-services section h6{font-size:1.7rem;font-weight:500;text-transform:capitalize;color:#131313;margin-left:35px}.development-section section span,.skills-and-services section span{display:block;width:15px;height:15px;border-radius:50%;background:#131313;margin-left:35px}.development-section section:nth-of-type(1){rotate:-7deg;opacity:.2}.development-section section:nth-of-type(2){rotate:7deg}@media only screen and (max-width: 800px){.development-section{margin-top:100px}.development-section section h6,.skills-and-services section h6{font-size:1rem;margin-left:25px}.development-section section span,.skills-and-services section span{width:10px;height:10px;margin-left:25px}}@media only screen and (max-width: 500px){.development-section section h6,.skills-and-services section h6{font-size:.7rem;margin-left:15px}.development-section section span,.skills-and-services section span{width:5px;height:5px;margin-left:15px}}.project-section{margin-top:200px;z-index:0}.project-section section:nth-of-type(1){display:flex;align-items:center;justify-content:space-between;margin-bottom:50px}.selected-works h3{font-size:2rem;font-weight:600;margin-bottom:10px}.view-all{width:25%}.view-all p{font-size:1rem;font-weight:600;line-height:23px;margin-bottom:20px}.project-section section:nth-of-type(2),.actual-projects{display:grid;grid-template-columns:1fr 1fr 1fr;gap:80px 30px}.single-project{width:100%;height:250px;position:relative;cursor:pointer}.single-project img{width:100%;height:80%;border-radius:20px;border:10px solid #393939;transition:.3s ease-in-out}.container.light-mode .single-project img{border:10px solid #b0b0b0}.single-project article{margin-top:15px;transition:.3s ease-in-out}.single-project article h6{font-size:1.2rem;font-weight:600;text-transform:capitalize;margin-bottom:5px}.single-project article p{font-size:.8rem;font-weight:600}.single-project .hovered{position:absolute;left:0;bottom:-85px;width:100%;height:0;background:#1a1d29;border-radius:10px;display:flex;justify-content:center!important;flex-direction:column;gap:20px;overflow:hidden;transition:.3s ease-in-out;opacity:.9}.container.light-mode .single-project .hovered{background:#e5e5e5}.single-project .hovered p{line-height:1.25rem;word-spacing:2px;font-size:.85rem}.single-project.whole .hovered{bottom:-35px}.single-project:hover article{opacity:0}.single-project:hover .hovered{height:115%;padding:5%}.single-project .hovered h4,.single-project .hovered p{color:#fff}.container.light-mode .single-project .hovered h4,.container.light-mode .single-project .hovered p{color:#00050f}.single-project .hovered h4{text-align:center}.single-project .hovered p{font-size:.85rem}@media only screen and (max-width: 800px){.project-section{margin-top:150px}.selected-works h3{font-size:1.8rem}.view-all p{font-size:.9rem}.project-section section:nth-of-type(2),.actual-projects{grid-template-columns:1fr 1fr}.single-project img{border:7px solid #1E1E1E}.container.light-mode .single-project img{border:7px solid #b0b0b0}.single-project article{margin-top:10px}.single-project article h6{font-size:1rem}.single-project article p{font-size:.8rem}}@media only screen and (max-width: 500px){.project-section{margin-top:100px}.selected-works h3{font-size:1.2rem}.view-all{width:45%}.view-all p{font-size:.7rem;line-height:16px;margin-bottom:10px}.project-section section:nth-of-type(2),.actual-projects{grid-template-columns:1fr}.single-project img{border:5px solid #1E1E1E}.container.light-mode .single-project img{border:5px solid #b0b0b0}.single-project article{margin-top:5px}}.skills-and-services{margin-top:150px;position:relative}span.down-blur{display:block;width:550px;height:550px;background:#1c2b28;filter:blur(100px);position:absolute;top:-200px;right:-10%;transition:.3s ease-in-out;z-index:-1}.container.light-mode span.down-blur{background:#ced7d3}svg.down-svg{position:absolute;top:-15%;right:-5.5%}.skills-and-services h3{font-size:2rem;font-weight:600;margin-bottom:40px}.skills-and-services p{font-size:1rem;font-weight:600;margin-bottom:30px;width:70%}.skills{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:120px}.skills h5{display:flex;justify-content:center;align-items:center;margin-bottom:30px}@media only screen and (max-width: 800px){.skills-and-services{margin-top:100px}.skills-and-services h3{font-size:1.8rem}.skills-and-services p{font-size:.85rem}.skills{grid-template-columns:repeat(4,1fr);margin-bottom:80px}}@media only screen and (max-width: 500px){.skills-and-services h3{font-size:1.3rem;margin-bottom:20px}.skills-and-services p{font-size:.85rem;margin-bottom:30px;width:85%}.skills{grid-template-columns:repeat(2,1fr);margin-bottom:50px}.skills h5{margin-bottom:20px}}.footer{margin-top:150px;width:107%;margin-left:-3.5%;background:#000;padding:2% 3%}.container.light-mode .footer{background:#2c3e50}.footer h2 a{color:#90ff00;cursor:pointer}.container.light-mode .footer h2 a{color:#4fc3f7}.footer section{width:100%;display:flex;justify-content:space-between;align-items:center}.footer section h5{font-size:1.7rem;font-weight:600;color:#fff;display:flex;align-items:center;gap:15px}.container.light-mode .footer section h5,.container.light-mode .footer section h6,.container.light-mode .footer h2,.container.light-mode .footer section a{color:#fff}.container.light-mode .footer section:nth-of-type(2) p,.container.light-mode .footer-icon{color:#00050f}.footer section h5 span{display:block;width:20px;height:20px;border-radius:50%;background:#fff}.footer section:nth-of-type(1) a{font-size:1.5rem;font-weight:600;color:#fff}.footer h2{text-align:center;font-size:3rem;width:80%;margin:40px 10%}.footer section:nth-of-type(2){background:#23252a;width:107%;margin-left:-3.5%;padding:0 3%}.container.light-mode .footer section:nth-of-type(2){background:#b0bec5}.footer section:nth-of-type(2) div{display:flex;align-items:center;gap:10px;margin-left:10%}.footer section:nth-of-type(2) div .footer-icon{border:none;border-radius:50%;background:#90ff00;width:25px;height:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:2%}.container.light-mode .footer section:nth-of-type(2) div .footer-icon{background:#4fc3f7}.footer section:nth-of-type(2) p{font-size:.7rem}@media only screen and (max-width: 800px){.footer{margin-top:150px}.footer section h5{font-size:1.2rem;gap:10px}.footer section:nth-of-type(1) a{font-size:1.2rem}.footer section h5 span{width:15px;height:15px}.footer section h6{font-size:.8rem}.footer h2{font-size:2.5rem}.footer section:nth-of-type(2) div figure{width:20px;height:20px}.footer section:nth-of-type(2) p{font-size:.6rem}}@media only screen and (max-width: 500px){.footer section h5{font-size:.85rem;gap:5px}.footer section:nth-of-type(1) a{font-size:.85rem}.footer section h5 span{width:10px;height:10px}.footer section h6{font-size:.7rem}.footer h2{font-size:1.5rem}.footer section:nth-of-type(2) div{display:flex;align-items:center;gap:10px;margin-left:10%}.footer section:nth-of-type(2) div .footer-icon{width:25px;height:25px;padding:2%}.footer section:nth-of-type(2) p{font-size:.35rem}}.project-page-top{padding-top:150px;margin-bottom:60px}.project-page-top h2{font-size:3rem;width:40%;margin-bottom:30px}.project-page-top p{font-size:1rem;width:65%;font-weight:600}.blur-div{position:relative}@media only screen and (max-width: 800px){.project-page-top{margin-bottom:30px}.project-page-top h2{font-size:2.5rem;width:100%;margin-bottom:20px}.project-page-top p{font-size:.8rem;width:75%}}@media only screen and (max-width: 500px){.project-page-top{margin-bottom:20px}.project-page-top h2{font-size:2rem}.project-page-top p{font-size:.8rem;width:100%}}.professional-projects,.liked-projects{overflow:hidden;position:relative}.professional-header{margin-top:30px;background:linear-gradient(135deg,#7acc5b 1%,#1a1d29 80%);border-radius:5px;padding:1% 2%;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.container.light-mode .professional-header{background:linear-gradient(135deg,#a8dadc 10%,#f1faee 70%,#457b9d)}.professional-header div{width:80%}.professional-header h3{margin-bottom:10px;font-size:1.5rem;font-weight:900}.professional-header p{font-size:.9rem}.professional-header svg{width:35px;height:35px}.actual-projects{max-height:0;transition:all .5s ease-in-out;margin:0 20px}.actual-projects.projects-opened{max-height:999999px;margin:30px 20px 60px;transition:all .5s ease-in-out}@media only screen and (max-width: 800px){.professional-header{margin-top:20px}.professional-header h3{font-size:1.3rem}.professional-header p{font-size:.8rem}.professional-header svg{width:30px;height:30px}}@media only screen and (max-width: 500px){.professional-header{margin-top:15px}.professional-header h3{margin-bottom:5px;font-size:1rem}.professional-header p{font-size:.75rem}.professional-header svg{width:25px;height:25px}}.contact-page{padding:2rem;font-family:Arial,sans-serif;background:linear-gradient(to bottom right,#1a1d29,#00050f);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:100px;transition:.3s ease-in-out}.container.light-mode .contact-page{background:linear-gradient(to bottom right,#f4f7fd,#dce4f2);transition:.3s ease-in-out}.contact-title{font-size:2.5rem;color:#23252a;margin-bottom:1.5rem}.contact-container{display:flex;flex-wrap:wrap;gap:2rem;width:80%;max-width:1200px}@media only screen and (max-width: 800px){.contact-container{width:100%}}.contact-form{flex:1;background:#444;padding:2rem 1.5rem;border-radius:8px;box-shadow:0 4px 10px #ffffff1a;animation:fadeIn 1s ease}.container.light-mode .contact-form{background:#fff}.form-group{position:relative;margin-bottom:1.5rem}.form-group input,.form-group textarea{width:100%;padding:.5rem;border:2px solid #666;border-radius:4px;outline:none;transition:.3s;color:#fff;background:transparent;resize:none}.container.light-mode .form-group input,.container.light-mode .form-group textarea{color:#00050f;border:2px solid #ccc}.form-group input:focus,.form-group textarea:focus{border-color:#e3e3e3;box-shadow:0 0 8px #c0c0c099}.container.light-mode .form-group input:focus,.container.light-mode .form-group textarea:focus{border-color:#4d4d4d;box-shadow:0 0 8px #4d4d4d99}.form-group label{position:absolute;top:.5rem;left:.5rem;font-size:.9rem;color:#aaa;pointer-events:none;transition:.3s}.form-group input:focus+label,.form-group textarea:focus+label,.form-group input:not(:placeholder-shown)+label,.form-group textarea:not(:placeholder-shown)+label{top:-1.1rem;left:.5rem;font-size:.75rem;color:#e3e3e3}.container.light-mode .form-group input:focus+label,.container.light-mode .form-group textarea:focus+label,.container.light-mode .form-group input:not(:placeholder-shown)+label,.container.light-mode .form-group textarea:not(:placeholder-shown)+label{color:#4d4d4d}.btn-submit{display:block;width:100%;background:#23252a;color:#fff;padding:.75rem;border:none;border-radius:4px;cursor:pointer;word-spacing:2px;transition:.3s ease-in-out}.btn-submit:hover{background:#555;color:#aaa}.btn-submit.disabled{opacity:.7;background:#555;color:#aaa;cursor:default}p.error-text,.container.light-mode p.error-text{color:#fb5050;font-size:.6rem;font-weight:600;float:right;text-align:right;margin-bottom:.5rem}@media only screen and (max-width: 500px){.form-group{margin-bottom:2rem}.form-group label{font-size:.8rem}.form-group input:focus+label,.form-group textarea:focus+label,.form-group input:not(:placeholder-shown)+label,.form-group textarea:not(:placeholder-shown)+label{font-size:.7rem}}@media only screen and (max-width: 330px){.form-group label{font-size:.65rem}.form-group input:focus+label,.form-group textarea:focus+label,.form-group input:not(:placeholder-shown)+label,.form-group textarea:not(:placeholder-shown)+label{font-size:.55rem}}.social-links{flex:1;text-align:center}.icons{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem}.icon{font-size:2rem;color:#e8e9eb;transition:.3s ease-in-out}.container.light-mode .icon{color:#23252a;transition:.3s ease-in-out}.icon:hover{color:#90ff00}.container.light-mode .icon:hover{color:#4fc3f7}.hire-me-section{text-align:center;margin-top:5rem}.hire-me-section p{margin:5px 0}.btn-hire{display:inline-block;background:#23252a;color:#fff;padding:.75rem 1.5rem;border-radius:4px;text-decoration:none;font-weight:700;transition:.3s;outline:none;border:none;margin-top:15px}.btn-hire:hover{background:#4d4d4d}.status-message{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:15px}.status-message p{font-size:1rem;font-weight:600;text-align:center}@media only screen and (max-width: 500px){.btn-hire{margin-top:20px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.about-me-container{max-width:1200px;margin-top:100px!important;margin:0 auto;padding:2rem;text-align:center;color:#333}.about-title{font-size:3rem;color:#4d90fe;margin-bottom:1.5rem;text-transform:uppercase;font-weight:700;letter-spacing:2px}.about-content{display:flex;flex-direction:column;align-items:center;gap:2rem}.personal-info p{font-size:1.2rem;line-height:1.8;margin-bottom:1rem}.skills-section{text-align:center;margin-top:2rem}.skills-section h2{font-size:2rem;color:#555;margin-bottom:1rem}.skills-grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:1.5rem;margin-top:1rem}.skill-card{background:linear-gradient(135deg,#f4f7fd,#e0e7ff);border:1px solid #ddd;padding:1rem;border-radius:8px;text-align:center;transition:all .3s ease;box-shadow:0 4px 6px #0000001a}.skill-card svg{font-size:2.5rem;color:#4d90fe;margin-bottom:.5rem}.skill-card:hover{transform:translateY(-5px);box-shadow:0 6px 10px #0003}.skill-card p{font-size:1rem;color:#444}.fun-fact{margin-top:50px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:30px}.fun-fact h2{font-size:1.7rem;word-spacing:3px;margin-bottom:30px}.fun-fact p{font-size:1.1rem;word-spacing:2px;text-align:center}.fun-fact button{font-size:1rem;font-weight:800;border-radius:50%;cursor:pointer;border:none;outline:none;width:100%;height:100%;background:linear-gradient(135deg,#90ff00,#e0e7ff);transition:.3s ease-in-out}.fun-fact button:hover{background:linear-gradient(135deg,#e0e7ff,#90ff00)}.container.light-mode .fun-fact button{color:#fff;background:linear-gradient(135deg,#4fc3f7,#e0e7ff)}.container.light-mode .fun-fact button:hover{background:linear-gradient(135deg,#e0e7ff,#4fc3f7)}.button-motion{width:110px;height:40px}@media only screen and (max-width: 500px){.about-title{font-size:2.5rem}.personal-info p{font-size:1rem;text-align:left}.skills-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}}.preloader{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;right:0;bottom:0;z-index:1000;background:#00050f;color:#fff;opacity:1;transition:.5s ease-in-out}.preloader~.container{height:100vh;scrollbar-width:none}.preloader-blur{position:absolute;left:15%;top:0}.preloader-entry-text{display:flex;align-items:center;gap:10px;justify-content:space-between;height:50px;width:100%;overflow:hidden}.preloader-entry-text p{font-size:1.5rem;font-weight:700;text-transform:uppercase;margin-top:0;transition:.5s ease-in-out;font-family:Rubik Vinyl,serif}.preloader-entry-text.display p:nth-of-type(1){margin-top:-100px;transition:.5s ease-in-out}.preloader-entry-text.display p:nth-of-type(2){margin-top:100px;transition:.5s ease-in-out}.preloader-entry-text.display div{width:.1px;height:.1px;transition:.5s .5s ease-in-out}.preloader-entry-text div{width:50px;height:50px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:.5s .8s ease-in-out;overflow:hidden}.preloader-entry-text img{width:50px;height:50px;border-radius:50%;transition:.5s .8s ease-in-out;animation:flow infinite 4s 3.5s linear}@keyframes flow{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.preloader-fun-facts{float:right;color:#90ff00!important;font-family:Rubik Vinyl,serif;opacity:0;transition:.5s .5s ease-in-out}.preloader-fun-facts.display{opacity:1;transition:.5s 3s ease-in-out}.preloader.fade-away{opacity:0;transition:.5s ease-in-out}@media only screen and (max-width: 500px){.preloader-display{width:100%}.preloader-entry-text{height:130px;width:100%;flex-direction:column;justify-content:center;position:relative}.preloader-entry-text p{position:absolute}.preloader-entry-text.display p:nth-of-type(1){margin-top:0;top:-40px;transition:.5s ease-in-out}.preloader-entry-text.display p:nth-of-type(2){margin-top:100px;top:40px;transition:.5s ease-in-out}.preloader-entry-text p:nth-of-type(1){top:0;left:10px}.preloader-entry-text p:nth-of-type(2){top:100px;right:10px}}.resume-container{display:flex;justify-content:center;align-items:center;margin:30px 0;gap:20px}@media only screen and (max-width: 400px){.resume-container{flex-direction:column}}.resume{max-width:300px;width:fit-content;margin:0 auto;padding:15px;border-radius:30px;cursor:pointer;font-size:16px;font-weight:600}.about-resume-container{display:flex;justify-content:center;align-items:center;gap:10px;max-width:300px;margin:30px 0 30px auto}:root,body{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}@media (prefers-color-scheme: light){:root,body{background:#fff}}