@font-face {
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/Anders.ttf');
  font-family: test;
}

html,body {
margin: 0px;
background: #111;
scroll-behavior: smooth;
}
.scene {
  
  height: 100vh;
  background: #1d1f20;
  /* padding: 10%; */
  text-align: center;
  flex-direction: column;
  background: linear-gradient(to right, #362436 0%, #1e1d1d 50%, #0e0e0e 100%);
   /* background-image: url(https://www.telemundo.com/sites/nbcutelemundo/files/styles/article_cover_image/public/images/article/cover/2018/11/29/mujer-programando-en-computadora.jpg?itok=vNUHetyt); */
  background-size:cover;
  }
.title {
  font-size: 6.5vw;
  /* line-height: 110%; */
  /* padding-top: 1em; */
  /* margin: 0px; */
  font-family: 'Dancing Script', cursive;
  color: white;
  margin-bottom: .5em;
  margin-top: 10%;
}
.check-out {
    /* z-index: 100; */
    /* position: absolute; */
    /* bottom: 1rem; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    font-size: 2.5vw;
    color: #fff;
    font-family: monospace;
    /* padding-top: 10%; */
    /* padding-top: 2em; */
}
.works{
  font-family: arial;
  font-size: 1.3vw;

  border-style: solid;


  padding: .5em;
  border-color: #dd31ef;
  /* margin-top: 10%; */


  font-weight: bold;


    
}
.nav-skills{
    display:flex;
    align-items: center;
    font-family: 'Dancing Script', cursive;
    color: white;
    font-size:2.5vw;
    margin-left: 4%;
    /* margin-top: 2%; */
    padding-top: 3%;
    
    
    /* background: #2e2e2e; */
}
.logo{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        /* display: block; */
        text-align:center;
    
}
.logowidth{
  
  margin-left: auto;
  margin-right: auto;
 color: #cdc8c8;
  font-size: 5vw;
  padding: .2em;
  border-style: solid;
  border-color: #111111;

}
.logowidth:hover{
  border-style: solid;
  border-color:#dd31ef;
  color:white;
  
}

.trabajos{
    width:25%;
    border-style: outset;
    margin: 3%;
    position: relative;
    display: inline-block;
    text-align: center;
    border-radius:10px;
    background:white;

}
.img-trabajos{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 10px;
   
}


 .trabajos:hover .img-trabajos {
    
    
    filter: grayscale(80%) blur(2px);
    

  }
  
/* .trabajos {overflow:hidden;} */

.title-trabajos{
    width: 100%;
    display:none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: black;
    opacity: .7;
}

.trabajos:hover .title-trabajos{
    display:block;
    margin-left: auto;
    margin-right: auto;
    }

    .links{
      text-align: center;
      padding-left: -5%;
      padding-right: -5%;
      padding-left: 0%;
      display: flex;
      /* text-align: center; */
      padding: 3%;
      flex-direction:column;
      width: 50%;
    }

    .text {
               
        font-weight: bold;
        /* text-transform:uppercase; */
      }
      .parpadea {
        
        animation-name: parpadeo;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      
        -webkit-animation-name:parpadeo;
        -webkit-animation-duration: 2s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
      }
      
      @-moz-keyframes parpadeo{  
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
        100% { opacity: 1.0; }
      }
      
      @-webkit-keyframes parpadeo {  
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
         100% { opacity: 1.0; }
      }
      
      @keyframes parpadeo {  
        0% { opacity: 1.0; }
         50% { opacity: 0.0; }
        100% { opacity: 1.0; }
      }
.title:hover{
  font-size:14wv;
}
.presentacion{
  flex-direction:column;
  justify-content: center;
  /* width: 80%; */
  margin-left: auto;
  margin-right: auto;
  /* visibility: hidden; */
}

.div-card{
  margin: 3%;
  background: #2e2e2e;
}

.title-skills{
  font-size: 1.5vw;
    color: white;
}

.skills{
  font-size: 2.5vw;
  /* background: #2e2e2ed6; */
  color: white;
  /* padding: 2%; */
  /* margin-top: 3%; */
  /* padding-left: 3%; */
  padding-top: 5%;
  padding-bottom: 1%;
  font-family: 'Dancing Script', cursive;
  display:flex;
}

.contacto{
  font-size: 6vw;
  color:white;
}
.card-style{
  width: 33.33%;
  margin:3%;
 
}

.card-style-left{
  visibility: hidden;
}

.card-style-right{
  visibility: hidden;
}
.back-gray{
  background: #2e2e2e;
}
.color-white{
  color: white;
}

.logo:hover{
  color:white;
  
  transform: rotate(-5deg);

  -webkit-transform: rotate(-5deg);

  -moz-transform: rotate(-5deg);

  -o-transform: rotate(-5deg);
}
.color{
  background-color:#2d2c2c14 !important;
  box-shadow:block !important;
}

.font-size-cinco{
  font-weight: bold;
  font-size: 1.3vw;
  color: #733a73;
}
.nav-padding{
  padding-right: 3%;
}
.projects{
  display:flex;
  
}

.about-me{
  font-size: 1.3vw;
  padding-left: 20%;
  padding-right: 20%;
  color: #797171;
  
  font-family: monospace;
  margin-top: 20%;
  margin-bottom: 10%;
}

.bootstrap-logo{
  width: 35%;  
  height: auto;

}
.materialize-logo{
  width: 50%;
  height: auto;
}
.p-contacto{
  font-size: 1.5vw;
  color: white;
  margin: 10%;
  padding: 5%;
  /* border-style: solid; */
  font-family: monospace;
  /* background: #303030; */
}
.works-right{
  font-family: test;
    font-size: 1.5vw;
    border-style: solid;
    padding: .5em;
    /* border-color: #79ee03; */
    /* margin-top: 10%; */
    
    padding-right: 2.5px;
    margin-right: -135%;
    border-right-style: none;
}
.hover:hover{
  width:100%!important;
}
.img-ame{
  border-radius: 100%;
  width: 50%;
}

.ocultar{
  visibility: hidden
}

.mostrar{
  visibility: visible;
}

.down-cv{
  border-color: purple;
  border-radius: 8px;
  background: #4d8d99;
  /* padding-left: 2%; */
  /* padding-right: 2%; */
  margin-left: 35%;
  color: white;
  padding: 2%;

}

.back-contacto{
  background-image: url(./assets/2611227.jpg);
        
        background-size: cover;
}


#skills-box{

  visibility: hidden;
  margin-left: 5%;
    margin-right: 5%;
     margin-bottom: 10%;

}
.div-about-me{
  background-image:url(assets/bacn-about.png);  
  background-size: cover;
 background-repeat: no-repeat; 
 display:flex
}

