body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}


nav {
background-color: #221E22;
color: #fff;
display: flex;
justify-content: space-around;
padding: 1rem;
}

nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
}

nav a:hover {
color: #ffcc00;
text-decoration: underline;
}

header {
position: relative;
text-align: left;
color: white;
height: 700px;
overflow: hidden;
display: flex;
align-items: center;
padding-left: 2rem;
}

header::before {
content: "";
background: url('imagen/DagerPan.jpg') no-repeat center center;
background-size: cover;
background-color: black;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

header h1 {
margin: 2rem;
font-size: 5rem;
font-family: 'Orbitron', sans-serif;
color: yellow;
}

header p {
font-size: 2rem;
padding-inline: 2rem;
font-family: 'Orbitron', sans-serif;
font-style: italic;
color: moccasin;
}


section {
padding: 2rem;
}


#about {
background-color: #44355B;
color: #fff;
padding: 2rem;
position: relative;
min-height: 600px;
display: flex; 
flex-wrap: wrap;
gap: 2rem; 
justify-content: space-between;
}


.about-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
padding: 20px;
}


.about-text {
flex: 1;
font-size: larger;
font-weight: 500;
}

.about-text h2{
font-size: 2.5rem;
}

.about-gallery {
flex: 1;
display: flex;
flex-direction: column; 
}


#about h2 {
font-family: 'Orbitron', sans-serif;
color: #ECA72C;
background: #44355B; 
padding: 1rem;
}

#galeria {
display: flex;
width: 750px;
height: 380px;
margin-left: 2rem; 
}

#galeria img {
width: 0;
flex-grow: 1;
object-fit: cover;
opacity: 0.8;
transition: 0.5s ease;
}

#galeria img:hover {
cursor: crosshair;
width: 500px;
opacity: 1;
filter: contrast(120%);
box-shadow: #ECA72C 0px 0px 0px 3px;
}

.about-video {
width: 50%;
margin: 0 auto; 
border-radius: 10px;
display: block; 
justify-content: center; 
}

#contact {
padding: 2rem;
text-align: center;
}

#contact h2 {
font-size: 2rem;
}

.contact-links {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}

.contact-links a {
font-size: 1.2rem;
display: flex;
align-items: center;
text-decoration: none;
color: #333;
gap: 10px;
}

.contact-links a:hover {
color: #ffcc00 !important;
font-size: 3rem !important; 
transition: .8s;
}

.contact-links img {
width: 30px;
height: 30px;
object-fit: contain;
}

footer {
background-color: #221E22;
color: #fff;
text-align: center;
padding: 1rem;
}

.pepino {
width: 50px;
height: 50px;
position: absolute;
background-image: url(imagen/pepino.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.contenido {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.texto {
flex: 1;
padding-right: 2rem;
}

.skills {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding: 0.5rem;
justify-content: right;
opacity: .8;
}

.skill-category {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
background-color: #f9f9f9;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.skill-category h1 {
font-size: 1.5rem;
color: #333;
margin-bottom: 0.5rem;
font-family: 'Orbitron';
}

.elemento {
border: 1px solid black;
background-color: #221E22;
color: #ECA72C;
font-family: 'Orbitron';
font-weight: bold;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
margin: 0.5rem;
}

.elemento:hover {
box-shadow: 0 0 15px 5px #ffcc00; 
transition: box-shadow 0.3s ease-in-out; 
}

#habilidades {
background-image: url(imagen/DagerPapeleo.jpg);
background-size: cover;
padding: 2rem;

}

section h3 {
text-align: right;
font-family: 'Orbitron';
font-size: 3rem;
color: #D1D646;
}

#contact {
background-color: #221E22;
color: white;
}

#contact a {
color: white;
}

.parafo {
text-indent: 2rem !important;
margin: 1rem;
}

.recordatorio {
font-size: 2rem;
color: #D1D646;
}

.recordatorio:hover {
font-size: 2.7rem;
font-weight: 500;
transition: 3s;
}