:root{--color-fondo: #121212;--color-fondo-fin: #2c3e50;--color-letras-principales: #FFFFFF;--color-letras-accento: #6F2DA8;--color-letras-secundarias: #808080;--color-acento-neon-1: #FF6F61;--color-acento-neon-2: #39FF14;--color-acento-neon-3: #FFC300;--color-acento-neon-4: #00E8FF;--color-botones-principales: #FF7F50;--color-botones-hover: #FF4500;--color-botones-texto: #FFFFFF;--color-borde: #4B0082;--color-borde-neon: #FF00FF;--color-fondo-alternativo: #1E1E1E}body{margin:0;padding:0;min-height:100vh;background:linear-gradient(var(--color-fondo),var(--color-fondo-fin));font-family:monospace}.layout{width:85%;margin:0 auto;color:var(--color-letras-principales)}.header{height:130px;display:flex;justify-content:center;align-items:center;color:var(--color-letras-principales);margin-bottom:35px;letter-spacing:1px}.header .logo{display:flex;flex:1 1 auto;text-transform:uppercase;letter-spacing:1px}.header .logo h3{display:flex;flex-basis:40px;margin-left:40px;font-weight:200}.header a{flex:2 1 auto;text-decoration:none;color:var(--color-acento-neon-3)}.header a:hover{color:var(--color-acento-neon-2);transition:all .3s;font-size:18px}.header ul{height:130px;display:flex;justify-content:center;align-items:center;list-style:none}.header li{text-transform:uppercase;font-weight:700;font-size:16px;margin-left:10px;margin-right:10px}.header .span__v{color:red;margin-left:1px}.header .marca{font-size:45px;font-weight:800}.content{min-height:400px;font-family:Arial,Helvetica,sans-serif}.about_me{display:flex;padding:5px;justify-content:center;align-items:center;font-family:monospace}.about_me img{border-radius:9999px;padding:10px}.about_me .photo{display:flex;align-items:center;justify-content:center;width:50%;margin-top:10px;margin-right:15px;padding:3px}.about_me .photo:hover{cursor:pointer;transform:rotate(10deg) scale(1.2)}.about_me .description{width:100%;display:flex;flex-wrap:wrap;padding:20px}.about_me .description h1{width:100%;height:40px;font-weight:bolder;font-size:35px;color:var(--color-acento-neon-3);text-wrap:nowrap;white-space:nowrap;overflow:hidden;animation:typing 4s steps(20) infinite alternate-reverse;visibility:visible}@keyframes typing{0%{width:.1ch}to{width:100%}}.about_me .description h3{width:100%}.about_me .description strong{color:var(--color-acento-neon-2)}.about_me .icons{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:20px}.about_me .icons a img{width:40px;height:40px;transition:all .3s}.about_me .icons a img:hover{transform:scale(1.2);box-shadow:1px 3px #fff}.portafolio{font-family:monospace;font-size:large}.portafolio-title{font-size:40px;display:grid;place-items:center;margin-top:50px;color:var(--color-acento-neon-3)}.works{display:flex;flex-wrap:wrap;padding:20px;justify-content:flex-start;align-items:center;flex-direction:column}.project-info{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;flex-direction:column;width:50%;padding:10px;margin-left:20px;height:300px}.project-info a{color:var(--color-acento-neon-3);text-decoration:none;transition:all .3s}.project-info a:hover{color:var(--color-acento-neon-2);font-size:25px}.project-desc{text-align:center;margin-top:20px}.project-item{display:flex;width:100%;flex-grow:1;flex-direction:row;flex-wrap:wrap;align-items:center;box-sizing:border-box;margin:20px;overflow:hidden;position:relative}.project-item img{width:100%;height:auto;transition:all .5s;cursor:pointer}.project-item .mask{margin-right:20px;max-width:348px;object-fit:cover;box-shadow:0 5px 10px wheat;box-sizing:border-box;transition:transform .5s}.project-item .mask:hover{transform:scale(1.2)}.project-tech img{margin-top:20px;width:40px;height:auto;margin-right:20px;box-shadow:0 2px 5px wheat}.project-tech img:hover{transform:scale(1.6);border-radius:50%}#contacto{font-family:monospace;font-size:large}.contact_name{display:flex;align-items:center;justify-content:center;width:100%;color:var(--color-acento-neon-3);font-size:40px}.contact{display:grid;place-items:center}input[type=text],input[type=email],textarea{display:block;padding:15px;width:250px;margin-top:25px;border-radius:3%;font-weight:bolder;border-color:#fff;background-color:transparent;font-size:14px;color:#fff}input[type=submit]{margin-top:50px;margin-bottom:30px;width:100px;background-color:var(--color-acento-neon-2);color:#1e1e1e;border:0px;border-radius:5%;font-size:15px;padding:10px;font-weight:700;cursor:pointer}input[type=submit]:hover{transform:scale(1.2);transition:all .3s;box-shadow:1px 2px #fff}.correo-alternativo{display:flex;align-items:center;justify-content:center;margin-bottom:25px}.correo-alternativo-btn{width:120px;background-color:var(--color-acento-neon-3);color:#1e1e1e;border:0px;border-radius:5%;font-size:10px;padding:5px;font-weight:700;cursor:pointer;margin-left:10px}.correo-alternativo-btn:hover{transform:scale(1.1);transition:all .3s;box-shadow:1px 2px #fff}footer{min-height:150px;line-height:120px;border-top:2px solid white;color:var(--color-acento-neon-3);text-align:center;font-size:14px}footer .react_logo img{width:35px;height:auto;margin-left:15px;margin-top:10px}footer .react_logo img:hover{transform:scale(1.2);transition:all .3s}@media (max-width: 768px){.header{display:flex;flex-wrap:wrap;margin-bottom:10px}div.logo{width:100%;align-items:center;justify-content:center}.header .marca{font-size:50px}.header .logo h3{justify-content:flex-end}.header nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.header ul{display:flex;flex-shrink:initial;list-style:none;margin:0;padding:0;height:40px;flex-wrap:nowrap}.header a{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%;height:35px;font-size:10px;padding:2px}.header a:hover{font-size:11px}.about_me{flex-direction:column;align-items:center;text-align:center}.about_me .icons{display:flex;flex-wrap:wrap;gap:0px}.about_me .icons a img{width:30px;height:auto}#typing-text{font-size:25px}.photo img{width:150px;height:150px}.description{justify-content:center}.description h1{font-size:24px}.description h3{font-size:18px}.description p{font-size:14px}.description a img{width:30px;height:30px;margin:5px}.portafolio{padding:10px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.portafolio-title{font-size:1.5rem}.works{flex-direction:column;align-items:center;margin-left:-15px}.project-item{max-width:100%;display:flex;justify-content:center;align-items:center}.mask{width:80%}.project-info{width:80%;flex-wrap:wrap;margin-bottom:10px;margin-left:-20px}.project-url{text-align:center}.project-url a{font-size:16px}.project-url a:hover{font-size:14px}.project-desc{width:100%;font-size:.9rem;margin-bottom:10px}.project-tech{display:flex;width:100%;justify-content:center;align-items:center;gap:15px;margin-top:20px}.project-tech img{width:30px;margin-bottom:10px;margin-top:10px}.tech-icon{width:25px;height:25px}#contacto{margin-top:-75px;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.contact_name{display:flex;align-items:center;justify-content:center;width:100%}.footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:106%;font-size:10px}.foter .react_logo img{width:35px;height:auto;margin-left:15px;margin-top:10px}}@media (min-width: 769px) and (max-width: 1035px){.header{display:flex;flex-wrap:wrap;margin-bottom:10px}div.logo{width:100%;align-items:center;justify-content:center}.header .marca{font-size:50px}.header .logo h3{justify-content:flex-end}.header nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.header ul{display:flex;flex-shrink:initial;list-style:none;margin:0;padding:0;height:40px;flex-wrap:nowrap}.header a{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%;height:35px;font-size:18px;padding:2px}.header a:hover{font-size:20px}.about_me{flex-direction:row;justify-content:space-around}.photo img{width:200px;height:200px}.description h1{font-size:28px}.description h3{font-size:20px}.description p{font-size:16px}.description a img{width:40px;height:40px;margin:10px}.works{flex-direction:column;align-items:center;margin-left:-15px}.project-item{max-width:100%;display:flex;justify-content:center;align-items:center}.mask{width:80%}.project-info{width:80%;flex-wrap:wrap;margin-bottom:10px;margin-left:-20px}.project-url{text-align:center}.project-url a{font-size:18px}.project-url a:hover{font-size:20px}.project-desc{width:100%;font-size:.9rem;margin-bottom:10px}.project-tech{display:flex;width:100%;justify-content:center;align-items:center;gap:15px;margin-top:20px}.project-tech img{width:45px;margin-bottom:10px;margin-top:10px}.tech-icon{width:25px;height:25px}#contacto{margin-top:-75px;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.contact_name{display:flex;align-items:center;justify-content:center;width:100%}}@media (min-width: 1035px){.about_me{flex-direction:row;justify-content:space-between}.photo img{width:250px;height:250px}.description h1{font-size:32px}.description h3{font-size:24px}.description p{font-size:18px}.description a img{width:50px;height:50px;margin:15px}}
