@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";:root{--base-clr: #f9f5d7;--base-secondary-clr: #fbf1c7;--border-clr: #98971a;--border-secondary-clr: #d79921;--hover-clr: #ebdbb2;--text-clr: #282828;--text-secondary-clr: #504945}.GRUVBOX_DARK{--base-clr: #1d2021;--base-secondary-clr: #282828;--border-clr: #b8bb26;--border-secondary-clr: #f1bd2f;--hover-clr: #3c3836;--text-clr: #fbf1c7;--text-secondary-clr: #ebdbb2}.CATPPUCCIN_MOCHA{--base-clr: #1e1e2e;--base-secondary-clr: #313244;--border-clr: #89b4fa;--border-secondary-clr: #cba6f7;--hover-clr: #45475a;--text-clr: #cdd6f4;--text-secondary-clr: #bac2de}.CATPPUCCIN_LATTE{--base-clr: #eff1f5;--base-secondary-clr: #e6e9ef;--border-clr: #7287fd;--border-secondary-clr: #8839ef;--hover-clr: #ccd0da;--text-clr: #4c4f69;--text-secondary-clr: #5c5f77}*{font-family:Jetbrains Mono,system-ui;margin:0;padding:0}html,body{min-height:100vh;scroll-behavior:smooth}.grid-container{background-color:var(--base-clr);color:var(--text-clr);display:grid;grid-template-columns:20vw 59vw 20vw;grid-template-areas:"static-aside center right-aside";min-height:100vh}.center-article{grid-area:"center"}.no-elements{display:flex;justify-content:center;align-items:center}article ul{margin:0;padding:0}.aside-container{top:0;padding:2rem 0;position:sticky;display:flex;flex-direction:column;align-items:center;text-align:center}.right-aside{grid-area:"right-aside";justify-items:center}.tag-title{display:flex;margin-top:1rem;align-items:center;gap:.5rem}.tag-title svg{fill:var(--text-clr);width:30px;height:30px}label{margin-top:1rem}input{border:2px solid var(--border-clr);border-radius:5px;padding:.5rem;background-color:var(--base-secondary-clr);color:var(--text-clr)}.search-button{padding:.5rem;margin:.3rem;border:2px solid var(--border-clr);border-radius:5px;background-color:var(--base-secondary-clr);color:var(--text-clr);font-weight:900}.search-button:hover{color:var(--border-clr)}.tags-container{padding:.5rem;display:flex;flex-wrap:wrap;gap:.8rem}.tags-container .tag{display:inline-block;padding:.3rem;color:var(--text-secondary-clr);list-style:none;border:1px solid var(--border-secondary-clr);border-radius:5px;font-weight:700}.tags-container .tag button{border:0;color:var(--text-secondary-clr);background-color:var(--base-clr);font-weight:900}.right-aside .tags-container{margin-top:1rem;margin-left:2rem}.right-aside .tags-container a{color:var(--text-clr);text-decoration:none}.right-aside .tags-container a:hover{color:var(--border-clr)}.Card{list-style:none;background-color:var(--base-secondary-clr);border:var(--border-clr) 2px solid;border-radius:5px;margin:2rem;height:50vh;display:flex;flex-direction:column;overflow-y:hidden}.Card a{color:var(--text-clr);text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;height:100%}.Card a img{width:100%;height:50%;border-radius:3px;object-fit:cover}.Card a h1,.Card a p,.Card a .tags-container{margin:0 .5rem}.Card a:hover{color:var(--border-secondary-clr)}@media(max-width:768px){.grid-container{grid-template-columns:1fr;grid-template-areas:"static-aside" "right-aside" "center"}.right-aside{order:2}.static-aside{order:1}.Card{height:auto;min-height:40vh;margin:1rem}.right-aside{order:2}.right-aside .tags-container{margin-left:0;justify-content:center}.right-aside .aside-container{padding:.5rem}.right-aside input{max-width:300px;margin:.5rem auto;display:inline-block}.right-aside .tag-title{justify-content:center}.right-aside .tag-title svg{width:25px;height:25px}.right-aside .tag-title h2{font-size:1.2rem}.center-article{order:3}.aside-container{position:relative;padding:1rem 0}}@media(max-width:1024px){.Card{height:45vh;margin:1rem 2rem 2rem;overflow-y:scroll}.right-aside{order:2}.right-aside .tags-container{margin-left:0;justify-content:center}.right-aside .aside-container{padding:1rem}.grid-container{grid-template-columns:1fr;grid-template-areas:"static-aside" "right-aside" "center"}.center-article{order:3}.aside-container{position:relative;padding:1.5rem 0}}.static-aside{grid-area:"static-aside"}.static-aside .button-controller{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.3rem}.static-aside img{height:250px;width:250px;border:var(--border-secondary-clr) 2px solid;border-radius:100%;margin-bottom:2rem}.static-aside li{list-style:none;font-size:1.8rem;margin:2.5rem 0;font-weight:700}.static-aside li:hover{color:var(--text-secondary-clr)}.static-aside h1{font-size:2.5rem}.static-aside h3{margin:1rem 0;color:var(--text-secondary-clr)}.static-aside a{text-decoration:none;color:var(--text-clr)}.static-aside a:hover{color:var(--border-secondary-clr)}.static-aside .icons-container{display:flex;gap:1rem;margin-bottom:1rem}.static-aside .icons-container svg{fill:var(--text-clr);height:35px;width:35px}.static-aside .icons-container svg:hover{fill:var(--border-secondary-clr)}.static-aside button{color:var(--text-clr);background-color:var(--base-secondary-clr);border:var(--border-secondary-clr) 2px solid;padding:.5rem 3rem;border-radius:5px;margin-top:1rem;margin-bottom:1rem;height:40px;width:150px}.static-aside button:hover{background-color:var(--hover-clr)}.static-aside select{color:var(--text-clr);background-color:var(--base-secondary-clr);border:var(--border-secondary-clr) 2px solid;padding:.5rem;border-radius:5px;height:40px;width:150px;display:flex;text-align:center}.static-aside select:hover{background-color:var(--hover-clr)}@media(max-width:1024px){.static-aside img{height:250px;width:250px}.static-aside .button-controller{flex-direction:row}.static-aside .aside-links{display:flex;flex-direction:row;gap:.5rem}.static-aside h1{font-size:2rem}.static-aside h3{font-size:1.2rem}.static-aside li{font-size:1.5rem;margin:2rem 0}.static-aside .icons-container svg{height:30px;width:30px}}@media(max-width:768px){.static-aside{padding:1rem 0}.static-aside .aside-links{display:flex;flex-direction:row;gap:.5rem}.static-aside .button-controller{flex-direction:row}.static-aside img{height:250px;width:250px}.static-aside h1{font-size:1.5rem}.static-aside h3{font-size:1rem;margin:.5rem 0}.static-aside li{font-size:1.2rem;margin:1rem 0}.static-aside .icons-container{gap:.8rem;margin-bottom:.5rem}.static-aside .icons-container svg{height:25px;width:25px}.static-aside button{padding:.5rem 2rem;font-size:.9rem}.static-aside select{padding:.5rem;font-size:.9rem}}@keyframes spin{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.loading{display:flex;justify-content:center}.loading svg{justify-self:center;align-self:center;width:70px;height:70px;fill:var(--border-secondary-clr);animation:spin 3s linear infinite}.grid-page{background-color:var(--base-clr);color:var(--text-clr);display:grid;grid-template-columns:20vw 80vw;grid-template-areas:"static-aside section-area";min-height:100vh}.section-area{grid-area:"section-area";border:2px solid var(--border-clr);margin:2rem;border-radius:.3rem;height:auto;overflow-y:auto}.section-container{display:flex;flex-direction:column;gap:0;width:100%;height:100%}.portfolio-section{padding:3rem 4rem;border-bottom:2px solid var(--border-clr)}.portfolio-section:last-child{border-bottom:none}.portfolio-section h2{font-size:2rem;margin-bottom:2rem;padding-bottom:.5rem;border-bottom:2px solid var(--border-secondary-clr);display:inline-block}.intro-section{padding:4rem;padding-top:0;display:flex;justify-content:space-between;flex-wrap:wrap}.intro-content{display:flex;align-items:center;justify-content:center}.intro-content .intro-text{flex:1}.intro-content .intro-text h2{font-size:2rem;color:var(--text-secondary-clr);margin-bottom:1rem;border:none;padding:0}.intro-content .intro-text h1{font-size:3rem;margin-bottom:1.5rem;color:var(--border-clr)}.intro-content .intro-description{font-size:1.1rem;line-height:1.6;color:var(--text-secondary-clr);margin-bottom:2rem;max-width:600px}.intro-content .btns-container{display:flex;gap:1rem}.btn-primary{padding:.75rem 2rem;background-color:var(--border-clr);color:var(--base-clr);border:none;border-radius:.3rem;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .3s ease,transform .2s ease;display:inline-block;text-decoration:none;text-align:center}.btn-primary:hover{background-color:var(--border-secondary-clr);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{transform:translateY(0);opacity:50%}.btn-primary:disabled:hover{background-color:var(--border-clr)}.intro-carrousel{width:40%;display:flex;justify-content:center}.intro-carrousel .featured-carousel{display:flex;flex-direction:column;width:400px;text-align:center}.intro-carrousel .featured-carousel h2{font-size:1.5rem;margin-top:6rem;overflow-x:hidden}.intro-carrousel .featured-carousel .carousel-container{position:relative}.intro-carrousel .featured-carousel .carousel-nav{position:absolute;top:50%;transform:translateY(-50%);margin:1rem;background-color:var(--border-clr);color:var(--base-clr);border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;z-index:2;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.intro-carrousel .featured-carousel .carousel-nav:hover{background-color:var(--border-secondary-clr);transform:translateY(-50%) scale(1.1)}.intro-carrousel .featured-carousel .carousel-nav-prev{left:-60px}.intro-carrousel .featured-carousel .carousel-nav-next{right:-60px}.intro-carrousel .featured-carousel .carousel-track{display:flex;justify-content:center;width:100%;height:400px;position:relative}.intro-carrousel .featured-carousel .carousel-card{position:absolute;max-width:100%;height:400px;text-align:start;background-color:var(--base-secondary-clr);padding:1rem;border:2px solid var(--border-clr);border-radius:.3rem;display:flex;flex-direction:column;transition:all .5s ease;cursor:pointer}.intro-carrousel .featured-carousel .carousel-card img{height:40%;width:100%;border-radius:.3rem}.intro-carrousel .featured-carousel .carousel-card .carousel-card-title{font-size:1.2rem;color:var(--border-clr);margin-top:.5rem;margin-bottom:.75rem}.intro-carrousel .featured-carousel .carousel-card .carousel-card-description{font-size:.9rem;color:var(--text-secondary-clr);line-height:1.5;margin-bottom:1rem;flex-grow:1}.intro-carrousel .featured-carousel .carousel-card .carousel-card-technologies{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}.intro-carrousel .featured-carousel .carousel-card .carousel-tech-tag{padding:.25rem .5rem;background-color:var(--base-clr);border:1px solid var(--border-clr);border-radius:.3rem;font-size:.75rem;color:var(--text-clr)}.intro-carrousel .featured-carousel .carousel-card .carousel-card-link{padding:.5rem 1rem;background-color:var(--border-clr);color:var(--base-clr);text-decoration:none;border-radius:.3rem;text-align:center;transition:background-color .3s ease;font-size:.9rem}.intro-carrousel .featured-carousel .carousel-card .carousel-card-link:hover{background-color:var(--border-secondary-clr)}.intro-carrousel .featured-carousel .carousel-dots{display:flex;justify-content:center;gap:.5rem;margin-top:5rem}.intro-carrousel .featured-carousel .carousel-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--border-clr);background-color:transparent;cursor:pointer;transition:all .3s ease}.intro-carrousel .featured-carousel .carousel-dot.active{background-color:var(--border-clr)}.intro-carrousel .featured-carousel .carousel-dot:hover{border-color:var(--border-secondary-clr)}.technologies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.5rem}.technologies-grid a{text-decoration:none}.technologies-grid .tech-card{display:flex;flex-direction:column;align-items:center;padding:1.5rem;border:2px solid var(--border-clr);border-radius:.3rem;transition:all .3s ease;cursor:default}.technologies-grid .tech-card svg{width:60px;height:50px}.technologies-grid .tech-card:hover{background-color:var(--hover-clr);border-color:var(--border-secondary-clr);transform:translateY(-5px)}.technologies-grid .tech-card:hover span{color:var(--border-clr)}.technologies-grid .tech-icon{font-size:2.5rem;margin-bottom:.75rem}.technologies-grid .tech-name{font-size:1rem;font-weight:600;color:var(--text-clr)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:2rem}.projects-grid .project-card{display:flex;flex-direction:column;padding:2rem;border:2px solid var(--border-clr);border-radius:.3rem;transition:all .3s ease}.projects-grid .project-card h3{font-size:1.5rem;margin-bottom:1rem;color:var(--border-clr)}.projects-grid .project-card p{color:var(--text-secondary-clr);line-height:1.6;margin-bottom:1.5rem;flex-grow:1}.projects-grid .project-card .project-buttons{display:flex;gap:.3rem}.projects-grid .project-card .project-buttons a{padding:1rem;font-size:.9rem}.projects-grid .project-card .project-technologies{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.projects-grid .project-card .project-tech-tag{padding:.25rem .75rem;background-color:var(--base-secondary-clr);border:1px solid var(--border-clr);border-radius:.3rem;font-size:.875rem}.projects-grid .project-card .project-link{display:inline-block;padding:.75rem 1.5rem;background-color:var(--border-clr);color:var(--base-clr);text-decoration:none;border-radius:.3rem;text-align:center;transition:background-color .3s ease}.projects-grid .project-card .project-link:hover{background-color:var(--border-secondary-clr)}.projects-grid .project-card:hover{background-color:var(--hover-clr);border-color:var(--border-secondary-clr);transform:translateY(-5px)}.contact-section{display:flex;padding:2rem 4rem 4rem;justify-content:space-between}.contact-section .form-container{width:50%}.contact-section .form-container .contact-form{display:flex;flex-direction:column;gap:1.5rem}.contact-section .form-container .contact-form .form-group{display:flex;flex-direction:column;gap:.5rem}.contact-section .form-container .contact-form .form-group label{font-weight:600;color:var(--text-secondary-clr)}.contact-section .form-container .contact-form .form-group input,.contact-section .form-container .contact-form .form-group textarea{width:80%;padding:.75rem;border:2px solid var(--border-clr);border-radius:.3rem;background-color:var(--base-clr);color:var(--text-clr);font-size:1rem;font-family:inherit;transition:border-color .3s ease}.contact-section .form-container .contact-form .form-group input:focus,.contact-section .form-container .contact-form .form-group textarea:focus{outline:none;border-color:var(--border-secondary-clr)}.contact-section .form-container .contact-form .form-group .error{border-color:red}.contact-section .form-container .contact-form .form-group textarea{min-height:150px;resize:vertical}.contact-section .form-container .contact-form .btn-primary{width:85%}.contact-section .contact-slogan{display:flex;flex-direction:column;width:50%;text-align:center;justify-content:center;align-items:center;gap:3rem}.contact-section .contact-slogan svg{width:200px;height:200px}@media(max-width:1024px){.grid-page{display:flex;flex-direction:column}.static-aside{order:1}.section-area{order:2}.intro-content{margin-top:2rem;flex-direction:column;gap:2rem}.intro-article{width:100%}.intro-carrousel{display:flex;justify-content:center;width:100%}.intro-carrousel .featured-carousel{width:auto;margin-left:0;margin-right:0}.intro-carrousel .featured-carousel .carousel-card{overflow-y:scroll}.contact-section{justify-content:center;padding:4rem}.contact-section .form-container{width:100%}.contact-section .contact-slogan{display:none}}@media(max-width:768px){.grid-page{display:flex;flex-direction:column}.static-aside{order:1}.section-area{order:2}.section-area{margin:1rem}.intro-section{padding:1rem 1.5rem 2rem}.intro-text h1{font-size:2.5rem}.projects-grid{grid-template-columns:1fr}.projects-grid .project-card{padding:1rem}.technologies-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.intro-carrousel{display:flex;justify-content:center;width:100%}.intro-carrousel .featured-carousel{max-width:250px;margin-top:1rem;margin-left:0}.intro-carrousel .featured-carousel .carousel-nav{width:35px;height:35px;font-size:1rem}.intro-carrousel .featured-carousel .carousel-card{padding:1rem;width:230px}.intro-carrousel .featured-carousel .carousel-card-title{font-size:1rem}.intro-carrousel .featured-carousel .carousel-card-description{font-size:.8rem}}