.title-about-me{
  font-family: 'Dancing Script', cursive;
  font-size: 4vw;
  color: #96659b;
}

.skills-container{
  display:flex;
  
}
.a-contacto{
  width:50%;
}


@media (max-width: 500px) { 

  .title
  {
    font-size:14vw;


  }

  .title-about-me{
    font-size:9vw;
  }

  .check-out{
    font-size: 6vw;
  }

.about-me{
  font-size: 3.3vw;
  margin-top:0%;
}
 
.projects{
  flex-direction:column;

}
  .title-skills{
    font-size: 5.5vw;
  }

  .logowidth{
    font-size: 12vw;
    
  }
  .bootstrap-logo{
    width: 85%;  
    height: auto;
  
  }
  .materialize-logo{
    width: 100%;
    height: auto;
  }
  .skills{
    font-size: 6.5vw;
  }
  .card-style{
  width: 94%;
  margin:3%;
 
}

.div-about-me{
  flex-direction: column;
}
.download-cv{
  margin-bottom: 15%;
}
.nav-skills{
  font-size: 7.5vw;
}

.skills-container{
  flex-direction: column;
  
}

.a-contacto{
  width:100%;
}

.contacto{
  margin: 15%;
  font-size: 11vw;
    color: white;
}

.links{
  flex-direction:row;
}

.p-contacto{
  font-size: 3vw;
}
 }