/*DEFINICION DE VARIABLES-------------*/

 :root{
    --ff-primary: 'Montserrat Alternates', sans-serif;
    --ff-secundary: 'Lobster', cursive;
    --ff--base:'Orbitron', sans-serif;

    --fw-reg: 300;
    --fw-bold: 900;

    --clr-light:#ffff;
    --clr-dark:#303030;
  
    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;
    --bs--transparentblue:rgba(0,118,192, 0.781);
    --bg--transparent: rgba(15, 16, 17, 0.548);
    --bg--transparentdark: rgba(16, 16, 17, 0.800);
}

/*Navbar*/
nav a{
  font-family: var(--ff--base);
  font-size: 25px;
}
  
.fab{color:fuchsia;}

.fas{ color:fuchsia;}

/*PORTADA*/
header{
  text-align: center;
  font-family: var(--ff--base);
  padding-top: 50px;
  height: 450px;
  margin-top: 10px;  
  width: 100%;    
}

.isatw{
  position: absolute;
  display: block;
}

.name {
  font-size: 75px;
  color: fuchsia; 
  margin-bottom: 50px; 
  margin-top: 100px;
}

.imagen1{ 
  width:80%;
  border-bottom: 10px solid #c671f0;
  border-right:  10px solid #c671f0;
}

.imagen{
  text-align: center;  
  width: 250px;
} 
/*Presentation*/
.presentation img{
    width: 200px;    
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%); /* make all photos black and white */
    transform: rotate(-20deg); 
}

.presentation p{
  font-family:var(--ff-primary);
  font-size: 25px;
}

.presentation{text-align: center;}
.presentation h1{font-family: var(--ff-primary);}

.dark{
  background-color: #c671f0;
  border-radius: 10px;  
  padding-top: 20px;
  }


/*My work*/
.work h1{
    font-family: var(--ff-primary);
    text-align: center;    
}

.portfolio__img {
    width: 350px;
}

.gd {
    font-family: var(--ff--base);
}

.portfolio {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.portfolio__item {    
overflow: hidden;
}

.portfolio__img {
transition: 
transform 750ms cubic-bezier(.5, 0, .5, 1),
opacity 250ms linear;
}

.portfolio__item:focus {
position: relative;
z-index: 2;
}

.portfolio__img:hover,
.portfolio__item:focus .portfolio__img {
transform: scale(1.2);
opacity: .5;
}

/*skills*/  

#skills h1{
font-family: var(--ff-primary);
text-align: center;
padding: 25px;      
}

#skills p { font-size: 20px;}
/*end skills*/

/*Line under titles*/
.line{border-bottom: fuchsia solid 5px;}

/*Contact*/
.cont p{font-size: 25px;}
.follow a{display:inline;}



/*media query*/
@media screen and (max-width:745px){

  .portfolio{text-align: center;}

  .portada{padding-top: 50px;}

  .name{
    font-size: 40px;
    margin-top: 20px;
    }

  .isatw img{width: 50%;}

  .imagen{width:60%;} 
  
  .description{font-size: 10px; margin-top: 35%;}

  .cont h2{font-size: 30px;}

  .presentation img{width: 150px; margin-top: 20px;}

  #skills{ text-align: center;}

  }