*{margin:0;padding:0;font-family:Rubik,sans-serif;scroll-behavior:smooth}:not(#carrousel *){transition:color .5s,background-color .5s,box-shadow .5s,opacity .5s}#hoverelement{position:fixed}body,html{overflow-x:hidden;background-color:var(--background-color)}html[theme=light]{--background-color:white;--color-accent:#229bdd;--text-color:black;--subtitle-color:rgba(0, 0, 0, 0.7);--button-focus-text-color:white;--form-background-color:#dfdfdf;--form-text-color:#4e4e4e;--chip-background-color:#c5c5c5;--card-after-color:rgba(255, 255, 255, 0.3)}html[theme=dark]{--background-color:#1d1d1d;--color-accent:#65c9ff;--text-color:white;--subtitle-color:rgba(255, 255, 255, 0.7);--button-focus-text-color:black;--form-background-color:#2b2b2b;--form-text-color:#dddddd;--chip-background-color:white;--card-after-color:rgba(29, 29, 29, 0.5);fill:#155724}.spanText{display:inline-table}.spanText span:not(.blank){display:inline-block}.animated{color:var(--color-accent);animation:rubberBand 1s}section{position:relative;min-height:96vh;background-color:var(--background-color);padding:2vh 6vw}section :not(h2 span){color:var(--text-color)}#me{display:flex;flex-direction:row;align-items:center;justify-content:space-between}#me .content{display:flex;flex-direction:column;gap:1vh}#me .content h1 span{font-size:clamp(1.9rem, 6vw, 4.5rem);opacity:0;transition:color .3s ease-in-out}#me .content h1 span.bounceIn{animation-name:bounceIn;animation-duration:.75s}#me .content p{font-size:clamp(1rem, 4vw, 2rem);color:var(--subtitle-color);animation:enter-left .9s ease-in-out}#me .content a{font-size:clamp(1rem, 3.5vw, 1.7rem);width:fit-content;border-radius:5px;border:2px solid var(--color-accent);color:var(--color-accent);padding:8px 25px;text-decoration:none;margin-top:3vh;animation:enter-left 1.1s ease-in-out}#me .content a:focus,#me .content a:hover{color:var(--button-focus-text-color);box-shadow:inset 300px 0 0 0 var(--color-accent);outline:0}#me #avatar{width:30%;height:auto;animation:enter-right .8s ease-in-out}#me #hoverelement{cursor:pointer}#about{padding:0 5vw;display:flex;align-items:center}#about .content{display:flex;flex-direction:row;align-items:center;justify-content:space-between}#about .text{opacity:0;width:65%;display:flex;flex-direction:column}#about.visible .text{opacity:1;animation:enter-right .9s ease-in-out}#about img,#about object{width:30%;height:auto}#about.visible img,#about.visible object{opacity:1;animation:enter-left .9s ease-in-out}#about h2{font-size:clamp(1.9rem, 6vw, 4.5rem);text-align:end;color:var(--color-accent)}#about p{font-size:clamp(1rem, 2vw, 1.5rem);text-align:end}#skills{display:flex;flex-direction:column;justify-content:center}#skills h2{visibility:hidden;font-size:clamp(2rem, 6vw, 4.5rem);color:var(--color-accent);margin-bottom:5vh}#skills .cards{display:flex;flex-direction:row;gap:20px}#skills.visible h2{visibility:visible;animation:enter-left .6s ease-in-out}#skills.visible .cards .card{margin-top:0;visibility:visible;animation:flip-in-ver-right .8s cubic-bezier(.25,.46,.45,.94)}#skills .cards .card{margin-top:200px;visibility:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;outline:2px solid var(--text-color);background-color:var(--background-color);border-radius:10px;width:100%;padding:4vh 1vw;gap:30px;transform-style:preserve-3d;transform:perspective(1000px);box-sizing:border-box}#skills .cards .card:hover{z-index:2}#skills .cards .card .header,#skills .cards .card .languages,#skills .cards .card .tools{display:flex;flex-direction:column;align-items:center;transform:translateZ(30px)}#skills .card-icon{height:52px;padding:10px}#skills .card h3{padding-bottom:5px;color:var(--text-color);font-size:clamp(1.4rem, 4vw, 1.5rem)}#skills .card h4{color:var(--color-accent);font-size:clamp(1.2rem, 3vw, 1.5rem)}#skills .card p{margin-top:15px;font-size:clamp(1.1rem, 2vw, 1.4rem)}#skills .card ul{list-style:none}#skills .card li{margin-top:15px;font-size:clamp(1.1rem, 2vw, 1.4rem)}#proyects{display:flex;flex-direction:column;justify-content:center;opacity:0;transition:1s}#proyects.visible{opacity:1}#proyects h2{font-size:clamp(2rem, 6vw, 4.5rem);color:var(--color-accent);margin-bottom:5vh}#proyects .carrousel{width:450px;height:fit-content;align-self:center}#proyects .cards{display:flex;flex-direction:row;width:fit-content;gap:10px}#proyects .cards .card{position:relative;width:406px;display:flex;flex-direction:column;align-items:center;padding:20px;border-radius:10px;gap:10px;color:var(--text-color);border:2px solid var(--text-color);transform:scale(.9);transition:.5s;cursor:pointer}#proyects .cards .card:not(.visible):after{content:"";position:absolute;width:100%;height:100%;top:-2px;left:-2px;border-radius:10px;border:2px solid var(--card-after-color);background-color:var(--card-after-color)}#proyects .cards .card.visible{opacity:1;transform:scale(1);cursor:initial}#proyects .card .card-image-container{display:flex;width:100%;height:40%;border-radius:10px;overflow:hidden}#proyects .card .card-image-link{width:100%;height:100%}#proyects .card .card-image{width:100%;height:100%;transition:.5s;aspect-ratio:16/9;object-fit:cover}#proyects .card .card-image:hover{transform:scale(1.2)}#proyects .card .card-title{margin-top:20px;font-size:clamp(1rem, 2vw, 1.5rem)}#proyects .card .card-description{text-align:center;font-size:clamp(.8rem, 2vw, 1rem);width:95%}#proyects .card .card-buttons a{background-color:#64beff;padding:10px 20px;border-radius:5px}#proyects .card .card-stacks{width:100%;margin-bottom:10px;padding-top:30px;margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}#proyects .card .card-stacks .chip{height:fit-content;width:fit-content;background-color:var(--chip-background-color);padding:5px 10px;border-radius:50px;text-align:center;color:#000;font-family:Verdana,sans-serif;white-space:nowrap;font-size:clamp(.8rem, 2vw, 1rem)}#contact{display:flex;flex-direction:column;justify-content:center}#contact .content{display:flex;flex-direction:row;align-items:center;gap:4vw}#contact h2{font-size:clamp(2rem, 6vw, 4.5rem);color:var(--color-accent);margin-bottom:5vh}#contact .form{display:flex;flex-direction:column;width:60%;gap:15px}#contact .form .col{width:100%;display:flex;flex-direction:row;gap:15px}#contact .form .col input{width:100%}#contact .form input,#contact .form textarea{outline:0;border:none;background-color:var(--form-background-color);font-size:clamp(1rem, 3vw, 1.5rem);border-radius:10px;padding:15px 20px;color:var(--form-text-color)}#contact .form textarea{resize:none}#contact button{font-size:clamp(1rem, 3.5vw, 1.7rem);width:fit-content;border-radius:5px;border:2px solid var(--color-accent);color:var(--color-accent);padding:8px 25px;text-decoration:none;background-color:transparent;align-self:flex-end;cursor:pointer;margin-top:1vh}#contact button:focus,#contact button:hover{color:var(--button-focus-text-color);box-shadow:inset 300px 0 0 0 var(--color-accent);outline:0}#contact .socials{display:flex;flex-direction:column;gap:20px}#contact .socials .row{display:flex;flex-direction:row;align-items:center;gap:10px}#contact .socials .row span{text-decoration:none;font-size:clamp(1rem, 3.5vw, 1.7rem);color:var(--text-color)}#contact .socials .row{text-decoration:none}#contact .socials .row:hover{transform:scale(1.05)}#contact .socials .row svg{fill:var(--text-color);width:clamp(30px,5vw,50px);height:clamp(30px,5vw,50px)}#contact .form-submit-wrapper{position:fixed;bottom:3vh;width:100%;font-size:clamp(1rem, 2.5vw, 1.4rem);visibility:collapse;left:0;display:grid;place-items:center}#contact .form-submit{width:40%;height:4vh;background-color:#d4edda;color:#155724;border:1px solid #c3e6cb;display:flex;align-items:center;justify-content:center;border-radius:5px}#contact .form-submit-wrapper.leave{visibility:visible;animation:leave .8s ease-out}#contact .form-submit-wrapper.visible{visibility:visible;animation:enter-bottom .8s ease-out}.scroll-down.r,.scroll-up.r{right:20px}.scroll-down.l,.scroll-up.l{left:20px}.scroll-down span,.scroll-up span{writing-mode:vertical-rl;text-orientation:mixed}.scroll-down svg{margin-top:10px;width:10px}.scroll-up svg{margin-bottom:10px;width:10px;transform:rotate(180deg)}@media only screen and (max-width:800px){#me #avatar{width:60%}}@media only screen and (max-width:1000px){section{height:fit-content;min-height:0}#me{height:88vh;min-height:88vh;flex-direction:column-reverse;justify-content:start;gap:5vh;padding-top:10vh}#about{height:85vh;min-height:85vh;padding-bottom:15vh}#about .content{height:100%;align-items:center}#about .text{width:100%;display:flex;flex-direction:column;gap:1vh}#about object{display:none}#about h2{font-size:clamp(2rem, 6vw, 4.5rem);text-align:start;color:var(--color-accent)}#about p{font-size:clamp(1rem, 3.5vw, 1.7rem);text-align:start}#skills .cards{flex-direction:column}#skills{padding-bottom:10vh}#proyects .carrousel{width:100vw}#proyects .carrousel.visible{animation:move-center 1s ease-in-out}#proyects .cards .card{background-color:var(--background-color);width:80vw;box-sizing:border-box}#contact{margin-top:5vh}#contact .content{flex-direction:column;align-items:flex-start}#contact .form{width:100%}#contact .form-submit{width:80%;height:4vh;background-color:#d4edda;color:#155724;border:1px solid #c3e6cb;display:flex;align-items:center;justify-content:center;border-radius:5px}.scroll-down.l,.scroll-up.l{display:none}#skills .scroll-down.r{display:none}.scroll-down.r{bottom:10vh}}@media only screen and (max-width:1500px){#skills .cards{display:grid;grid-template-columns:repeat(2,1fr)}}::-webkit-scrollbar{background-color:transparent}::-webkit-scrollbar-track{border-radius:10px;border:5px solid transparent;box-shadow:inset 0 0 14px 14px transparent}::-webkit-scrollbar-thumb{border-radius:10px;border:5px solid transparent;box-shadow:inset 0 0 14px 14px #bbbbbe}::-webkit-scrollbar-thumb:hover{border-radius:10px;border:5px solid transparent;box-shadow:inset 0 0 14px 14px #d9d9dd}::-webkit-scrollbar{width:16px}body::-webkit-scrollbar{background-color:var(--background-color)}.scroll-down,.scroll-up{position:absolute;bottom:8vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(10px, 2vw, 14px);color:#fff;animation:backforw 1.5s ease-in-out infinite;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}.scroll-up{bottom:6vh}@keyframes move-center{0%{transform:translateX(0)}20%{opacity:1}50%{transform:translateX(-4em)}80%{opacity:1}100%{transform:translateX(0)}}@keyframes flip-in-ver-right{0%{transform:rotateY(-80deg);opacity:0}100%{transform:rotateY(0);opacity:1}}@keyframes rubberBand{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}}@keyframes bounceIn{80%{transition-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}100%{opacity:1;transform:scale3d(1,1,1)}}@keyframes enter-left{from{opacity:0;transform:translateX(-50vw)}to{opacity:inherit}}@keyframes enter-right{from{opacity:0;transform:translateX(50vw)}to{opacity:inherit}}@keyframes enter-bottom{from{opacity:0;transform:translateY(20vw)}to{opacity:inherit}}@keyframes leave{from{opacity:1}100%{visibility:collapse}to{opacity:0;transform:translateY(20vw)}}@keyframes backforw{from{transform:translateY(-10px)}50%{transform:translateY(10px)}to{transform:translateY(-10px)}}