*{box-sizing:border-box;font-family:sans-serif;scroll-behavior:smooth}body{margin:0;padding:.1px;background:#0d2a3f}img{width:352px;height:300px}nav{width:100%;height:82px;margin:0;display:flex;flex-direction:row;justify-content:space-between;align-items:center;background:linear-gradient(150deg,#2e91dd 10%,#287dbe 40%,#21689e 60%);color:#fff;position:fixed;z-index:100;top:0}nav h2{margin-left:2rem}nav ul{display:flex;flex-direction:row;list-style-type:none;justify-content:space-between;padding:0}nav ul li{margin:1rem 2rem}nav ul li a{text-decoration:none;text-align:center;color:#daf1ff}main{padding:0;margin:0}#welcome-section{height:100vh;display:flex;flex-direction:column;background:#0d2a3f;margin:0;justify-content:center;align-items:center}#welcome-section h1{margin:0;text-align:center;font-size:8vh;color:#8fdaff}#welcome-section p{margin:0;text-align:center;font-size:6vh;color:#daf1ff}#perfil{width:250px;height:250px;margin-bottom:20px;border-radius:40%}.espacio{background:#0d2a3f;width:100%;height:82px}#projects{margin:0;padding:0;background:#21689e}#projects h2{margin:0;padding:1rem;text-align:center;background:#35a6fd;color:#0d2a3f}.tech-select{background:#0d2a3f;display:flex;flex-direction:row;padding:10px 0;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.tech-select svg{height:45px;width:45px;border:2px solid #0D2A3F}.tech-select svg:hover{scale:1.1;cursor:pointer}.select{border-color:#fff;background:#174d75;display:flex;scale:1.01}.select svg{border-color:#fff}.contenedor{margin:0 auto;width:100%;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(355px,355px));padding-top:2rem;padding-bottom:2rem;place-content:center}.proyect{width:355px;display:flex;flex-direction:column;align-items:center;text-align:center;border:2px solid black;border-radius:15px}.proyect img{border-top-left-radius:12px;border-top-right-radius:12px}.proyect a{width:100%;height:2rem;text-decoration:none;font-weight:700;background-color:#0d2a3f;padding:.5rem}.proyect a[class=github]{border-bottom-left-radius:12px;color:#fff;background:#0d2a3f}.proyect a[class=project-tile]{border-bottom-right-radius:12px;color:#000;background:#35a6fd}.img-info{position:relative;height:300px}.img-info img{object-fit:cover}.barra-botones{border-top:2px solid black;display:flex;width:100%;flex-direction:fel;justify-content:center;align-items:center}.info-project{position:absolute;text-align:start;padding-left:20px;padding-right:20px;font-family:sans-serif;bottom:0;width:100%;color:#fff;overflow:hidden;background:#24232381;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.info-project h3{margin:10px 0;text-align:center}.tecnologias{display:flex;margin:10px 0;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.tecnologias svg{height:45px;width:45px}@media (min-width: 1300px){.contenedor{width:1300px}}#contacts{margin:0;background-color:#0d2a3f;height:450px}#contacts .espacio-con{background:#21689e;width:100%;height:82px}#contacts h2{text-align:center;color:#fff;padding:0;margin:40px auto 0;font-size:40px}#contacts p{text-align:center;color:#fff;margin:0;font-size:1.8rem}#contacts a{text-decoration:none;color:#fff}#contacts a i{font-style:normal}.contenido{display:flex;flex-direction:column;justify-content:start}#emailContainer{margin:1rem auto;width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px}#email{background-color:#000;border:2px double black;padding:1px 5px;font-size:1.5rem}button{margin:5px;border-radius:10px;font-size:1.5rem;color:#fff;background-color:#287dbe;text-align:center}button:hover{cursor:pointer}.links{margin-top:3rem;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2rem;font-size:2rem}.links a{padding:2px}.links a:hover{background:#35a6fd;border-radius:10px}#profile-link i svg{margin:0;padding:0;height:30px;width:30px}#profile-link i{display:flex;gap:10px;flex-direction:row;justify-content:center}#profile-link:hover{text-decoration:none;color:#0d2a3f}@media (max-width: 900px){#contacts{height:500px}#contacts p{font-size:1.5rem;padding:2px}.links{margin:16px 0;flex-direction:column}}@media (max-width: 650px){nav{flex-direction:column;justify-content:center;padding:0}nav h2{margin:0;padding-top:10px}nav ul{margin:0}nav ul li{margin:14px 1rem}}@media (max-width: 600px){#welcome-section h1{font-size:30px;width:90%}#welcome-section p{font-size:20px;width:90%}}@media (max-width: 400px){#welcome-section h1{width:100%}#welcome-section p{width:100%}}@media (max-width: 355px){img{width:100%}#contacts{height:550px}}@media (max-width: 500px){#welcome-section{margin:2px}}
