/*===============VARIABLES CSS===============*/:root{--header-height: 3rem; /*==========Colors==========*/ /*Color mode HSL(hue, saturation, lightness)*/ --accent-color: #2ea4ff; --grey-color: #454954; --hue: 225; --first-color: hsl(var(--hue), 10%, 30%); --first-color-alt: hsl(206, 100%, 59%); --first-color-light: hsl(var(--hue), 24%, 66%); --first-color-lighten: hsl(var(--hue), 24%, 92%); --title-color: hsl(var(--hue), 4%, 15%); --title-color-alt: hsl(206, 10%, 30%); --text-color: hsl(var(--hue), 4%, 35%); --text-color-light: hsl(var(--hue), 4%, 55%); --body-color: hsl(var(--hue), 0%, 100%); --container-color: #FFF; --tag-bg-color: var(--first-color-alt); --github: #171515; --twitter: #00ACEE; --discord: #5865F2; /*==========Font and typography==========*/ /*.5rem=8px | 1rem=16px ...*/ --body-font: 'Poppins', sans-serif; --big-font-size: 2rem; --h1-font-size: 1.5rem; --h2-font-size: 1.25rem; --h3-font-size: 1rem; --normal-font-size: .938rem; --small-font-size: .813rem; --smaller-font-size: .75rem; /*==========Font weight==========*/ --font-medium: 500; --font-semi-bold: 600; /*==========Margenes Bottom==========*/ /*.5rem=8px | 1rem=16px ...*/ --mb-0-25: .25rem; --mb-0-5: .5rem; --mb-0-75: .75rem; --mb-1: 1rem; --mb-1-5: 1.5rem; --mb-2: 2rem; --mb-2-5: 2.5rem; /*==========z index==========*/ --z-tooltip: 10; --z-fixed: 100;}@media screen and (min-width: 968px){:root{--big-font-size: 3.5rem; --h1-font-size: 2.25rem; --h2-font-size: 1.5rem; --h3-font-size: 1.25rem; --normal-font-size: 1rem; --small-font-size: .875rem; --smaller-font-size: .813rem;}}/*===============BASE===============*/*{-webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}html{scroll-behavior: smooth;}body,button,input,textarea{font-family: var(--body-font); font-size: var(--normal-font-size);}body{margin: var(--header-height) 0 0 0; background-color: var(--body-color); color: var(--text-color); -webkit-transition: .4s; transition: .4s;}button{cursor: pointer; border: none; outline: none;}h1, h2, h3{color: var(--title-color); font-weight: var(--font-semi-bold);}ul{list-style: none;}a{text-decoration: none;}img{max-width: 100%; height: auto;}/*===============THEME===============*//*==========Variables Dark theme==========*/body.dark-theme{--first-color-dark: hsl(var(--hue), 8%, 20%); --title-color: hsl(var(--hue), 4%, 95%); --title-color-alt: var(--first-color-alt); --text-color: hsl(var(--hue), 4%, 75%); --body-color: hsl(var(--hue), 8%, 12%); --container-color: hsl(var(--hue), 8%, 16%);}/*==========Button Dark/Light==========*/.change-theme{color: var(--first-color-alt); font-size: 1.15rem; cursor: pointer;}.nav__btns{display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 1rem; column-gap: 1rem;}.dark-theme .scroll-header{-webkit-box-shadow: 0 1px 4px hsla(var(--hue), 4%, 4%, 0.3); box-shadow: 0 1px 4px hsla(var(--hue), 4%, 4%, 0.3);}/*===============REUSABLE CSS CLASSES===============*/.section{padding: 3rem 0 1rem;}.section__title, .section__title-center{font-size: var(--h2-font-size); margin-bottom: var(--mb-1); line-height: 130%; position: relative; padding-bottom: var(--mb-0-5);}.section__title::before, .section__title-center::before{content: attr(data-title); display: block; margin-bottom: -0.5rem; color: var(--first-color-alt); font-size: var(--small-font-size); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 3px;}.section__title-center, .section__title-center-center{text-align: center;}.section__title-center:after, .section__title-center-center:after{content: ""; position: absolute; width: 3rem; height: 3px; border-radius: 3px; background-color: var(--first-color-alt); bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}.container{max-width: 968px; margin-left: var(--mb-1-5); margin-right: var(--mb-1-5);}.grid{display: -ms-grid; display: grid; gap: 1.6rem; -ms-grid-columns: (minmax(220px, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}.icon{width: var(--normal-font-size);}.svg__img{width: 300px; -ms-grid-column-align: center; justify-self: center;}.expand-link{margin-top: var(--mb-1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;}.expand-link a{display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--title-color); font-weight: var(--font-medium); opacity: 0.9; -webkit-transition: 0.3s; transition: 0.3s;}.expand-link a:hover{-webkit-transform: translateX(0.25rem); transform: translateX(0.25rem);}.main{overflow: hidden;}/*===============HEADER===============*/.header{width: 100%; background-color: var(--body-color); position: fixed; top: 0; left: 0; z-index: var(--z-fixed); -webkit-transition: .4s; transition: .4s;}/*===============NAV===============*/.nav{height: var(--header-height); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}.nav__toggle, .nav__close{color: var(--first-color-alt);}.nav__logo{cursor: pointer; height: 1.25rem; margin-top: 0.4rem;}.nav__logo-web{display: none;}.nav__toggle{display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 1.25rem; cursor: pointer;}@media screen and (max-width: 767px){.nav__menu{position: fixed; background-color: var(--container-color); width: calc(100% - (4.4rem)); height: 100%; top: 0; right: -100%; -webkit-box-shadow: -2px 0 4px hsla(var(--hue), 24%, 15%, 0.1); box-shadow: -2px 0 4px hsla(var(--hue), 24%, 15%, 0.1); padding: 4rem 0 0 3rem; border-radius: 0.5rem 0 0 0.5rem; -webkit-transition: .3s; transition: .3s; z-index: var(--z-fixed);}}.nav__close{font-size: 1.5rem; position: absolute; top: 1rem; right: 1.25rem; cursor: pointer;}.nav__list{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 1.5rem;}.nav__link{color: var(--title-color); font-weight: var(--font-medium);}.nav__link:hover{color: var(--first-color-alt);}/* Show menu */.show-menu{right: 0;}/* Change background header */.scroll-header{-webkit-box-shadow: 0 1px 4px hsla(var(--hue), 4%, 15%, 0.1); box-shadow: 0 1px 4px hsla(var(--hue), 4%, 15%, 0.1);}/* Active link */.active-link{position: relative; color: var(--first-color-alt);}.active-link::after{content: ''; position: absolute; bottom: -.5rem; left: 0; width: 50%; height: 2px; background-color: var(--first-color-alt);}/*=====HOME=====*/.home{padding: 3rem 0 0;}.home__container{padding: 2rem 0; position: relative; row-gap: 2rem;}.home__data{-ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; margin-left: 3rem;}.home__data-btn{display: inline-block; background-color: var(--first-color); color: #FFF; padding: 1rem 1.75rem; margin-top: 1rem; border-radius: .5rem;}.home__title{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: var(--title-color-alt); font-size: var(--big-font-size); line-height: 1.1;}.home__title-typed, .home__title-cursor, .home__title-typing{font-size: var(--h3-font-size); color: var(--title-color-alt); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.home__title-cursor{display: inline-block; margin-left: 0.1rem; width: 3px; -webkit-animation: blink 1s infinite; animation: blink 1s infinite;}.home__title-typing{-webkit-animation: none; animation: none;}@-webkit-keyframes blink{0%{background-color: var(--title-color-alt);}49%{background-color: var(--title-color-alt);}50%{background-color: transparent;}99%{background-color: transparent;}100%{background-color: var(--title-color-alt);}}@keyframes blink{0%{background-color: var(--title-color-alt);}49%{background-color: var(--title-color-alt);}50%{background-color: transparent;}99%{background-color: transparent;}100%{background-color: var(--title-color-alt);}}.home__cto{cursor: pointer; margin-top: var(--mb-0-5); color: var(--title-color-alt); font-weight: var(--font-semi-bold); -webkit-transition: 0.3s ease-in; transition: 0.3s ease-in;}.home__cto:hover{text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px;}.home__social{position: fixed; top: 8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: .4s; transition: .4s;}.home__social-icon{width: -webkit-max-content; width: -moz-max-content; width: max-content; margin-bottom: var(--mb-0-75); font-size: 1.5rem; color: var(--second-color);}.home__social-twitter:hover{color: var(--twitter);}.home__social-discord:hover{color: var(--discord);}.hide-social{display: none;}.scroll-down{display: none;}/*===============BUTTONS===============*/.button{display: inline-block; background-color: var(--first-color); color: #FFF; padding: 0.85rem 2rem; border-radius: 2rem; font-weight: var(--font-medium); -webkit-transition: .3s; transition: .3s;}.button:hover .button__icon{-webkit-transform: translateX(0.25rem); transform: translateX(0.25rem);}.button:hover{background-color: var(--first-color-alt);}.button__icon{-webkit-transition: .3s; transition: .3s;}.button-flex{display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: .5rem; column-gap: .5rem;}.button-link{background: none; padding: 0; color: var(--title-color);}.button-link:hover{background-color: transparent;}/*===============SKILLS===============*/.skills__container{-webkit-column-gap: 5rem; column-gap: 5rem;}.skills__description{margin-bottom: var(--mb-1);}.skills__subtitle{margin-bottom: 0.2rem; font-size: var(--normal-font-size);}.skills__box{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.skills__name{display: inline-block; font-size: var(--small-font-size); margin-right: var(--mb-0-5); margin-bottom: var(--mb-0-5); padding: .2rem .5rem; color: var(--first-color-lighten); background-color: var(--first-color); border-radius: .25rem;}.skills_img{display: none;}/*===============SERVICES===============*/.services__container{padding-top: 1rem;}.services__data{display: -ms-grid; display: grid; row-gap: 1rem; text-align: center; padding: 1.5rem; border-radius: 0.5rem; -webkit-box-shadow: 0 0 10px 0 rgba(196, 196, 196, 0.25); box-shadow: 0 0 10px 0 rgba(196, 196, 196, 0.25);}.services__icon{color: var(--first-color-alt);}.services__modal{position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 1rem; z-index: var(--z-fixed); opacity: 0; visibility: hidden; -webkit-transition: .3s; transition: .3s;}.services__modal-content{position: relative; max-width: 400px; background-color: var(--container-color); padding: 1.5rem; border-radius: .5rem;}.services__modal-title{display: -webkit-box; display: -ms-flexbox; display: flex; font-size: var(--h3-font-size); margin-bottom: var(--mb-1-5);}.services__modal-close{position: absolute; top: 1.5rem; right: 1rem; font-size: 1.5rem; color: var(--first-color-alt); cursor: pointer;}.services__modal-service{display: -webkit-box; display: -ms-flexbox; display: flex; row-gap: 1rem; text-align: start; line-height: 1.3;}.services__modal-service:last-child{margin-top: 1rem;}.services__modal-icon{color: var(--first-color-alt); margin-right: 0.4rem;}/* Active Modal */.active-modal{opacity: 1; visibility: visible;}/*===============PROJECTS===============*/.projects__filters, .projects__data{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.projects__filters{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: var(--mb-1);}.projects__filter{cursor: pointer; display: inline-block; font-size: var(--small-font-size); margin-right: var(--mb-0-5); padding: .25rem .5rem; border-radius: .25rem;}.projects__data{position: relative; overflow: hidden; border-radius: 1rem; height: 200px; width: 100%;}.projects__image{position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: 0.5s; transition: 0.5s;}.projects__image-overlay{position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: var(--z-tooltip); color: var(--first-color-alt); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; padding: 2rem; opacity: 0; -webkit-transition: 0.5s; transition: 0.5s;}.projects [data-class="web-development"] .projects__image-overlay{background-color: rgba(58, 34, 41, 0.6);}.projects [data-class="data-science"] .projects__image-overlay{background-color: rgba(17, 95, 100, 0.6);}.projects [data-class="others"] .projects__image-overlay{background-color: rgba(45, 159, 73, 0.6);}.projects__title, .projects__icons a{color: #fff; line-height: 1.1;}.projects__tags{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.4rem;}.projects__tag{display: inline-block; font-size: var(--smaller-font-size); margin: 0.3rem 0; padding: 0.05rem 0.3rem; color: #fff; background-color: var(--first-color-alt); border-radius: 0.4rem;}.projects__icons{display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: var(--mb-0-5);}.projects__icons a{font-size: 2rem;}.projects__data:hover .projects__image-overlay{opacity: 1;}.projects__data:hover .projects__image{-webkit-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1);}.projects__filter:hover, .active__project{border-bottom: 2px solid var(--first-color-alt);}/*===============CONTACT===============*/.contact__container{row-gap: 3.5rem;}.contact__data{display: -ms-grid; display: grid; row-gap: 2rem;}.contact__subtitle{font-size: var(--normal-font-size); font-weight: var(--font-medium); color: var(--text-color); margin-bottom: var(--mb-0-5);}.contact__description{display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: .5rem; column-gap: .5rem; color: var(--title-color); font-weight: var(--font-medium);}.contact__icon{font-size: 1.25rem;}.contact__inputs{display: -ms-grid; display: grid; row-gap: 2rem; margin-bottom: var(--mb-2-5);}.contact__content{position: relative; height: 3rem; border-bottom: 1px solid var(--text-color-light);}.contact__input{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 1rem 1rem 1rem 0; background: none; color: var(--text-color); border: none; outline: none; z-index: 1;}.contact__input:focus + .contact__label{top: -.75rem; left: 0; font-size: var(--smaller-font-size); z-index: 10;}.contact__input:not(:placeholder-shown).contact__input:not(:focus) + .contact__label{top: -.75rem; font-size: var(--smaller-font-size); z-index: 10;}.contact__label{position: absolute; top: .75rem; width: 100%; font-size: var(--small-font-size); color: var(--text-color-light); -webkit-transition: .3s; transition: .3s;}.contact__area{height: 7rem;}.contact__area textarea{resize: none;}/*===============FOOTER===============*/.footer__copy{text-align: center; font-size: var(--smaller-font-size); color: var(--text-color); margin: 2rem 0;}/*===============SCROLL UP===============*/.scrollup{position: fixed; background: var(--first-color); right: 1rem; bottom: -30%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: .5rem; border-radius: .25rem; z-index: var(--z-tooltip); opacity: .8; -webkit-transition: .4s; transition: .4s;}.scrollup:hover{background-color: var(--first-color); opacity: 1;}.scrollup__icon{font-size: 1rem; color: #FFF; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite;}@-webkit-keyframes bounce{0%, 20%, 50%, 80%, 100%{-webkit-transform: translateY(0); transform: translateY(0);}40%{-webkit-transform: translateY(-0.6rem); transform: translateY(-0.6rem);}}@keyframes bounce{0%, 20%, 50%, 80%, 100%{-webkit-transform: translateY(0); transform: translateY(0);}40%{-webkit-transform: translateY(-0.6rem); transform: translateY(-0.6rem);}}/* Show Scroll Up*/.show-scroll{bottom: 3rem;}/*===============SCROLL BAR===============*/::-webkit-scrollbar{width: .6rem; background: hsl(var(--hue), 4%, 53%);}::-webkit-scrollbar-thumb{background: hsl(var(--hue), 4%, 29%); border-radius: .5rem;}/*===============BREAKPOINTS===============*//* For small devices */@media screen and (max-width: 320px){.container{margin-left: var(--mb-1); margin-right: var(--mb-1);}.home__title{font-size: var(--h1-font-size);}.svg__img{width: 100%;}}/* For medium devices */@media screen and (min-width: 576px){.home{padding: 4rem 0 0;}.home__container div{padding: 1rem 0;}.home__data{margin-left: 0;}.home__social{top: 30%; position: relative; padding-top: 0; padding-bottom: 2.5rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-item-align: end; align-self: flex-end;}.home__social-icon{margin-bottom: 0; margin-right: var(--mb-1-5);}.hide-social{display: initial;}.skills__container, .projects__container{-ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); -webkit-box-align: center; -ms-flex-align: center; align-items: center;}.skills_data{text-align: initial;}.skills_img{display: initial; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1;}}@media screen and (min-width: 767px){body{margin: 0;}.nav{height: calc(var(--header-height) + 1.5rem); -webkit-column-gap: 2rem; column-gap: 2rem;}.nav__toggle, .nav__close{display: none;}.nav__menu{margin-left: auto;}.nav__list{-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-column-gap: 2rem; column-gap: 2rem;}.home__container, .contact__container{-ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr);}.home__container{-webkit-box-align: center; -ms-flex-align: center; align-items: center;}.home__img{width: 280px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;}}/* For large devices */@media screen and (min-width: 992px){.container{margin-left: auto; margin-right: auto;}.section{padding: 4rem 0 1rem;}.section__title, .section__title-center{font-size: var(--h1-font-size);}.home{padding-top: 13rem;}.home__description{padding-right: 7rem;}.scroll-down{display: block; border: 2px solid var(--title-color-alt); position: absolute; margin: 0 auto; left: 0; right: 0; border-radius: 20px; height: 50px; width: 30px;}.scroll-down::before{-webkit-animation: scrollDownAnimation 2s infinite; animation: scrollDownAnimation 2s infinite; background-color: var(--title-color-alt); border-radius: 100%; content: ''; height: 6px; left: 0; margin: 0 auto; position: absolute; right: 0; top: 10px; width: 6px;}@-webkit-keyframes scrollDownAnimation{0%{opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0);}40%{opacity: 1;}80%{opacity: 0; -webkit-transform: translate(0, 20px); transform: translate(0, 20px);}100%{opacity: 0;}}@keyframes scrollDownAnimation{0%{opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0);}40%{opacity: 1;}80%{opacity: 0; -webkit-transform: translate(0, 20px); transform: translate(0, 20px);}100%{opacity: 0;}}.projects__container{-ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr);}.svg__img{width: 470px;}}@media screen and (min-width: 1200px){.home__social{row-gap: 4.5rem;}.home__social-follow{font-size: var(--small-font-size);}.home__social-follow::after{width: 1.5rem; right: -60%;}.home__social-link{font-size: 1.15rem;}.scrollup{right: 3rem;}}