:root{--clr-bg-main: #8fad95;--clr-bg-secondary: #f6c2c2;--clr-bg-accent: #f8f8f8;--clr-bg-light: white;--clr-bg-black: rgb(0, 0, 0);--clr-bg-dark: #494f5e;--clr-hover: #dcdcdc;--clr-whatsup: #25d366;--clr-linkedin: #0a66c2;--clr-mail: #c71610;--clr-github: #2b3137}@font-face{font-family:homenaje;src:url(/assets/Homenaje-Regular-5ae27476.ttf)}@font-face{font-family:homenaje;src:url(/assets/Homenaje-Regular-5ae27476.ttf);font-weight:700}@font-face{font-family:manrope;src:url(/assets/manrope-regular-6383bd9f.ttf)}@font-face{font-family:manrope;src:url(/assets/manrope-regular-6383bd9f.ttf);font-weight:700}.flex{display:flex}.column{flex-direction:column}.justify-center{justify-content:center}.align-center{align-items:center}.space-between{justify-content:space-between}.grid{display:grid}.clean-list{padding:0;list-style:none}.main-layout{display:grid;grid-template-rows:auto 1fr auto;height:100vh}*,*:before,*:after{box-sizing:border-box}html{font-family:manrope,sans-serif;font-size:16px}body{background-color:var(--clr-bg-accent);color:var(--clr-txt-light);margin:0}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}h1,h2,h3,h4,h5,h6{margin:0;text-wrap:balance;font-family:homenaje,sans-serif}p{margin:0 0 1em;text-wrap:pretty}img,video,canvas,svg,picture{display:block;max-width:100%}ul,ol{list-style:none;padding:0;margin:0}a{text-decoration:none;color:inherit}a:not([class]){text-decoration-skip-ink:auto}input,button,textarea,select{max-width:100%;font-family:inherit}input,textarea{width:clamp(350px,30vw,30vw);padding:.8rem;border:1px solid var(--clr-bg-dark);border-radius:5px;outline:none;font-size:1rem;background:transparent;transition:border-color .2s}input:focus,textarea:focus{box-shadow:inset 0 0 0 2px var(--clr-bg-dark)}button{border:none;cursor:pointer}.btn{padding-block:.8rem;border-radius:100vh;width:10rem;font-size:1rem;background-color:var(--clr-bg-light)}.btn:hover{background-color:var(--clr-bg-accent)}::-webkit-scrollbar{width:13px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:var(--clr-bg-dark);border-radius:10px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background-color:var(--clr-bg-dark)}.app-header{display:flex;justify-content:space-between;padding-inline:4rem;padding-block-start:1rem;background-color:var(--clr-bg-main)}.app-header .logo{width:140px}.app-header .navigation{display:flex;align-items:center;gap:3rem;a {&:hover {color: var(--clr-bg-light);}}}.app-header .navigation>*{transition:transform .2s ease}.main-about-me{display:grid;grid-template-columns:repeat(2,1fr);align-items:start;justify-items:center;row-gap:2rem;column-gap:8rem;width:100%;padding-block-start:6rem;padding-block-end:2rem;background:linear-gradient(to top left,var(--clr-bg-secondary),var(--clr-bg-main) 40%);clip-path:ellipse(200% 100% at 50% 0%)}.main-about-me .about-me{justify-self:end;display:grid;padding-inline-start:8rem}.main-about-me .about-me>h1{position:relative;right:4px;width:max-content;grid-column:1 / span 2;height:100px;font-size:6.5rem}.main-about-me .about-me>h2{position:relative;right:1px;grid-column:1 / span 2;margin-bottom:1rem;font-size:3rem}.main-about-me .about-me>p{margin:0;font-size:1.2rem;grid-column:1 / span 2}.main-about-me .about-me .resume-btn{display:flex;justify-content:start;align-items:center;gap:.5rem;margin-block:1.5rem;padding-block:.25rem;padding-inline-start:1rem;padding-inline-end:1.5rem;width:max-content}.main-about-me .about-me .resume-btn:before{content:url(/assets/cv-bce40f92.svg);transform:scale(.7)}.main-about-me .about-me .resume-btn:hover{background-color:var(--clr-bg-secondary)}.main-about-me>.avatar{justify-self:start;width:500px}.introduction{display:grid;justify-self:center;grid-template-columns:repeat(3,minmax(240px,350px));justify-items:center;column-gap:1rem;row-gap:4rem;padding-block:6rem;margin-inline:8rem}.introduction .openning{justify-self:start;grid-column:1/4;display:grid;gap:1rem;max-width:800px;text-align:start}.introduction .openning>h2{font-size:2.5rem}.introduction .openning>p{font-size:1.1rem;letter-spacing:.2px}.introduction .tools,.introduction .core-skills,.introduction .experience{padding:1rem;width:100%;max-width:350px;min-width:240px;border-radius:10px;padding-block:2rem;text-align:center;background-color:var(--clr-bg-light);box-shadow:#00000026 0 3px 6px;ul {display: grid; place-items: center; margin-bottom: 1.5rem; li {position: relative; display: flex; gap: .5rem; margin-bottom: .3rem; width: max-content; > img {width: 20px; height: 20px; border-radius: 50%;}}}}.introduction .tools>h2,.introduction .core-skills>h2,.introduction .experience>h2{position:relative;display:inline-flex;margin-bottom:1rem;font-size:2.5rem}.introduction .tools>h2:before,.introduction .core-skills>h2:before,.introduction .experience>h2:before{content:"";position:absolute;left:-35px;transform:scale(.7)}.introduction .tools>h3,.introduction .core-skills>h3,.introduction .experience>h3{font-size:1.4rem;margin-block-end:.5rem;text-decoration:underline}.introduction .tools{h2::before {content: url(/assets/tools-78898383.svg);}}.introduction .core-skills{h2::before {content: url(/assets/skills-accabe25.svg);}}.introduction .experience{h2::before {content: url(/assets/experience-a5cc3724.svg);}}.Project-list{display:grid;grid-template-columns:4rem repeat(3,1fr) 4rem;column-gap:2rem;row-gap:5rem;padding-bottom:7rem;margin-bottom:3rem;background-color:var(--clr-bg-light);box-shadow:#00000026 0 3px 6px}.Project-list>h2{grid-column:2/5;justify-self:center;margin-top:3rem;font-size:2.5rem}.Project-list .marshmello{grid-row:2;grid-column:2}.Project-list .simple-pen{grid-row:2;grid-column:3}.Project-list .meme-craft{grid-row:2;grid-column:4}.project-preview{position:relative;display:grid;justify-items:center;align-items:center;column-gap:1rem;a {cursor: pointer;} p {grid-column: 1 / span 2; grid-row: 1; padding-inline: 1rem; margin-top: .5rem; height: 3rem; font-size: .9rem; text-align: center; color: var(--clr-bg-light);} .open-git,.visit-web {grid-row: 2; height: max-content; font-size: .9rem; background-color: var(--clr-bg-light); border-radius: 100vh; padding: .5rem; width: 7rem; text-align: center; &:hover {background-color: var(--clr-hover);}} .visit-web {grid-column: 1; justify-self: end;} .open-git {grid-column: 2; justify-self: start;} &:hover {> p,a {display: grid;} .img-backgroung {img {filter: blur(5px); opacity: .4;}} > h2 {&::after {width: 300px;}}}}.project-preview>h2{position:absolute;top:-14px;transform:translateY(-100%);text-transform:capitalize}.project-preview>h2:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:90px;height:1px;background-color:Var(--clr-bg-secondary);transition:width .3s ease-in-out}.project-preview .img-backgroung{border-radius:12px;border:1px solid black;background-color:var(--clr-bg-black);grid-column:1 /3;grid-row:1 / 3}.project-preview .img-backgroung>img{border-radius:10px;transition:.3s}.project-preview>p,.project-preview a{display:none;position:relative;z-index:2}.contact-me{justify-self:center;display:grid;place-items:center;width:100%;max-width:520px;min-width:0;border-radius:10px;padding:1.5rem;margin-bottom:3rem;background-color:var(--clr-bg-light);box-shadow:#00000026 0 3px 6px;gap:1rem;h2 {position: relative; font-size: 2rem; color: var(--clr-bg-black);} label {display: grid; width: 100%; gap: .5rem;} input,textarea {width: 100%; min-width: 0; box-sizing: border-box;} .submit-btn {border: 1px solid var(--clr-bg-black); color: var(--clr-bg-black); font-weight: 700; &:hover {background-color: var(--clr-bg-secondary);}}}.social-links{grid-column:span 2;display:flex;gap:2rem;padding-block-start:1rem}.social-links>.icon{display:grid;place-items:center;width:35px;border-radius:1px;cursor:pointer}.social-links>.icon>img{width:90%}.social-links>.icon:hover{border-radius:3px}.social-links>.icon.github:hover{background-color:var(--clr-github);box-shadow:0 0 0 .3rem var(--clr-github)}.social-links>.icon.linkedin:hover{background-color:var(--clr-linkedin);box-shadow:0 0 0 .3rem var(--clr-linkedin)}.social-links>.icon.mail:hover{background-color:var(--clr-mail);box-shadow:0 0 0 .3rem var(--clr-mail)}.social-links>.icon.whatsup:hover{background-color:var(--clr-whatsup);box-shadow:0 0 0 .3rem var(--clr-whatsup)}.app-footer{display:grid;justify-items:center;gap:1rem;padding-block-start:2rem;padding-inline:1rem;background-color:var(--clr-bg-dark)}.app-footer>*{grid-column:span 2}.app-footer>img{width:200px}.app-footer>p{font-size:1.2rem;color:var(--clr-bg-light);text-align:center}.app-footer .copyright{justify-self:start;font-size:.8rem}.user-msg{position:fixed;top:60px;right:.2em;z-index:10;display:grid;place-items:center;padding:.3em;background-color:var(--clr-bg-dark);color:var(--clr-bg-light);font-size:.9em;translate:150%;transition:.6s ease-in-out}.user-msg.visible{translate:0}@media (max-width: 1200px){.main-about-me .about-me>h1{height:80px;font-size:5rem}.main-about-me .about-me>h2{font-size:2.5rem}.main-about-me .about-me .resume-btn{padding-block:.5rem}.main-about-me>.avatar{width:405px}.Project-list{grid-template-columns:auto 1fr auto;clip-path:ellipse(200% 80% at 50% 80%)}.Project-list>h2{grid-column:2}.Project-list .marshmello{grid-row:2;grid-column:2}.Project-list .simple-pen{grid-row:3;grid-column:2}.Project-list .meme-craft{grid-row:4;grid-column:2}.project-preview{justify-self:center;width:550px}}@media (max-width: 1025px){.introduction{grid-template-columns:100%;row-gap:2rem}.introduction .openning{padding-inline:1rem;grid-column:1;justify-self:center;text-align:center}}@media (max-width: 980px){.main-about-me{grid-template-rows:repeat(2,1fr);grid-template-columns:100%;align-items:center;row-gap:1rem;column-gap:0;padding-block-start:1rem;clip-path:ellipse(200% 100% at 50% 0%)}.main-about-me .about-me{grid-template-columns:1fr;justify-self:center;justify-items:center;padding-inline-start:0;h1 {grid-column: 1;} h2 {grid-column: 1;} > p {text-align: center;}}.main-about-me>.avatar{justify-self:center;grid-row:2;width:400px}}@media (max-width: 800px){.main-about-me{padding-block-start:.5rem}.main-about-me .about-me>h1{height:60px;font-size:4rem;margin-bottom:.5rem}.main-about-me .about-me>h2{font-size:2rem}.main-about-me .about-me .resume-btn{padding-block:0rem}.main-about-me>.avatar{grid-row:2;width:350px}.app-header{justify-content:center}.app-header .navigation{display:none}}@media (max-width: 630px){.project-preview{width:95%;p {grid-column: 1 / span 2; grid-row: 3; color: var(--clr-bg-black); height: max-content;} .open-git,.visit-web {grid-row: 4; background-color: var(--clr-bg-accent); &:hover {background-color: var(--clr-bg-main);}} &:hover {.img-backgroung {img {filter: blur(0px); opacity: 1;}}}}.project-preview>p,.project-preview a{display:grid}.introduction{margin-inline:1rem}}@media (max-width: 400px){.main-about-me>.avatar{justify-self:center;grid-row:2;width:250px}.introduction .openning>h2{font-size:2.5rem}.introduction .openning>p{font-size:1rem}.introduction .tools,.introduction .core-skills,.introduction .experience{ul {li {font-size: 1rem;}}}.introduction .tools>h2,.introduction .core-skills>h2,.introduction .experience>h2{font-size:2.5rem}.introduction .tools>h3,.introduction .core-skills>h3,.introduction .experience>h3{font-size:1.5rem}.contact-me{width:100%;max-width:100%;padding:.75rem;gap:.75rem;h2 {font-size: 1.6rem;} .submit-btn {width: 100%;} input {width: 100%; font-size: .95rem;} textarea {width: 100%; font-size: .95rem;}}}