@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;400&display=swap);
*{
      font-family: 'Roboto Mono', monospace;
     /* src: url(); segunda opcion de import de font*/
      border: 2rem  #aa169e ;
      transition: all .2s linear;
      box-sizing: border-box;
      text-decoration:none;
      outline: none;
      border: none;
  }
  html{
      font-size: 65%;
  }
  html ::-webkit-scrollbar{
      width: 1rem;
      height: .5rem;
  }
  html ::-webkit-scrollbar-track{
      background-color: rgb(94, 92, 92);
  }
  html ::-webkit-scrollbar-thumb{
      background-color:  rgb(170, 22, 158);
      height: .5px;
  }
  body{
    background-color: rgb(8,8,8);
      padding-left: 25%;
      color: whitesmoke;
      border: .2rem solid rgb(170, 22, 158);
      border-style: double;
  }
  .heading{
      font-size: 3rem;
      border-bottom: .2rem solid rgb(94, 92, 92);
      text-align: center;
      margin-bottom: 1.5rem;
      padding-right: 1rem;
  }
  .heading span{
      padding-left: 1rem;
      color: rgb(170, 22, 158);
  }
  header{
      position: fixed;
      top: 0;left:0;
      background-color: rgb(24, 24, 24)!important;
      height: 100%;
      width: 25%;
      text-align: center;
      border-right: .2rem double rgb(170, 22, 158);
  }
  header .user img{
      width: 20vh;
      height:20vh;
      border-radius: 50rem;
      object-fit: contain;
      border: .4rem solid rgb(170, 22, 158) ;
      object-position: center;
      margin:5%;
  }
  header .user h1{
      color: whitesmoke;
      font-size: 3rem;
      margin: 10%;
    }
    #navbar{
        flex-direction: column;
        margin-top: -1.5rem;
        text-align: center;
        height: max-content;
    }
    #navbar ul{
        list-style:none;
        width: 85%;
    }
    #navbar ul li a{
        padding: 1rem ;
        margin: 1rem 0;
        color: whitesmoke;
        background-color: rgb(94, 92, 92);
        border-radius: 5rem;
        font-size: 2rem;
        text-align: center;
    }
    #navbar ul li a:hover{
        background-color: rgb(170, 22, 158) ;
    }
    .home{
      display: flex;
      flex-flow: column;
      padding: 5rem;
      justify-content: center;
      margin-top: 5rem;
  }
  .home h2{
      font-size: 2.5rem;
  }
  .home h1{
      margin-top: .5rem;
      font-size: 3rem;
  }
  .home h1 span{
      color: rgb(170, 22, 158) ;
  }
  .home p{
      margin-top: .05rem;
      font-size: 1.5rem;
  }
  .b{
      margin-top: 1rem;
      display: block;
      padding: 2rem 2.5rem;
      color: whitesmoke;
      background-color: rgb(94, 92, 92);
      border-radius: 3rem;
      margin-bottom: 2rem;
      font-size: 2rem;
  }
  .b:hover{
      background-color: rgb(170, 22, 158) ;
  }
  .about .row .info{
      margin: 2%;
      font-size: 1.75rem;
      width: auto;
  }
  .about .row .info span{
      color: rgb(170, 22, 158) ;
  }
  .about .row .counter{
      display: flex;
      flex:1 1 48rem;
      text-align: center;
      justify-content: right;
      width: auto;
  }
  .about .row .counter .box{
      width: 25rem;
      height: 18rem;
      background-color: rgb(78, 77, 77);
      text-align: right;
      font-size: 1.8rem;
      margin: 2rem;
      padding: 2rem;
      padding-bottom: .5rem;
      border-radius: 1rem;
      margin-bottom: 7rem;
  }
  .about .row .counter .box span{
      font-size: 5rem;
      color: rgb(170, 22, 158) ;
  }
  .about .row .counter .box i{
      color: yellow;
      padding-top: -.5rem;
      font-size: 4rem;
    }
    .btn:hover{
            background-color:#2c252b ;}
    .c{
        border-radius: 1.3rem;
        background-color: #080808;
        color: whitesmoke;
        object-fit: contain;
        border: .3rem solid rgb(170, 22, 158) ;
    }
    .c img{
        border-radius:1.3rem ;
    }
    .Proyects{
        margin: 2%;
    }
    .education .container {
      margin-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      padding: 2rem;
      margin-left: 1rem;
      justify-content: space-between;
      margin-right: 5rem;
  }
  .education .container .box{
      width: 25rem;
      height: 15rem;
      margin: 2rem;
      font-size: 1.5rem;
      border-left: .35rem solid rgb(78, 77, 77);
      text-align:center;
  }
  .education .container .box span{
      text-align: center;
      padding: .5rem 2rem;
      border-radius: 2rem;
      margin: 2rem;
      color: rgb(170, 22, 158) ;
      font-size: 2rem;
      background-color:  rgb(78, 77, 77);
  }
  .education .container .box i{
      font-size: 2rem;
      padding: 2rem;
      border-radius: 3rem;
      background-color: rgb(170, 22, 158) ;
      margin-left: -12rem;
      margin-top: -2rem;
  }
  .skills .row{
      padding-top: 1rem;
  }
  .skills .row .content{
      font-size: 2rem;
  }
  .skills .row .box{
      display: flex;
      flex-direction: row;/*//////////////////////////////////////////////////////////////////*/
      padding-top: 2rem;
      padding-left: 2.5rem;
  }
  .skills .row .box img{
      width: 80px;
      height: 80px;
      border-radius: 50rem;
      object-fit: contain;
      border: .4rem solid rgb(170, 22, 158) ;
  }
  .skills .row .box h3{
      padding-left: 2.5rem;
  }
  .experience .column{
      display: flex;
      flex-direction: row;
      padding-bottom: .5rem;
      padding-top: 3rem;
  }
  .experience .info h3{
      color: whitesmoke;
      font-size: 2rem;
      padding-top: 2%;
      padding-left: 1%;
  }
  .experience .info h3 span{
      color: rgb(170, 22, 158) ;
  }
  .experience img{
    margin: 2%;
      width: 150px;;
      height: 75px;
  }
  .contact .row {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
  }
  .contact .row .content{
      flex:  1 1 30rem;
      padding: 4rem;
      padding-bottom: 0;
  }
  .contact .row .content .title{
      margin-top: 6rem;
      font-size: 2.5rem;
      padding-bottom: 1rem;
  }
  .contact .row .content .info h3{
      font-size: 1.5rem;
  }
  .contact .row .content .info h3 i{
      padding-right: 1.5rem;
      color:  rgb(170, 22, 158) ;
      
  }
  .form{
    height: 60vh;
      padding: 2rem;
      margin: 2rem;
      margin-bottom: 3rem;
      width: 45%;
      border-radius: 1.2rem;
      background-color:  rgb(78, 77, 77);
      color: whitesmoke;
      font-size: 1.5rem;
  }
  .form input{
    height: 15%;
      width: 95%;
      padding: 15px;
      margin: 5px;
      justify-content: space-between;
      align-items: center;
  }
  .box_message{
    padding: 15px;
      margin: 5px;
      justify-content: space-between;
      align-items: center;
    width: 95%;
    height: 40%;
  }
  .form .b{
      margin-top: 2rem;
      padding: 2%;
  }
  .contact .credit h3{
      font-size: 2rem;
      height: 25%;
      text-align: center;
  }
  .credit {
    margin: 5%;
    height: 10%;
      padding-bottom: 2rem;
      text-align: center;
      padding: 2rem;
      border-radius: 3rem;
      font-size: 1.75rem;
      background-color:rgb(170, 22, 158) ;
  }
  .contact .credit .box img{
      width: 3.5rem;
      height: 2rem;
      padding-right :1.5rem ;
  }


  @media screen and (max-width: 800px) {
   *{
        margin: 0 auto;
        padding: 1rem !important;
        height:auto!important;
        width: 100%!important;
        font-size: small;
    }
    header{
        display: none;
    }
    img{
        width: 50px!important;
        height: 50px!important;
    }
    #experience img{
        width: 150px!important;
        height: 100px!important;
    }
    #Proyects img{
        height: 300px!important;
    }
    .Proyects{
        flex-wrap: wrap;
    }
    span{
        font-size: smaller!important;
    }
    .box{
        height:150px

        !important;
    }
    }