* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
background-color:  rgb(7, 8, 44);
}

html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 100px;
}

:root {
    --purple: #7c3aed;
    --purple-soft: #a78bfa;
    --box-bg: #111114;
    --border: #262626;
}

/* Where are you now */

.header{
background-color: rgb(6, 7, 48);
font-family: system-ui;
color: aliceblue;
padding: 15px;
}

.container{
display: flex;
justify-items: center;
margin: 0px 100.4px;
font-size: 12px;
justify-content: space-between;
}

.nav{
display: flex;
justify-items: center;
gap: 25px;
font-size: 18px;
}

.Ico{
width: 40px;
}

nav a {
color: white;
text-decoration: none;
transition: 0.3s;
}

nav a:hover {
color: purple;
}

.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgb(8, 8, 62);
padding: 15px 0;
z-index: 1000
}

/* Previum */

.hero{
display: flex;
align-items: center;
justify-content: space-between;
font-family: sans-serif;
color: aliceblue;
background-color: rgb(7, 8, 44);
margin-bottom: 6rem;
}

.hero-content{
display: block;
margin: 0px 100.4px;
font-size: 10px;
margin-top: 7rem;
font-size: 20px;
}

.btn-Hi {
background: linear-gradient(to right, red, blue);
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2rem;
}

.role {
background: linear-gradient(to right, red, blue, purple);
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 5rem;
}

.description{
color: white;
font-style: oblique;
}

.hero-image{
flex: 1;
display: flex;
justify-content: center;
}

.hero-image img{
width: 350px;
border-radius: 15px;
margin-top: 4rem;
}

/* About */

.btn-About{
display: block;
color: aliceblue;
}

.btn-mi{
text-align: center;
font-size: 4rem;
color: rgb(53, 53, 139);
}

.btn-text{
max-width: 800px;
margin: 0 auto;
font-family: sans-serif;
line-height: 1.6;
}

/* Habilidades 😎 */

.skills,
.btn-skills{
display: inline-block;
vertical-align: center;
}

.skills{
gap: 80px;
border: solid;
color: aliceblue;
font-family: sans-serif;
line-height: 1.7;
border: 2px solid;
padding: 10px 20px;
border-radius: 10px;
width: 600px;
margin: 60px;
margin-top: 6rem;
}

.section-title{
text-align: center;
font-size: 2rem;
}

.btn-skills{
gap: 20px;
border: solid;
color: aliceblue;
font-family: sans-serif;
line-height: 1.7;
border: 2px solid;
padding: 10px 20px;
border-radius: 10px;
width: 600px;
margin: 60px;
}

/* proyect */


.projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.projects-list {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.project-card {
    background: var(--box-bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 4rem;
    max-width: 1000px;
    width: 100%;
}

.project-images {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
}

.project-card img,
.project-card > img {
    display: block;
    max-width: 420px;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #68688d;
    padding: 0.7rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    margin: 2rem auto;
}

.project-card a {
    display: inline-block;
    margin-top: 1.4rem;
    color: var(--purple);
    font-weight: 600;
    text-decoration: none;
}

/* Contacto */

.btn-XD{
text-align: center;
background: linear-gradient(red, blue);
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 5rem;
}

.XD{
max-width: 400px;
margin: 2rem auto;
padding: 1.5rem;
background: #121212;
border-radius: 8px;
}

.XD form{
display: flex;
flex-direction: column;
gap: .4rem;
}

.XD label{
font-size: .85rem;
color: #bdbdbd;
}

.XD input{
padding: .6rem .7rem;
font-size: .9rem;
border-radius: 6px;
border: 1px solid #2a2a2a;
background: #0e0e0e;
color: #eaeaea;
}

.XD input::placeholder{
color: #6f6f6f;
}

.XD input:focus{
outline: none;
border-color: #ffffff;
}

.XD button{
margin-top: .8rem;
padding: .6rem;
font-size: .9rem;
background: #ffffff;
color: #000;
border: none;
border-radius: 6px;
cursor: pointer;
}

.XD button:hover{
background: #eaeaea;
}

/* Footer */

.footer{
display: flex;
justify-content: center;
justify-items: center;
background-color: rgb(7, 8, 49);
color: aliceblue;
padding: 30px;
}