:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-size:1em;--primary-bg: #D4D4D4;--secondary-bg: #FFFFFF;--header-bg: #1A1A1A;--header-text: #F5F5F5;--primary-accent: #4CAF50;--secondary-accent-blue: #2196F3;--secondary-accent-coral: #FF6F61;--text-primary: #333333;--text-secondary: #666666;--header-height: 10vh;--preheader-height: 10vh;--border-radius: 8px;--border-radius-large: 16px;--transition-fast: .1s ease-in-out;--transition-normal: .3s ease-in-out;--transition-slow: .5s ease-in-out;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100dvh;width:100%;margin:0;padding:0;background-color:var(--primary-bg);scroll-behavior:smooth}a{font-weight:700;color:inherit;text-decoration:none}.icon{width:36px;height:36px;border-radius:0;transition:var(--transition-normal)}.icon:hover{transform:scale(1.2)}.scale-up-element{animation:scale-up linear both;animation-timeline:view();animation-range:10vh 30vh}@keyframes scale-up{0%{scale:.5;opacity:.2;filter:blur(5px)}}@-webkit-keyframes scale-up{0%{scale:.5;opacity:.2;filter:blur(5px)}}.active{font-weight:700}section{min-height:80dvh;max-width:1280px;margin:auto;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}header{display:flex;align-items:center;justify-content:center;height:var(--header-height);width:100%;color:var(--header-text);background-color:var(--header-bg);position:sticky;top:0;z-index:42}header button{width:130px;border:none;background:none;margin:1em;font-size:1.5em;color:var(--header-text);transition:var(--transition-normal)}header button:hover{cursor:pointer}.main{display:flex;flex-direction:row;flex-wrap:wrap;text-align:center;justify-content:center;margin-top:0;margin-bottom:0}.main div{min-width:340px;padding:10px;font-size:1.2em;z-index:43}.main .left{flex-grow:4;text-align:left}.main .right{flex-grow:3}.main .right div{background-color:var(--secondary-bg);border-radius:var(--border-radius);padding:0;display:flex;flex-direction:column;max-width:340px;margin:auto}.main .right div img{width:340px;height:auto;border-radius:var(--border-radius) var(--border-radius) 0 0}.main .right div div{display:flex;flex-direction:row;justify-content:center;padding-top:10px;gap:30px}.main .right div .icon{width:36px;height:36px;border-radius:0;transition:var(--transition-normal)}.main .right div .icon:hover{transform:scale(1.2)}.preheader{position:sticky;top:calc(-1 * var(--header-height));height:var(--preheader-height);width:100%;z-index:1000;overflow:hidden}.preheader svg{display:block;width:100%;height:100%}.background,.projects,.contact{margin-top:50px}.background{display:flex;flex-direction:column;align-items:center;gap:20px}.background p{text-align:center;margin:0 20px}.background div{max-width:calc(80% - 20px);padding:10px;background-color:var(--secondary-bg);border-radius:var(--border-radius-large);min-height:150px}.background div span{font-size:1em;font-weight:700;color:var(--primary-accent);writing-mode:vertical-lr;transform:rotate(180deg);margin:65px 5px 0;position:absolute}.background div h2{margin-left:40px;margin-bottom:20px}.background div p{margin-left:40px;text-align:justify}.projects{display:flex;flex-direction:column;align-items:center}.projects .wrapper{width:80%;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}.contact{max-width:80%;margin:4rem auto;border-radius:var(--border-radius-large);transition:var(--transition-slow);margin-bottom:20vh}.contact .content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3rem;position:relative;z-index:2;background:var(--header-bg);padding:2.5rem;border-radius:24px;border:1px solid;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transition-normal)}.contact .content .text{flex:2;min-width:200px;color:var(--header-text)}.contact .content .text h2{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:700;margin:0 0 .5rem}.contact .content .text p{font-size:1.1rem;line-height:1.6;opacity:.8;margin:0}.contact .btn{flex:1;position:relative;display:flex;justify-content:center;min-width:150px;align-items:center;font-size:1.2rem;font-weight:600;color:var(--header-bg);text-decoration:none;padding:1rem;border-radius:50px;background:linear-gradient(135deg,var(--primary-accent) 0%,var(--secondary-accent-blue) 100%);border:none;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;overflow:hidden;margin:auto}.contact .btn:hover{transform:scale(1.05);background:linear-gradient(135deg,var(--primary-accent) 0%,var(--secondary-accent-blue) 100%)}.contact .btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.contact .btn:hover:before{left:100%}.contact:before{content:"";position:absolute;height:1px;background:linear-gradient(90deg,transparent,var(--color-primary, #007bff) 50%,transparent);opacity:.6}.card{width:calc((100% - 60px)/2);min-width:300px;flex-grow:1;display:flex;flex-direction:column;padding:10px;background-color:var(--secondary-bg);border-radius:var(--border-radius-large);direction:ltr}.card p{text-align:justify}.card button{padding:.5rem;width:120px;margin:auto;background:var(--primary-accent);transition:var(--transition-normal);border:none;cursor:pointer;border-radius:var(--border-radius)}.card button:hover{transform:scale(1.05)}.technology{display:flex;flex-direction:row;width:auto;gap:10px}.technology span{padding:2px 6px;border:2px solid;border-radius:5px;font-size:.875rem;font-weight:700;transition:background var(--transition-normal)}.technology .html{--color-tech: #e34d23;color:var(--color-tech);border-color:var(--color-tech)}.technology .css{--color-tech: #2748ef;color:var(--color-tech);border-color:var(--color-tech)}.technology .js{--color-tech: #f8dd1e;color:var(--color-tech);border-color:var(--color-tech)}.technology .sql{--color-tech: #e38c00;color:var(--color-tech);border-color:var(--color-tech)}.technology .php{--color-tech: #4F5D95;color:var(--color-tech);border-color:var(--color-tech)}.technology .python{--color-tech: #3572A5;color:var(--color-tech);border-color:var(--color-tech)}.technology .cpp{--color-tech: #f34b7d;color:var(--color-tech);border-color:var(--color-tech)}.technology .api{--color-tech: #007BFF;color:var(--color-tech);border-color:var(--color-tech)}.technology .arduino{--color-tech: #00989d;color:var(--color-tech);border-color:var(--color-tech)}.technology .ml{--color-tech: #20C997;color:var(--color-tech);border-color:var(--color-tech)}.technology .java{--color-tech: #b07219;color:var(--color-tech);border-color:var(--color-tech)}.projectContainer{max-width:1200px;width:calc(100% - 40px);margin:0 auto;padding:50px 20px 20px;display:flex;flex-direction:column;align-items:center}.projectContainer .wrapper{display:flex;flex-direction:row;gap:20px;width:calc(100% - 40px);justify-content:center}.projectContainer .projectCluster{display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:center;width:360px;overflow:scroll;overflow-x:hidden;direction:rtl;height:calc(90vh - 100px)}.projectContainer .detailView{width:calc(100% - 460px);max-width:900px;padding:10px;background-color:var(--secondary-bg);border-radius:var(--border-radius-large);overflow:scroll;overflow-x:hidden}@media(max-width:847px){.projectContainer{padding:20px 0;width:360px;gap:0px}.projectContainer .wrapper{gap:0px}.projectCluster{gap:0;width:100%}.detailView{visibility:collapse;height:0}}