:root{--black-color: hsl(252, 11%, 9%);--mid-black-color: hsl(240, 5%, 11%);--white-color: hsl(0, 0%, 100%);color:var(--white-color);background-color:var(--black-color);--green-color: hsl(79, 20%, 44%);--darker-green-color: hsl(77, 17%, 30%)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;background:var(--black-color);color:var(--white-color);scroll-behavior:smooth;transition:.3s all ease-in;overflow-x:hidden}.active{color:var(--darker-green-color)}.hidden-scroll{opacity:0;filter:blur(5px);transition:ease 1s}.show-scroll{opacity:1;filter:blur(0)}.hidden-scroll-left{opacity:0;filter:blur(5px);transform:translate(-50%);transition:all 1s}.show-scroll-left{opacity:1;transform:translate(0);filter:blur(0)}.hidden-scroll-right{opacity:0;filter:blur(5px);transform:translate(50%);transition:all 1s}.show-scroll-right{opacity:1;transform:translate(0);filter:blur(0)}.hidden-scroll-top{opacity:0;filter:blur(5px);transform:translateY(40%);transition:all 1s}.show-scroll-top{opacity:1;transform:translateY(0);filter:blur(0)}.hidden-scroll-bottom{opacity:0;filter:blur(5px);transform:translateY(-40%);transition:all 1s}.show-scroll-bottom{opacity:1;transform:translateY(0);filter:blur(0)}.header{width:100%;max-width:2800px;margin:0 auto;position:fixed;top:0;background:#0d0d0d5a;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:#0000002b 0 1px 8px;z-index:999}.navbar{position:relative;display:flex;align-items:center;justify-content:space-between;max-width:2800px;margin:0 4em}.logo{padding:1em 0}.logo img{width:120px}.nav-links ul{display:flex;align-items:center}.nav-links ul li{list-style:none;padding:0 .85em}.nav-links ul li a{display:block;text-decoration:none;color:var(--white-color);font-weight:400;font-size:.85rem;transition:.2s all ease-in;padding:.25em .5em;border-radius:4px}.nav-links ul li a:hover,.activeLink{background-color:var(--green-color)}.activeLink:hover{color:var(--white-color)}.nav-links ul li span{display:block;cursor:pointer;text-decoration:none;color:var(--white-color);font-weight:400;font-size:.75rem;transition:.2s all ease-in}.nav-links ul li span:hover{color:var(--green-color)}.nav-social-links{margin-right:6.5em}.nav-social-links i{color:var(--white-color);font-size:.85rem}.burger{cursor:pointer;width:41px;height:30px;display:none;flex-direction:column;align-items:flex-end;justify-content:space-between}.burger .bar{width:41px;height:5px;background-color:var(--white-color);transition:.3s all ease-in}.burger .bar:nth-child(2){width:80%}.burger .bar:nth-child(3){width:60%}.success-form-container{width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2em;background-color:#f5f5f5}.success-form-container div{border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:50%;padding:2em;box-shadow:#00000059 0 5px 15px}.success-form-container div img{width:40%}.success-form-container div p{color:#252525;font-weight:400;font-size:.85rem;text-align:center}.success-form-container div a{text-decoration:none;background-color:var(--green-color);color:#f5f5f5;font-size:.85rem;margin:1em 0;padding:.5em 1.5em;border-radius:10px}.error-container{max-width:2888px;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.error-container img{width:25%}.error-container p{font-size:1.75rem;margin:.5em 0}.error-container a{text-decoration:none;font-size:1rem;padding:.5em 1em;background-color:var(--green-color);border-radius:4px;color:var(--white-color)}.error-container a:hover{background-color:var(--darker-green-color)}.main-about{max-width:2800px;width:100%;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2em 4em;background-color:var(--black-color)}.introduce{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em}.introduce-picture{width:25%}.introduce-picture img{width:90%;border-radius:10px}.introduce-text{display:flex;width:79%;flex-direction:column}.introduce-text p{text-align:justify;color:var(--white-color);line-height:1.5;font-size:.9rem;font-weight:300}.introduce-text-header{display:flex;flex-direction:column;justify-content:space-between;margin-bottom:1em}.introduce-text-header h1{font-size:2.5rem;font-weight:400;line-height:1.2;color:var(--green-color)}.introduce-text-header h6{font-size:1rem;font-weight:300;color:#b9b9b9}.skills-and-degree{display:flex;width:100%;flex-direction:row;justify-content:flex-start;gap:20px;flex-wrap:wrap}.skill-card{width:32%}.skill-card h3{font-size:1.25rem;font-weight:300;margin-bottom:.15em;color:var(--green-color)}.skill-card h6{font-size:.75rem;font-weight:400;color:var(--green-color)}.skill-card p{font-size:.85rem;font-weight:300;color:var(--white-color);margin-bottom:.75em}.card-container{padding-top:2em;background-color:var(--black-color);display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;margin-top:10vh}.card-container h1{font-size:6rem;color:var(--black-color);line-height:1;margin:1em 0}.card-container a{font-weight:700;font-size:.85rem;text-decoration:none;background-color:var(--green-color);padding:.85em 2em;border-radius:5px;transition:.3s all ease-in}.card-container h6{margin-bottom:2em;font-weight:400;font-size:1rem;color:var(--black-color)}.card-container .card{display:flex;max-width:2800px;padding:0 2em;margin-bottom:.5em;overflow:auto}.card-container .card img{width:45%}.card-container .card .card-text{width:55%;padding:1em;gap:10px;display:flex;flex-direction:column;justify-content:center;background-color:var(--black-color);background-color:#303030}.card-container .card .card-text h3{color:var(--white-color);font-weight:400;font-size:2rem;line-height:1}.card-container .card .card-text h6{font-weight:300;font-size:1rem;margin-bottom:.5em;color:var(--white-color)}.card-container .card .card-text p{font-size:1rem;font-weight:300;color:var(--white-color)}.card-container .card .card-text a{text-decoration:none;margin-top:1em;width:-moz-fit-content;width:fit-content;text-align:center;font-weight:300;color:var(--white-color);background-color:transparent;border:1px solid var(--white-color);font-size:.85rem;padding:.5em 1em;border-radius:4px}.card-container .card .card-text a:hover{background-color:var(--white-color);color:var(--mid-black-color)}.graphics-container{display:flex;flex-direction:column;align-items:center;background-color:var(--black-color);transition:.3s all ease-in}.graphics-container .graphics-text{max-width:2800px;min-height:85vh;margin:1em auto 0;padding:2em;display:flex;align-items:center;justify-content:space-between}.graphics-container .graphics-text h1{color:var(--white-color);font-size:2rem;line-height:1;margin:0;padding-bottom:.5em}.graphics-container .graphics-text p{color:var(--white-color);font-size:1rem}.graphics-container .graphics-keywords{width:100%;display:flex;flex-direction:column;align-items:center;background-color:var(--white-color);padding:2em}.graphics-container .graphics-keywords h3{color:var(--black-color);text-align:center;font-size:4rem;margin:.5em 0}.graphics-container .graphics-keywords p{color:var(--black-color);font-size:3em;text-align:center}.graphics-container .graphics-keywords img{width:700px;padding-bottom:1em}.back-to-portfolio{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--black-color)}.back-to-portfolio i{font-size:3.5rem;margin:1em 0;color:var(--white-color);transition:.3s all ease-in}.back-to-portfolio i:hover{color:var(--green-color)}#mywork{max-width:2800px;margin:0 auto;min-height:100vh;padding:2em 4em;gap:15px;display:flex;align-items:center;justify-content:center;overflow:hidden}#mywork .work{display:flex;flex-direction:column;aspect-ratio:1/1;flex:1;background-color:var(--mid-black-color);box-shadow:#0000002e 0 5px 30px;border-radius:18px;overflow:hidden}#mywork .work .app-icon{width:100%;height:55%;margin-bottom:.5em}.graph{background-image:url(/assets/graphic_design_img-CAKordk_.jpg);background-size:cover;background-position:center}.code{background-image:url(/assets/coding_img-DGhAgMQk.jpg);background-size:cover;background-position:center}.ui_ux{background-image:url(/assets/ui_ix_img-DLYjMokb.jpg);background-size:cover;background-position:center}.work-text{display:flex;flex-direction:column;gap:10px;padding:1em}#mywork .work h3{font-size:1.5rem;color:var(--white-color);line-height:1.5;font-weight:400}#mywork .work p{font-weight:300;font-size:.85rem;text-align:justify;line-height:1.5;padding:1em 0}#mywork .work a{text-decoration:none;text-align:center;color:var(--white-color);border:1px solid var(--white-color);font-size:.75rem;font-weight:400;padding:.5em 2em;border-radius:2px;transition:.3s all ease-in;width:-moz-fit-content;width:fit-content}#mywork .work a:hover{background-color:var(--white-color);color:var(--black-color)}.motivation{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.motivation .motivation-wrapper{display:flex;align-items:center;padding:2em}.motivation .motivation-wrapper h3{font-size:2rem;padding:1rem;color:var(--white-color)}.motivation .motivation-wrapper i{display:block;font-size:2rem;color:var(--green-color)}.motivation .motivation-wrapper .fa-arrow-down{display:none}.brief{min-height:86vh;overflow:hidden;display:flex;flex-direction:column;padding:0 2em;background-color:var(--black-color)}.brief .wrapper{max-width:2800px;margin:0 auto}.brief .responsive,.brief .clean_code{display:flex;min-height:100vh;flex-direction:column;align-items:center;justify-content:center;margin-bottom:1em;overflow-x:hidden}.brief .responsive h3,.brief .clean_code h3{color:var(--green-color);font-size:2rem;text-align:center;margin-bottom:.25em;font-weight:300}.brief .responsive h1,.brief .clean_code h1{color:var(--green-color);font-size:8.5rem;font-weight:700}.brief .responsive p,.brief .clean_code p{font-weight:300;font-size:1rem;text-align:center;margin-bottom:1em;width:75%;color:var(--white-color)}.clean_code i{color:var(--green-color);font-size:4rem;margin-bottom:.25em}.brief .responsive img,.brief .clean_code img{width:45%}.clean_code h3{font-size:1rem;font-weight:300}.brief .clean_code span{font-weight:700;color:var(--green-color)}.contact-section{max-width:100%;min-height:100vh;background:var(--white-color);background-position:center;background-size:cover;display:flex;align-items:center;justify-content:center}.contact-wrapper{width:100%;display:flex;align-items:center;justify-content:space-around;padding:2em}.form{display:flex;flex-direction:column;width:45%}.form div{display:flex;align-items:center;gap:10px}.form input{width:100%;padding:1em;margin-bottom:1em;outline:none;border:none;font-family:poppins,sans-serif;font-size:.75rem;color:var(--black-color);background-color:#dddddd87;border-radius:5px}.form textarea{margin-bottom:1em;height:120px;outline:none;border:none;font-family:poppins,sans-serif;font-size:.85rem;color:var(--black-color);background-color:#d6d6d687;border-radius:5px;padding:.5em}.form button{font-family:poppins,sans-serif;align-self:flex-start;width:-moz-fit-content;width:fit-content;font-weight:400;font-size:.85rem;outline:none;border:none;padding:.75em 2em;background-color:var(--green-color);color:var(--white-color);border-radius:5px;cursor:pointer}.form button:hover{background-color:var(--darker-green-color)}.contact-direct{display:flex;flex-direction:column;justify-content:center;padding:1em}.contact-direct h3{font-size:2rem;font-weight:400;line-height:1.5;color:var(--black-color)}.contact-direct span{font-size:1rem;font-weight:300;color:var(--green-color);margin-bottom:.5em}.contact-list{display:flex;flex-direction:column}.contact-list a{text-decoration:none;font-size:1rem;font-weight:300;color:var(--black-color)}footer{background-color:var(--black-color);max-width:100%}.footer-container{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:space-between;padding:2em}.top-footer{display:flex;align-items:center;margin-bottom:2em}.top-footer img{width:150px;margin:1.5em}.top-footer ul{margin:1.5em}.top-footer ul li{list-style:none}.top-footer ul li a{text-decoration:none;color:var(--white-color);font-size:1.25rem;margin-bottom:.5em}.top-footer ul li a:hover{color:var(--green-color)}.copyrights{width:100%}.copyrights p{font-size:1rem;color:var(--green-color);padding:.5em;text-align:center;border-top:1px solid var(--green-color)}.web-project{width:100%;background-color:var(--black-color)}.projects{padding:2em;max-width:2800px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}.project{box-shadow:#00000059 0 5px 15px;border-radius:8px}.project-img{position:relative;width:100%}.project-img img{display:block;cursor:pointer;width:100%;margin:0;opacity:.9;transition:.3s all ease-in-out}.project-img img:hover{opacity:1}.project-img .preloader{display:block;position:absolute;width:20%;top:30%;left:40%;z-index:1}.preloader.preloader-hide{display:none}.project-description{background-color:var(--white-color);color:var(--black-color);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.25em}.project-description h3{font-weight:400;font-size:1rem;font-weight:700;text-align:center;text-transform:uppercase}.project-description h3 span{font-weight:400}.project-description a{text-decoration:none;text-align:center;font-size:.85rem;color:var(--black-color)}.web-intro{max-width:2800px;display:flex;align-items:center;justify-content:space-between;min-height:100vh;background-color:var(--black-color);color:var(--white-color)}.web-intro-text{width:65%;padding-left:2em}.web-intro-text h1{font-size:2.5rem;font-weight:400}.web-intro-text p{font-size:1rem;margin:.5em 0}.web-intro-text a{background-color:var(--green-color);color:var(--white-color);font-size:.85rem;font-weight:400;padding:.5em 1em;text-decoration:none;border-radius:4px}.web-intro-text a:hover{background-color:var(--darker-green-color)}.web-intro-text .repo-link{margin:1.5em 0}.web-intro-image{width:30%;align-self:flex-start}.web-intro-image img{width:100%}.graphic-container{max-width:2800px;position:absolute;background-color:var(--white-color);top:0%;width:100%;min-height:100vh}.top-image-logo{background-position:center;background-size:cover;width:100%;min-height:100vh}.graphic-description{overflow:hidden;display:flex;flex-direction:column;justify-content:center;margin:0 auto;padding:2em;min-height:50vh;width:75%;background-color:var(--white-color);color:var(--black-color)}.graphic-description h1{font-weight:400;font-size:2rem;margin-bottom:.25em}.graphic-description p{font-size:1rem;line-height:1.5;text-align:justify}.graphic-extention1{margin:0 auto;overflow:hidden;margin-top:150vh;max-width:2800px;display:flex;background-color:var(--black-color);flex-direction:column;align-items:center;justify-content:center;padding:4em;width:100%;min-height:50vh}.graphic-extention1 div{width:100%;padding:1em;display:flex;align-items:center;justify-content:center}.graphic-extention1 div img{width:30%;display:flex;align-items:center;justify-content:center}.graphic-extention2{margin:0 auto;max-width:2800px;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--white-color);padding:4em;width:100%;min-height:50vh}.graphic-extention2 div{width:100%;padding:1em}.graphic-extention2 div img{width:40%;display:block;margin:0 auto}.key-logotype{overflow:hidden;background-color:var(--black-color);width:100%;max-width:2800px;display:flex;flex-direction:column;align-items:center;justify-content:center}.key-logotype div{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4em}.key-logotype div img{width:100%;display:block;margin:0 auto}.key-logotype div h1{font-size:2rem;margin-bottom:.25em}.key-logotype div p{font-size:1.5rem;margin-bottom:.5em;cursor:pointer}@media all and (max-width: 1200px){.contents{flex-direction:column}}@media all and (max-width: 1084px){.logoPresentation{flex-direction:column;height:100%}.logoPresentation .logoText{width:90%}.logoPresentation .logoText p{padding-bottom:2em}}@media all and (max-width: 986px){.header{background-color:var(--black-color)}.burger{display:flex;transition:.3s all ease-in}.navbar{margin:0 1em}.nav-links{opacity:0;pointer-events:none;width:100%;flex-direction:column;align-items:flex-start}.nav-links ul{position:fixed;background-color:var(--black-color);flex-direction:column;padding-top:2em;margin-top:2em;width:100%;left:0%;min-height:100vh}.nav-links ul li{text-align:center;padding:0;margin:0 0 1em}.nav-links ul li a{font-size:1.2rem;color:var(--white-color)}.nav-links.activated{opacity:1;pointer-events:all}.burger.clicked .bar:nth-child(2){opacity:0;transition:.3s all ease-in}.burger.clicked .bar:nth-child(1){transform:translateY(8px) rotate(45deg);transition:.3s all ease-in}.burger.clicked .bar:nth-child(3){transform:translateY(-16px) rotate(-45deg);width:100%;transition:.3s all ease-in}.leftSide{width:90%}.logo-mockup img{width:700px}.touch-container,#mywork{flex-direction:column}#mywork .work{width:100%;min-height:100%}.card-container .card{flex-direction:column;align-items:center;justify-content:center;width:100%;padding:0}.card-container .card img,.card-container .card .card-text{width:100%;border-radius:0}.card-container .card .card-text h3{font-size:1.5rem;text-align:start}.card-container .card .card-text p{text-align:start}.card-container .card .card-text a{padding:.5em 1.5em;font-size:.85em}.motivation{border-top:1px solid var(--white-color);min-height:50vh}.motivation .motivation-wrapper{flex-direction:column}.motivation .motivation-wrapper h3{text-align:center;line-height:1.2}.motivation .motivation-wrapper .fa-arrow-down{display:block}.motivation .motivation-wrapper .fa-arrow-right{display:none}.form{width:100%}.form div{flex-direction:column}.introduce{flex-direction:column;align-items:center;justify-content:space-between;margin-bottom:1em}.introduce-picture{align-self:flex-start;width:60%}.introduce-picture img{width:90%;border-radius:10px}.introduce-text{display:flex;width:100%;flex-direction:column}.introduce-text p{font-size:.75rem}.introduce-text-header h1{font-size:1.5rem}.skills-and-degree{gap:10px}.skill-card{width:48%}.skill-card h3{font-size:.85rem}.skill-card h6,.skill-card p{font-size:.65rem}.form button{width:100%}.main-about{padding:1em;margin-top:10vh}}@media all and (max-width: 768px){.success-form-container{min-height:100vh}.success-form-container div{width:90%}.success-form-container div a{font-size:.65rem}.work-logo{flex-direction:column-reverse}.work-logo h1{margin-bottom:.5em}.work-logo h1{display:none}.introduction h1{font-size:2.5rem}.card-container h1{font-size:4rem}.graphics-container .graphics-text{min-height:100vh}.graphics-container .graphics-keywords{padding:0}.graphics-container .graphics-keywords img{width:100%;padding-bottom:0}.logo-mockup img{width:550px}.contact-wrapper{flex-direction:column;align-items:center;padding:1em;min-height:100%}.form{margin-bottom:.25em}.contact-direct{align-items:center}.contact-direct h3{text-align:center;font-size:1rem}.contact-direct span{text-align:center;font-size:.75rem}.contact-list a{text-align:center;font-size:.85rem}.top-footer{flex-direction:column}.brief{padding:1em;min-height:50vh}.responsive{display:none}.brief .responsive,.brief .clean_code{min-height:100%}.top-image-logo{min-height:50vh}.graphic-description{width:100%;padding:1em}.graphic-description h1{font-size:1.5rem}.graphic-description p{font-size:.85rem}.graphic-extention1{margin-top:100vh;padding:4em;width:100%;min-height:50vh}.graphic-extention1 div{width:100%;padding:1em}.graphic-extention1 div img{width:60%;display:block;margin:0 auto}.graphic-extention2{min-height:50vh;padding:.5em 0}.graphic-extention2 div img{width:100%}.key-logotype div{min-height:100%}}@media all and (max-width: 568px){.burger .bar{width:38px;height:4px;background-color:var(--white-color);transition:.3s all ease-in}.leftSide h1{font-size:1.5rem}.introduce{flex-direction:column;align-items:center;justify-content:space-between;margin-bottom:1em}.introduce-picture{width:100%}.introduce-picture img{width:100%;display:block;margin:0 auto;border-radius:6px}.introduce-text p{font-size:.75rem}.introduce-text-header{margin:1em 0}.introduce-text-header h1{font-size:1.5rem}.introduce-text-header h6{font-size:.85rem}.skill-card{width:100%;margin-bottom:.75em}.skill-card h3{font-size:.85rem}.skill-card h6,.skill-card p{font-size:.65rem}.theme .toggle{width:2rem;fill:var(--white-color)}.introduction h1{font-size:3rem}.introduction h6,.introduction p{font-size:1rem}.brief .responsive p,.clean_code p,.brief .responsive img,.brief .clean_code img{width:100%}#mywork{padding:1em;flex-direction:column}#mywork .work{aspect-ratio:.5}.app-icon{height:60%}#mywork .work h3{font-size:1rem}#mywork .work p{font-size:.85rem}#mywork .work a{font-size:.75rem;padding:.5em}.card-container h1{font-size:2rem}.card-container .card{padding:0}.card-container .card .card-text a{padding:.5em}.graphics-container .graphics-keywords h3{font-size:2rem}.graphics-container .graphics-keywords P{font-size:1.2rem;padding-bottom:.25em}.logo-mockup img{width:450px}.logoText h1{font-size:1.25rem}.construction img{width:280px}.brief{min-height:100%}.brief .responsive h3,.brief .clean_code h3{font-size:1rem}.brief .responsive p,.brief .clean_code p{width:100%;text-align:justify;margin-bottom:0}.brief .responsive img,.brief .clean_code img{width:100%}.brief .responsive{min-height:50vh}.brief .responsive h3{font-size:1.5rem}.brief .responsive p{font-size:.85rem;text-align:start}.web-intro div h1{font-size:1.5rem}.web-intro{flex-direction:column-reverse}.web-intro-text{width:100%}.web-intro-image{width:90%}}@media all and (max-width: 468px){.work-logo h1{font-size:2em}.introduction h1{font-size:15rem}.theLogo,.nav{padding:0 4em}.introduction h6{font-size:.65rem}.name-and-role{margin-bottom:1em}.logo-mockup img{width:320px}}