@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --primary-color: #9e2f2f;
    --primary-color-dark:#ffffff;
    --secondary-color: #9133339b;
    --text-dark: #b02525;
    --text-ligth:#ffffff;
    --extra-ligth: #010101;
    --max-width: 1200px;

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

}
a{
text-decoration: none;
}
body{
font-family: "Bitter", serif;
}

nav{
width: 100%;
position: fixed;
top: 0;
left: 0;
   background-color: #ffffff;
z-index: 99;

}

.nav__content{
max-width: var(--max-width);
margin: auto; 
padding: 1.5rem 1rem;
display: flex;
align-items: center;
justify-content:space-between;
}

nav .logo a{
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-color);
transition: 0.3s;

}

nav .logo a:hover{
color: var(--primary-color-dark);

}

nav .checkbox{
display: none;

}

nav input{
 display: none;
}

nav .checkbox i{
 font-size: 2rem;
 color: var(--primary-color);
 cursor: pointer;
}

ul{
display: flex;
align-items: center;
display: 1rem;
gap: 1rem;
list-style:  none;
transition: left 0.3s;
}

ul li a {
padding: 0.5rem 1rem;
border: 2px solid transparent;
text-decoration: none;
font-weight: 600;
color: var(--text-dark);
transition: 0.3s;

}

ul li a:hover{
border-top-color: var(--secondary-color);
border-bottom-color: var(--secondary-color);
color: var(--secondary-color);

}

.section{
background-color: var(--extra-ligth);
}

.section__container{
min-height: 100vh;
max-width: var(--max-width);
margin: auto;
padding: 1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
   gap: 4rem;
}

.content{
display: flex;
flex-direction: column;
justify-content: center;
}

.subtitle{
letter-spacing: 2px;
color: var(--text-ligth);
font-weight: 2;
margin-bottom: .5rem;   
}

.title{
font-size: 2.5rem;
font-weight: 400;
line-height: 3rem;
color: var(--text-dark);
margin-top: 1rem;
}
.title span {
font-weight: 600;
}

.description{
line-height: 1.5rem;
color: var(--text-ligth);
margin-bottom: 2rem;
}



.hire__me:hover {
background-color: var(--primary-color-dark);
}

.portfolio{
color: var(--primary-color);
}


.portfolio:hover {
background-color: var(--primary-color-dark);
color: #ffffff;
}

.image {
display: grid;
place-items: center;
}

.image img {
width: min(25rem, 90%);
border-radius: 100%;
}
@media (width < 750px) {
nav .checkbox{
     display: block;
    }

ul{
position: absolute;
width: 100%;
height: calc(100vh - 85px);
left: -100%;
top: 85px;
background-color: var(--extra-ligth);
flex-direction: column;
justify-content: center;
gap: 3rem;
}
nav #check:checked ~ ul{
left: 0;
}

ul li a {
font-size: 1.25rem;
}

.section__container{
padding: 10rem 1rem 5rem 1rem;
 text-align: center;
   grid-template-columns: repeat(1,1fr);
}

.image {
grid-area: 1/1/2/2;

}

.action__btns{
 margin: auto;
}
}


.container-fluid {
margin-top: 420px;
}


.container-fluid2 {
 margin-top: 420px;
    
}


footer {
   justify-content: center;
}


.imagenes{
   display: flex;
   width: 700px;
   height: 600px;
 }
 .imagenes  img{
   width: 0px;
   flex-grow: 1;
   object-fit: cover;
   opacity: .8;
   transition: .5s ease;
 }
 .imagenes img:hover{
   cursor: crosshair;
   width: 300px;
   opacity: 1;
   filter: contrast(120%);
 }

 .redes {
   display: flex;
   width: 400px;
   height: 400px;
   padding-top: 200px;
 }
 
 .container-fluid2 {
   display: flex;
   height: 200px;
   width: 200px;
   margin-top: 500px;
 }