@import"https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;400;500;600;700&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap";@font-face{font-family:Cascadia Code;src:url(/portfolio/fonts/CascadiaMono.ttf)}:root{--Signika: "Signika Negative", sans-serif;--Tajawal: "Tajawal", sans-serif;--Black1: #242424;--Black2: #191919;--color1: #112237;--color2: #0d4c6f;--color3: #0985b2;--color4: #03cafb;--color5: #0ffff8;--LogoColor: #0171bd;--CascadiaCode: "Cascadia Code"}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--Signika);font-weight:300}html{scroll-behavior:smooth}.portfolio-content{font-family:var(--Tajawal);position:fixed;top:0;left:0;width:100%;padding:5px;text-decoration:none;z-index:30;background-color:#eecc37;font-weight:500;color:#333;margin:0;text-align:center}.portfolio-content a{color:#333;font-family:var(--Tajawal);text-decoration:none;font-weight:600;display:block;display:flex;align-items:center;justify-content:center}.black-back{background-color:var(--Black1)}.black-back2{background-color:var(--Black2)}#cv-iframe{height:100vh;width:100vw;object-fit:contain;display:none}.screen-body{height:100vh;display:grid;grid-template-areas:"presentation presentation" "navigation content";grid-template-columns:450px;overflow-x:hidden}.screen-body::-webkit-scrollbar{display:none;background:var(--Black1);width:7px}.screen-body::-webkit-scrollbar-thumb{background-color:var(--color4);border-radius:20px}.screen-presentation{width:100vw;grid-column:presentation;height:80vh;display:flex;align-items:center;text-align:center;flex-direction:column;position:relative;margin-bottom:20vh}.presentation-texts{transform:translate(0);height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .3s ease-in-out}.presentation-name{font-size:14vh;font-weight:700;color:#ff0}.presentation-title{font-size:7vh;font-weight:700;font-family:var(--Tajawal);color:var(--color5)}.presentation-name,.presentation-title{z-index:4;transition:all .3s ease-in-out}.presentation-name,.presentation-title{transform:translate(180%);transform:translate(0)}.presentation-links{z-index:20;display:flex;text-align:center;align-items:center;position:relative;width:100%;background-color:#411a53;background:linear-gradient(rgb(69,31,87),transparent);padding:0 2rem;justify-content:space-between;top:0;left:0}.link-logo{width:80px}.links-group{display:flex;align-items:center;position:relative;z-index:7}.presentation-link{padding:.5rem 2rem;text-decoration:none;color:#ff0;display:flex;align-items:center;justify-content:center;height:90px;text-shadow:1px 2px 4px;font-size:2rem;font-weight:400;transition:all .15s ease-in-out}.presentation-link:hover{padding:0rem 2rem;color:var(--color4);text-shadow:1px 2px 5px;font-size:2.2rem;font-weight:600}#modal-open{display:none}.container-hamburguer{flex-direction:column;cursor:pointer;gap:.5rem;padding:3px;display:none;z-index:9}.hamburger{width:46px;height:4px;background-color:var(--LogoColor);border-radius:10px;transition:all .5s ease-in-out;transform-origin:left}#modal-open:checked~.container-hamburguer .hamburger:nth-child(1){background-color:#ff0;transform:rotate(30deg)}#modal-open:checked~.container-hamburguer .hamburger:nth-child(2){background-color:#ff0;opacity:0}#modal-open:checked~.container-hamburguer .hamburger:nth-child(3){background-color:#ff0;transform:rotate(-30deg)}.presentation-parallax{position:absolute;left:0;top:0;height:100%;width:100%}#mineFloor,#mineTren{transform:translateY(120px)}#mineGold{height:100vh;z-index:6;user-select:none}#mineRight{z-index:5}.parallax-image{width:100%;position:absolute;left:0;top:0;height:100%;object-fit:cover}.texts-social{display:flex;align-items:center;gap:20px;font-size:2rem;position:relative;position:absolute;top:30%;z-index:21;width:100%;justify-content:center;transition:all .3s ease-in-out}.social-icon{color:var(--LogoColor);padding:.9rem;border:4px solid;font-size:2vw;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:all .3s ease-in-out;text-decoration:none;display:inline-block}.social-icon:hover{background-color:var(--LogoColor);color:#ff0}.screen-nav{min-height:100vh;width:100%;z-index:13;grid-area:navigation;background-color:#ff0;transition:all .3s ease-in-out}.nav{position:sticky;top:0;left:0;padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;min-height:100vh;text-align:center}.nav-links{list-style:none;display:flex;flex-direction:column;gap:20px}.nav-link{text-decoration:none;color:var(--Black1);font-family:var(--CascadiaCode);font-size:1.8rem;font-weight:700;transition:all .5s ease-in-out;padding:.4rem 0rem .2rem}.nav-link:before,.nav-link:after{transition:all .3s ease-in-out;opacity:0;color:var(--LogoColor)}.nav-link:after{padding:0 0 0 10px;content:"})"}.nav-link:before{padding:0 10px 0 0;content:"({"}.nav-link:hover:after,.nav-link:hover:before{opacity:1}.nav-link:hover{color:var(--LogoColor)}.screen-content{grid-area:content;width:100%;background-color:var(--Black2);z-index:12;-webkit-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.gradient-presentation{background-color:var(--Black1);background:linear-gradient(var(--Black1) 30%,transparent);width:100%;height:140px}.content-section{width:100%;min-height:100vh;padding:2rem;position:relative;scroll-snap-align:start}.section-text{font-size:2rem;font-weight:500;color:var(--color4);font-family:var(--CascadiaCode);text-align:justify}.section-text:after{content:"";height:2rem;width:3px;position:absolute;margin-left:5px;margin-top:5px;background:yellow;animation:blink 1s ease-in-out infinite}.section-donwload{padding:.5rem 1rem;font-size:1.5rem;font-family:var(--CascadiaCode);font-weight:700;border-radius:.6rem;border:1px solid;color:#ff0;background-color:var(--Black2);transition:all .3s ease-in-out;cursor:pointer;margin-top:20px;text-decoration:none;display:inline-block}.section-donwload:hover{color:var(--Black2);background-color:#ff0}.section-title{font-family:var(--CascadiaCode);font-size:13vh;margin-bottom:2rem;font-weight:900;color:transparent;background:linear-gradient(yellow,rgb(255,196,0));background-clip:text;-webkit-background-clip:text}#contentNavResponsive{display:none}.button-nav-responsive{position:fixed;top:42%;left:10px;z-index:13;color:#ffff0027;transition:all .3s ease-in-out;display:none}.button-nav-responsive:hover{color:#ff0}.button-nav-responsive i{font-size:1.2rem;cursor:pointer;border:3px solid;border-radius:50%;padding:.5rem;transition:all .5s ease-in-out}.show{left:0%}.hidden{left:-100%}#button-nav{display:none}.container-skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.4rem}.group-skills{display:flex;flex-direction:column;gap:20px}.skills-group-image{display:flex;align-items:center;gap:10px}.skills-img{width:60px}.skills-group-image h3{font-size:1.3rem;color:#fff;font-weight:600;transition:color .4s ease-in-out}.skills-group-image:hover h3{color:#ff0}.skills-title{font-family:var(--CascadiaCode);font-weight:600;color:var(--color4);margin-bottom:10px;font-size:5vh}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:20px}.grid-content-image{width:100%;position:relative}.grid-content-image img{width:100%;position:relative;border-radius:.9rem;box-shadow:0 7px #ff0;animation:showBoxShadow .1s ease-in-out forwards}.grid-content-image:hover img{transform:translateY(7px);animation:hiddenBoxShadow .1s ease-in-out forwards}@keyframes hiddenBoxShadow{0%{box-shadow:0 7px #ff0}to{box-shadow:0 0 #ff0}}@keyframes showBoxShadow{0%{box-shadow:0 0 #ff0}to{box-shadow:0 7px #ff0}}.links-git{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(2,1fr);align-items:center}.content-image-text{display:flex;align-items:center;justify-content:center;height:100%;border-radius:0 .9rem .9rem 0;background-color:#00ffdd9c;color:var(--Black2);text-decoration:none;font-family:var(--CascadiaCode);font-weight:700;font-size:2.5rem;opacity:0;padding:20px;transform:all .3s ease-in-out;animation:hiddenText forwards ease-in-out .3s}.content-image-text:nth-child(1){border-radius:.9rem 0 0 .9rem}.content-image-text:first-child{background-color:#ffff00b9}.grid-content-image:hover .content-image-text{animation:showText forwards ease-in-out .3s}@keyframes showText{0%{opacity:0}to{opacity:1}}@keyframes hiddenText{0%{opacity:1}to{opacity:0}}@keyframes blink{0%{transform:scaleY(1)}50%{transform:scaleY(0%)}to{transform:scaleY(1)}}.section-image-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70vh;gap:2rem}.image-container-social{display:flex;align-items:center;justify-content:center;gap:1rem}.profile-icon{color:#fff;text-decoration:none;font-size:2.7rem;transition:all .15s ease-in-out;animation:poped .15s ease-in-out forwards}.profile-icon:hover{animation:pop .15s ease-in-out forwards}@keyframes pop{0%{transform:scale(1);color:#fff}to{transform:scale(1.3);color:#ff0}}@keyframes poped{0%{transform:scale(1.3);color:#ff0}to{transform:scale(1);color:#fff}}.section-profile{width:50%;max-width:300px;aspect-ratio:1/1;box-shadow:0 10px #ff0;border-radius:50%;object-fit:cover;object-position:0px 0px}.name-section{font-size:5vh;font-family:var(--CascadiaCode);font-weight:500;color:#ff0;text-align:center}.name-section:after{content:"";height:5vh;width:3px;position:absolute;margin-left:5px;margin-top:5px;background:var(--LogoColor);animation:blink 1s ease-in-out infinite}@media (max-width: 1024px){.texts-social{top:19%}.container-hamburguer{display:flex;z-index:10}.social-icon{font-size:4vw}.presentation-link{font-size:5vw}.links-group{background-color:var(--LogoColor);position:fixed;width:100%;height:100%;flex-direction:column;top:0;left:100%;justify-content:center;transition:all .3s ease-in-out}#modal-open:checked~.links-group{left:0%}.presentation-links:has(#modal-open:checked)~.texts-social{top:-10%}.screen-body{display:grid;grid-template-areas:"presentation" "navigation" "content";grid-template-columns:1fr}.button-nav-responsive{display:block}#button-nav:checked~.button-nav-responsive{transform:translate(270px)}#button-nav:checked~.button-nav-responsive i{transform:rotate(-180deg)}#button-nav:checked~.screen-nav{transform:translate(0)}.screen-nav{position:fixed;width:270px;min-height:0px;left:0;top:25%;border-radius:0 2rem 2rem 0;transform:translate(-100%)}.screen-nav .gradient-presentation{display:none}.nav{min-height:0px}.nav-link{display:inline-block;width:max-content}.nav-logo{display:none}}@media (max-width: 768px){.texts-social{top:25%}.social-icon{font-size:5vw}.presentation-name{font-size:8vh}.presentation-title{font-size:5vh}.section-text{font-size:2rem}.section-text:after{height:2rem}}@media (max-width: 520px){.section-title{font-size:8vh}.section-text{font-size:1.4rem}.content-image-text{font-size:4vh}}@media print{*{display:none!important}body,html,#cv-iframe{display:flex!important}}