@import url(https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap);.App{font-family:sans-serif}:root{--color-bg-main:#070f2b;--color-bg-section:#1b1a55;--color-primary:#535c91;--color-accent:#9290c3}body{background-color:#070f2b;background-color:var(--color-bg-main);font-family:Segoe UI,sans-serif;margin:0}body,footer,header{color:#9290c3;color:var(--color-accent)}footer,header{padding:20px;text-align:center}section{border-radius:10px;margin:70px 20px 20px;padding:40px}h1,h2,h3{color:#fff}.contact-btn,button{background-color:#ffe28a;border:none;border-radius:8px;color:#1b1a55;font-weight:700;padding:12px 24px;transition:.3s}.contact-btn:hover,button:hover{background-color:#e0dfff;color:#070f2b}a{color:#9290c3;color:var(--color-accent);text-decoration:none}a:hover{text-decoration:underline}i{color:#9290c3;color:var(--color-accent);font-size:20px;margin-right:8px;transition:color .3s ease,transform .3s ease}i:hover{color:#535c91;color:var(--color-primary);transform:scale(1.2)}header{left:0;padding:20px;position:fixed;top:0;width:100%;z-index:1000}.nav-list{display:flex;gap:30px;justify-content:center;list-style:none}.nav-list li a{font-size:18px;font-weight:700;text-decoration:none;transition:color .3s}.home-container{align-items:center;display:flex;flex-direction:column;padding-top:100px;text-align:center}.home-container img{border:3px solid #535c91;border-radius:50%;box-shadow:0 0 10px #9290c366,0 8px 20px #9290c326;height:150px;object-fit:cover;width:150px}.home-container h1{font-size:1.8rem;font-weight:700;letter-spacing:1px;margin-top:1rem;text-align:center;text-shadow:1px 1px 2px #0000004d}.home-container p{font-size:18px}.animated-role{color:#e0dfff;font-size:1.2rem;font-weight:500;letter-spacing:.5px;margin-bottom:.5rem;margin-top:.5rem;text-align:center;text-shadow:1px 1px 2px #535c914d}.words:before{animation:changeWords 6s infinite;color:#ffe28a;content:"Front-end Developer"}@keyframes changeWords{0%{content:"Front-end Developer"}33%{content:"Creative Coder"}66%{content:"UI Lover"}to{content:"Front-end Developer"}}.contact-icons{gap:1rem;margin:1rem 0}.about,.contact-icons{display:flex;justify-content:center}.about{align-items:center;min-height:80vh;padding:60px 10%}.about-content{max-width:800px}.about-content h2{font-size:2rem;margin-bottom:20px}.about-content p{font-size:1.1rem;line-height:1.6;margin-bottom:30px}.about-info{display:flex;flex-wrap:wrap;gap:40px;margin-bottom:30px}.about-info div h3{font-size:1.2rem;margin-bottom:5px}.about-info div p{font-size:1rem}.project-section{margin-top:60px;padding:0 20px;text-align:center}.project-section h2{border-bottom:2px solid #60a5fa;display:inline-block;font-size:30px;margin-bottom:30px;padding-bottom:8px}.project-grid{grid-gap:20px;align-items:stretch;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));justify-items:center;margin:0 auto;max-width:1200px;padding:0 20px}:root{--d:0.4s;--e:ease-in-out;--font-serif:"Cardo",serif}.page-content{grid-gap:2rem;display:grid;gap:2rem;padding:2rem}@media (min-width:600px){.page-content{grid-template-columns:repeat(2,1fr)}}@media (min-width:800px){.page-content{grid-template-columns:repeat(4,1fr)}}.card{align-items:flex-end;background-position:50%;background-size:cover;border-radius:12px;box-shadow:0 4px 10px #0006;color:#f5f5f5;display:flex;height:400px;height:350px;overflow:hidden;padding:1rem;position:relative;transition:transform .3s ease-in-out;width:300px}.card:hover{transform:scale(1.02)}.card .overlay{background-image:linear-gradient(0deg,#000c,#0000);height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%;z-index:0}.card .content{background:#0000;opacity:0;position:relative;text-align:center;transform:translateY(100%);transition:transform .5s ease,opacity .5s ease;z-index:1}.card .title{font-family:Rubik,sans-serif;font-size:1.3rem;font-weight:700}.card .copy{font-family:Cardo,serif;font-family:var(--font-serif);font-size:1rem;font-style:italic;margin-top:.5rem}.card .btn{color:#fff;cursor:pointer;font-size:.75rem;font-weight:700;margin-top:1rem;padding:.5rem 1rem;transition:background .3s,transform .3s}.card .btn:hover{color:#8a8fce;transform:scale(1.05)}@media (hover:hover){.card:hover .overlay{opacity:1}.card:hover .content{opacity:1;transform:translateY(0)}}.card.active .overlay{opacity:1}.card.active .content{opacity:1;transform:translateY(0)}*{box-sizing:border-box;margin:0;padding:0}#contact{font-family:Rubik,sans-serif;padding:60px 20px}.section-header{font-size:48px;letter-spacing:4px;margin-bottom:40px;text-align:center;text-transform:uppercase}.contact-wrapper{display:flex;flex-direction:column;gap:40px;margin:auto;max-width:1200px}@media (min-width:768px){.contact-wrapper{flex-direction:row;justify-content:space-between}}form{flex:1 1}.form-control{background:#222;border:none;border-radius:8px;font-size:16px;margin-bottom:20px;padding:15px;transition:.3s;width:100%}.form-control:focus{background:#333;box-shadow:0 0 5px #00c6ff;outline:none}.direct-contact-container{flex:1 1}.contact-list{list-style:none;margin-bottom:20px;padding:0}.list-item{align-items:center;display:flex;gap:15px;margin-bottom:20px}.list-item i{color:#00c6ff;font-size:20px}.contact-text a{color:#ddd;text-decoration:none;transition:.3s}.contact-text a:hover{color:#00c6ff}.social-media-list{display:flex;gap:15px;justify-content:center;list-style:none;margin-bottom:20px}.contact-icon{font-size:24px;transition:.3s}.contact-icon:hover{transform:scale(1.1)}hr{border:none;border-top:1px solid #333;margin:20px 0}.copyright{font-size:14px;text-align:center}.skills-section{align-items:center;color:#fff;display:flex;flex-direction:column;padding:2rem}.skills-title{color:#ffe28a;font-size:2rem;margin-bottom:2rem}.skills-wrapper{align-items:flex-start;gap:3rem;width:100%}.skills-grid,.skills-wrapper{display:flex;flex-wrap:wrap;justify-content:center}.skills-grid{gap:1.5rem;max-width:600px}.skill-card{background-color:#1b1a55;border-radius:10px;box-shadow:0 0 10px #0003;color:#fff;padding:1rem;text-align:center;transition:transform .3s;width:180px}.skill-card:hover{transform:scale(1.05)}.skill-card i{font-size:2.5rem;margin-bottom:.5rem}.skill-card p{font-weight:700;margin-bottom:.5rem}.skill-card input[type=range]{background:linear-gradient(90deg,#ffe28a 100%,#535c91 0);background:linear-gradient(to right,#ffe28a var(--value,100%),#535c91 var(--value,100%));border-radius:5px;cursor:default;height:8px;pointer-events:none;width:100%}.skill-card input[type=range]::-webkit-slider-thumb{appearance:none;width:0}.skill-card input[type=range]:disabled{opacity:.7}.soft-skills-grid{max-width:300px}.soft-skills-title{color:#ffe28a;font-size:1.5rem;margin-bottom:1rem;text-align:center}.soft-skills-list{display:flex;flex-direction:column;gap:1rem}.soft-skill-card{background-color:#535c91;border-radius:8px;box-shadow:0 2px 8px #0003;font-weight:700;padding:.75rem 1rem;text-align:center;transition:transform .3s ease}.soft-skill-card:hover{transform:scale(1.05)}h3{color:#ffe28a;font-size:25px;margin:30px;text-align:center}
/*# sourceMappingURL=main.b8d3b106.css.map*/