:root {
    --text-color: hsl(0, 0%, 83%);
    --bg-color: hsl(0, 0%, 15%);
    --bg-card-color: hsl(6, 0%, 20%);
    --primary-color:#ff5e1a;
    --text-black-color: hsl(0, 0%, 31%);
    --shadow: 0.5em 0.5em 2em #1b1b1b, inset 0 0 0 #353535;
    --rotateY: 0deg;
    --rotateX: 0deg;

}


  * {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    vertical-align: baseline;
    box-sizing: border-box;
    min-width: 0;
  }


  img, picture, video, iframe, figure {
    max-width: 100%;
    width: 100%;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
  }

  a {
    display: block;
    text-decoration: none;
    color: inherit;
    font-size: inherit;
  }

  p a {
    display: inline;
  }

  li {
    list-style-type: none;
  }

  html {
    scroll-behavior: smooth;
  }



  h1, h2, h3, h4{
    text-wrap: balance;
  }

  p{
    text-wrap: pretty;
  }

  blockquote:before, blockquote:after, q:before, q:after {
    content: "";
    content: none;
  }

  ::-moz-selection {
    background-color: var(--negro);
    color: var(--blanco);
  }

  ::selection {
    background-color: var(--negro);
    color: var(--blanco);
  }

  form, input, textarea, select, button, label {
    font-family: inherit;
    font-size: inherit;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    background-color: transparent;
    color: inherit;
    display: block;
    /* opcional */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }

  table, tr, td {
    border-collapse: collapse;
    border-spacing: 0;
  }

  svg {
    width: 100%;
    display: block;
    fill: currentColor;
  }

  body {
    min-height: 100dvh;
    font-size: 100%;
    font-family: var(--tipo-principal);
    color: var(--negro);
    line-height: 2em;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fill, 1fr);
    grid-template-rows: repeat(auto-fill, 1fr);
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    }



    .div1 { grid-area: 1 / 1 / 3 / 2; }
    .div2 { grid-area: 3 / 1 / 5 / 2; }
    .div3 { grid-area: 1 / 2 / 3 / 4; }
    .div4 { grid-area: 3 / 2 / 4 / 3; }
    .div5 { grid-area: 4 / 2 / 5 / 3; }
    .div6 { grid-area: 3 / 3 / 5 / 4; }

    .div1, .div2, .div3, .div4, .div5, .div6{
        padding: 2em;
        box-shadow: var(--shadow);
        border-radius: .5em;
        background: var(--bg-card-color);
    }


    :root {
      --text-color: hsl(0, 0%, 83%);
      --bg-color: hsl(0, 0%, 15%);
      --bg-card-color: hsl(6, 0%, 20%);
      --primary-color:#ff5e1a;
      --text-black-color: hsl(0, 0%, 31%);
      --shadow: 0.5em 0.5em 2em #1b1b1b, inset 0 0 0 #353535;
      --rotateY: 0deg;
      --rotateX: 0deg;

    }


    body{
      margin: 0;
      display: flex;
      flex-direction: column;
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      padding: 1em 1em 0 1em;
      height: calc(100vh - 2em);
      gap: 10em;
    }


    .parent {
      display: grid;
      grid-template-columns: repeat(auto-fill, 1fr);
      grid-template-rows: repeat(auto-fill, 1fr);
      grid-column-gap: 1em;
      grid-row-gap: 1em;
      }



      .div1 { grid-area: 1 / 1 / 3 / 2; }
      .div2 { grid-area: 3 / 1 / 5 / 2; }
      .div3 { grid-area: 1 / 2 / 3 / 4; }
      .div4 { grid-area: 3 / 2 / 4 / 3; }
      .div5 { grid-area: 4 / 2 / 5 / 3; }
      .div6 { grid-area: 3 / 3 / 5 / 4; }

      .div1, .div2, .div3, .div4, .div5, .div6{
          padding: 2em;
          box-shadow: var(--shadow);
          border-radius: .5em;
          background: var(--bg-card-color);
      }

      @media (max-width: 1023px) {

        .parent{
            display: flex;
            flex-direction: column;
            height: 100%;}

        .div1, .div2, .div3, .div4, .div5, .div6{
                grid-area: none;
        }

        .project-article{
            display: flex;
            flex-direction: column;
        }


        html{
            height: 100%;
        }

  }

    .div1{
      display: flex;
      flex-direction: column;
      gap: 1em;
    }
    .avaliable{
      display: flex;
      align-items: center;
      gap: 1em;
      background-color: var(--bg-color);
      width: fit-content;
      padding: 0 1em 0 1em;
      border-radius: .5em;
    }
    .avaliable-circle{
      height: 1em;
      width: 1em;
      background-color: rgba(0, 255, 85, 0.925);
      border-radius: 50%;
    }
    .avaliable-p{}
    .div1-h1{}
    .div1-p{}
    .div1-download{
      display: flex;
      align-items: center;
      gap: 1em;
      color: var(--text-color);
      text-decoration: none;
      background-color: var(--bg-color);
      width: fit-content;
      padding: 1em;
      font-size: 140%;
      border-radius: .5em;
    }
    .dv1-svg{
      max-width: 1em;
      max-height: 1em;
    }

    .div2{}
    .div2-emoji{
      display: flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      font-size: 230%;
      background-color: var(--bg-color);
      padding: .25em;
      border-radius: 50%;
    }

    .div2-text{
      max-width: 100%;
      font-size: 150%;
    }

    @media (max-width: 1023px) {

      body{
          height: max-content;
      }

      .div2{
          display: flex;
          flex-direction: column;
      }
      .div2-text{
          max-width: 100%;
          text-align: center;
      }
    }


    @media (max-width: 1385px) {

      body{
          height: max-content;
      }


      .div2-text{
          max-width: 100%;
          text-align: center;
      }
    }


    .div3{
      display: flex;
      flex-direction: column;
    }

    .cards-container{
      display: flex;
      align-items: center;
      height: 5em;
      display: flex;
      gap: 1em;
    }

    .div3-aa, .container-div3, .card-svg{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 5em;
      height: 5em;
      background-color: var(--bg-color);
      border-radius: .5em;
    }

    .div3-p{
      font-size: 130%;
    }

    .card-svg-div3{
      height: 60%;
      fill: hsla(0, 0%, 20%, 0.822);
      filter: drop-shadow(0px 2px 1px hsl(0, 0%, 38%));
    }

    .container-2{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: .6em;
      width: 3em;
    }

    .circle-div3{
      height: 1em;
      width: 1em;
      border-radius: 50%;
    }

    .circle-div3:nth-child(1){
      background-color:     rgb(63,137,255);
    }

    .circle-div3:nth-child(2){
      background-color: rgb(255,5,113);
    }

    .circle-div3:nth-child(3){
      background-color: rgb(251,90,13);
    }

    .circle-div3:nth-child(4){
      background-color: rgb(255,191,16);
    }


    .skills-container{
      display: flex;
      justify-content: space-between;
      gap: 1em;
      flex-wrap:wrap ;
      max-width: 100%;
    }

    .frontend-list{
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      margin: 0;
      padding: 0;
      flex-direction: row;
      gap: 1em;
    }

    .frontend-ele{
      padding: 1em;
      background-color: var(--bg-color);
      border-radius: .5em;
    }

    .skill-contianer{
      padding: 0 2em 0 0;
    }

    .div4{}
    .div4-download{
      display: flex;
      align-items: center;
      color: var(--text-color);
      text-decoration: none;
      background-color: var(--bg-color);
      border-radius: .5em;
      font-size: 1.4em;
      padding: 1em;
      gap: 1em;
      font-weight: 500;
    }
    .download-svgs{
      max-height: 1em;
      max-width: 1em;
    }

    #time{
      font-size: 220%;
      font-weight: bold;
    }

    .svgs{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1em;
      padding: 0;

    }
    .svgs li{
      display: flex;
      list-style: none;

    }

    .div4-svgs{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      color: var(--text-color);
      gap: 1em;
      height: fit-content;
      background-color: var(--bg-color);
      padding: 1em 2em 1em 2em;
      border-radius: .5em;
      text-decoration: none;
    }

    .linkedin{
      fill: #0e76a8;
    }

    .svg1{
      max-width: 2em;
      max-height: 2em;
    }




    .projects{
      display: flex;
      flex-direction: column;
      gap: 1em;
    }

    .project-article{
      background-color: var(--bg-card-color);
      padding: 2em;
      gap: 4em;
      min-height: 50em;
      display: flex;
      justify-content: space-between;
    }

    .container-projects{
      display: flex;
      flex-direction: column;
      max-width: 40em;
      height: fit-content;
    }

    .container-projects{

      display: flex;
      flex-direction: column;
      gap: 2em;
    }

    .container-projects{
      height: fit-content;
      position: sticky;
      top: 20%;
    }

    .project-h3{
      font-size: 3em;
      width: 100%;

    }

    .iframe{
      min-height: 100%;
      min-width: 50%;
      background-color: #ffffff;
      border-radius: .5em;
    }


    @media (max-width: 1023px) {

      .iframe{
        max-height: 30em;

      }

    }


    .imagen{
      object-fit: scale-down;
      min-width: 50%;
      height: 100%;
    }


    html {
      scroll-behavior: smooth;
    }