/* Estilo de texto */
*{
  font-family: serif;
}

h1,h2,a{
  font-family: Arial;
  font-weight: bolder;
  text-decoration:none;
  text-transform: uppercase;
}
a.letras{
  color: white;
  -webkit-text-stroke-width: 0.15vw;
  -webkit-text-stroke-color: black;
}
p{
  border-style: solid;
  border-color: white;
  -webkit-text-stroke-width: 0vw;
}
p.left{
  border-width: 0 0 0 0.7vw;
  padding-left: 2vw;
  text-align: left;
}
p.right{
  border-width: 0 0.7vw 0 0;
  padding-right: 2vw;
  text-align: right;
}
p.center{
  border-width: 0.7vw 0 0 0;
  padding-top: 1vw;
  text-align: center;
}
span.enfasis{
  font-weight: bold;
}


/* Estructura de las secciones */

body.secciones{
  margin: 0;
  position: absolute;
  display: grid;
  grid-template-rows: 100vh 160vh 160vh 200vh 100vh;
  grid-template-columns: 99.1vw ;
}
div.secciones{
  position: absolute;
  display: grid;
  grid-column:1/2;
  grid-template-columns:24vw 62.1vw 13vw;
}
div.secciones.Negro{ background-color: black; color:white;}
div.secciones.Verde{ background-color:  RGB(82,231,209);}

#pantallaPrincipal{ grid-template-rows: 100vh; grid-row: 1/2; z-index: 6}
#about{ grid-template-rows: 160vh; grid-row: 2/3;}
#experiencia{ grid-template-rows: 160vh; grid-row: 3/4;}
#servicios{grid-template-rows: 200vh; grid-row: 4/5;}
#contacto{ grid-template-rows: 101vh; grid-row: 5/6;}

div.contenido{ grid-area: 1/2/2/3; }
div.contenido.Imagen.Principal{
  grid-area: 1/1/2/4;
  display:flex;
  align-items:center;
  justify-content: space-around;
  flex-direction: column;
  margin-bottom: 1vw;
}

/* /////////////////////    VISTA PARA COMPUTADOR     ////////////////////////*/

@media (min-width: 700.01px){
  h1{font-size: 6vw; margin-bottom: 5vw; margin-top: 8vw}
  h2{font-size: 3.5vw; margin-bottom: 4vw; margin-top: 8vw}
  p{font-size: 1.8vw; line-height : 3vw;}

  /* Menu a la izquierda */
  #logoLateral{
    height: 300px;
    position: fixed;
    top: 180px;
    left: 44px;
    z-index: 2;
  }
  span.menuLateral{
    position: fixed;
    font-size: 38px;
    z-index: 3;
  }
  #menuLateral1{top: 202px; left: 74.6px;}
  #menuLateral2{top: 296px; left: 138.7px;}
  #menuLateral3{top: 372px; left: 72px;}
  #menuLateral4{top: 437px; left: 107.2px;}


  /* Secciones de contenido */
  div.contenido{
    display: grid;
    grid-template-columns: 47.5% 47.5%;
    grid-column-gap: 5%;
  }

  div.contenido.About{grid-template-rows: 58% 27%; }
  span.about1{ grid-area:1/2/2/3; text-align: right; }
  span.about2{ grid-area:2/1/3/2; }

  div.contenido.Experiencia{ grid-template-rows: 60% 30%;}
  span.experiencia1{ grid-area:1/1/2/2;}
  span.experiencia2{ grid-area:2/2/3/3;}

  div.contenido.Servicios{grid-template-rows: 37% 26% 30%;}
  span.servicios1{grid-area: 1/1/2/2; }
  span.servicios2{grid-area: 2/2/3/3; text-align: right;}
  span.servicios3{grid-area: 3/1/4/2; }

  div.contenido.Contacto{
    grid-template-rows: 100%;
    grid-template-columns: 52% 48%;
    grid-column-gap: 0;
  }
  span.contacto1{grid-area: 1/1/2/2;}
  span.contacto2{grid-area: 1/2/2/3;}
  .redesSociales{display: flex; justify-content:center; }
  img.icons{
    width: 4.7vw;
    height: 4.7vw;
    margin: 2.5vh;
  }

  /* Imagenes */
  .Imagen{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  span.Imagen.Izquierda{justify-content:flex-end;}
  span.Imagen.Derecha{justify-content:flex-start;}

  #logo_main{ width: 60vw; padding-bottom:2vw;}
  #arbol{width: 90%;}
  #plano{width: 70%; margin-left: 2%;}
  #computador{width: 70% ;margin-top:18%;}
  #lenguajes{width: 65%;margin-bottom:15%;}
  #celular{width: 50%; margin-top: 9%;}
  #figuras{width: 55%; margin-top: 45%;}
  #baseDatos{width: 28%; margin-top: 40%;}
  #celularGrande{height: 82%;}
  #celularGrande2{width: 0%}


}



/* /////////////////////    VISTA PARA CELULAR     ///////////////////////////////////*/

@media (max-width: 700px) {
  h1{font-size: 10vw; margin-top: 14vw; margin-bottom: 7vw;}
  h2{font-size: 7vw; margin-bottom: 2vw;}
  p{font-size: 4.5vw; line-height : 6.2vw;}

  /*Menu a la izquierda*/
  #logoLateral{
    height: 154px;
    position: fixed;
    top: 217px;
    left: 8px;
    z-index: 2;
  }
  span.menuLateral{
    position: fixed;
    font-size: 23px;
    z-index: 3;
  }
  #menuLateral1{top: 227px; left: 22px;}
  #menuLateral2{top: 275px; left: 55px;}
  #menuLateral3{top: 314px; left: 21px;}
  #menuLateral4{top: 347px; left: 38.4px;}


  /* Secciones */
  div.secciones{
    grid-template-columns:26vw 61.1vw 12vw;
  }
  div.contenido{
    display:flex;
    align-items:center;
    justify-content: space-around;
    flex-direction: column;
    margin-bottom: 80px;
  }
  span.about1 h1, span.servicios2 h2{margin-left: 150px;}
  span.experiencia1 h1{font-size: 9vw;}
  span.servicios2{margin-top: 13%;}

  span.contacto1 h1{margin-left: 2.5vw; }
  span.redesSociales{display: flex; justify-content:center; }
  img.icons{width: 10vw;  height: 10vw; margin: 1.5vh; }


  /* Imagenes */
  span.Imagen{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #logo_main{ width: 80%; }
  #arbol{width: 100%;}
  #plano{width: 70%}
  #lenguajes{width: 68%;}
  #computador{width: 70% }
  #celular{width: 52%}
  #figuras{width: 40%; margin-left: 50%}
  #baseDatos{width: 25%; margin-right: 50%;}
  #celularGrande{width: 0%}
  #celularGrande2{width: 55%; margin-top: 5%;}
}