:root{--color-opacity:rgba(0,0,0,0.148);--color-white:#fff;--color-light:#f4f4f4;--color-dark:#525252;--color-black:#141415;--color-primary:#f24e1e;--color-primary-light:hsl(14,89%,53%,12%);--color-success:#29f5a6;--color-warning:#ffce31;--transition:all 300ms ease}
*{margin:0;padding:0;outline:0;border:0;box-sizing:border-box;list-style:none;text-decoration:none}
html{font-size:15px;scroll-behavior:smooth}
body{background:var(--color-white);font-family:"Montserrat",sans-serif;color:var(--color-dark);max-width:100vw}
p{line-height:1.8}
img{width:100%}
.flex-gradient{-webkit-animation:colors 15s ease-in-out infinite;animation:colors 15s ease-in-out infinite;background:linear-gradient(45deg,#5e1900,#000,#5e1900);background-size:300% 300%}
@keyframes colors {
0%{background-position:0 0}
50%{background-position:100% 100%}
100%{background-position:0 0}
}
@media screen and (min-width: 1290px) {
#left{margin-left:50%;margin-top:-65%;width:100%;float:left}
}
@media screen and (min-width: 800px) {
#canva{align-items:auto;display:grid;margin-right:-5%;margin-bottom:-1%;float:left;width:100%;padding:20px 30px 20px 20px}
}
@media screen and (min-width: 950px) {
#cursos{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
}
.btn{padding:1.4rem 3.4rem;font-size:1.1rem;color:var(--color-black);background:var(--color-white);display:inline-block;margin:2rem 0;transition:var(--transition)}
.btn:hover{box-shadow:0 2rem 2rem var(--color-primary-light)}
.btn-primary{background:var(--color-primary);color:var(--color-white)}
section.cursos{background:var(--color-light)}
section.cursos .container{display:grid;grid-template-columns:repeat(1,1fr);gap:2rem}
section.cursos .container .curso{background:var(--color-white);padding:3rem 2rem;text-align:center;display:flex;flex-direction:column;gap:2rem;cursor:default;transition:var(--transition)}
section.cursos .container .curso.hover{box-shadow:0 3rem 3rem var(--color-primary-light)}
section.cursos .container .curso span{background:var(--color-primary);width:4rem;height:4rem;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--color-white)}
section.cursus .container .curso:nth-child(2) span{background:var(--color-warning);background:var(--color-success)}
section.skills .container .skill .items.show-items{display:block}
section.landing .container{grid-template-columns:3fr;grid-template-rows:10% 10%;row-gap:3rem}
section.skills .container{width:100%}
section.cursos .container .projects{grid-template-columns:1fr}
.Txtfont{font-size:1.6vw}
.fontImg{width:8%;height:auto}
.Txtfont{font-size:2vw;margin:10px;color:#fff}
h1.hover{padding:10px;text-transform:uppercase;letter-spacing:4px}
.container{width:90%;margin:0 auto}
section{padding:12vw 0 15vw;max-width:100vw;overflow-x:hidden}
section h1{text-align:center;margin:0 auto;display:block;margin-bottom:6vw}
section .color_btn img{width:6vw;height:6vw}
.nav-tabs{border:0;margin-bottom:2vw;font-size:1.4vw}
.ImgProject{height:40rem}
a,a:hover{text-decoration:none}
.neonSkill a{padding:10px;margin:10px 0;color:#FFF;letter-spacing:4px;border-color:#f99900;font-size:1.5vw}
@media screen and (max-width: 999px) {
section.landing .container{grid-template-columns:3fr;grid-template-rows:10% 10%;row-gap:0}
.g-5,.gy-5{--bs-gutter-y:0}
.g-5,.gx-5{--bs-gutter-x:0}
#text-skill{line-height:1.4;font-size:2vw}
.ImgProject{height:auto}
.Txtfont{font-size:2.5vw}
.fontImg{width:15%}
.nav-tabs{border:0;margin-bottom:1vw;font-size:1.4vw}
}
@media screen and (max-width: 768px) {
.Txtfont{font-size:3vw}
h1.hover{font-size:3.5vw}
.container-button{display:grid;grid-template-columns:300px 300px}
.fontImg{width:20%}
}
@media screen and (max-width: 578px) {
.Txtfont{font-size:4vw}
h1.hover{font-size:4vw}
#text-skill{line-height:1.4;font-size:2.5vw}
section{padding:6rem 0 4rem;max-width:100vw;overflow-x:hidden}
.fontImg{width:22.5%}
.neonSkill a{font-size:2vw}
}
@media screen and (max-width: 350px) {
.Txtfont{font-size:5vw}
h1.hover{font-size:4.5vw}
.neonSkill a{font-size:4vw}
.neon a,.neonSkill a{padding:0 5px;margin:10px 0;color:#FFF;letter-spacing:4px;border-color:#f99900}
.fontImg{width:25%}
}
@media screen and (max-width: 300px) {
#text-skill{line-height:1.5;font-size:4.3vw}
.neonSkill a{padding:5px 2px}
.fontImg{width:27.5%}
}