/*
CSS 
web o pagina: carlosboni.com
autor: Carlos Boni
fecha: 30 diciembre 2020
RECORDAR:
en caso de conflictos se aplica el estilo que se define último,
o sea al final de este archivo o en la misma pagina html

Se incluyen los principales SELECTORES SIMPLES; hay más combinaciones...

*/

* {
  /* estilos por defecto para TODOS los elementos de la página; */
  /* estilo:valor; */
}


body,h1,h2,h3,h4,h5,h6 {
	font-family: "Nunito", sans-serif;
}

body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
}

/* First image (Logo. Full height)
Foto por formulario PxHere
https://pxhere.com/es/photo/928098
computer-work-working-light-keyboard-technology-928098-pxhere.com.jpg
*/
.bgimg-1 {
  background-image: url("mmedia/profesor_carlos_boni.jpg");
   min-height: 100vh;
}

/* Second image (Portfolio)
Foto por formulario PxHere
https://pxhere.com/es/photo/841903
number-web-internet-symbol-brand-font-841903-pxhere.com.jpg
 */
.bgimg-2 {
  background-image: url("mmedia/web_design_carlos_boni.jpg");
  min-height: 400px;
}

/* Third image (Contact)
Foto por formulario PxHere
https://pxhere.com/es/photo/563656
desk-computer-work-keyboard-technology-mouse-563656-pxhere.com.jpg
.bgimg-3 {
  background-image: url("mmedia/internet_carlos_boni.jpg");
  min-height: 400px;
}

Foto por formulario PxHere
https://pxhere.com/es/photo/701224
desk-computer-working-technology-wheel-mouse-701224-pxhere.com.jpg
*/
.bgimg-3 {
  background-image: url("mmedia/contacta_carlos_boni.jpg");
  min-height: 400px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }
}


div {
  /* estilos para todos los elementos <div>; */
  /* estilo:valor; */
  
  /* box-sizing:border-box  incluye en las dimensiones de un elemento el espacio del padding y del border. */
  /* display:flex   da la misma altura a todos los elementos que están en el mismo DIV */
}

.claseUno {
  /* estilos para todos los elementos que son de la clase .claseUno; */
  /* estilo:valor; */
}

#esteElemento {
  /* estilos para el único elemento identificado con este #esteElemento; */
  /* estilo:valor; */
}

p.claseUno {
  /* estilos para todos los elementos <p> que son de la clase .claseUno; */
  /* estilo:valor; */
}

p,div {
  /* estilos para todos los elementos que sean <p> o <div>; */
  /* estilo:valor; */
}

div > p {
  /* estilos para todos los elementos que sean <p> que estén dentro (sean hijos de) un <div>; */
  /* estilo:valor; */
}

h1 + p {
  /* estilos para todos los elementos que sean <p> que sean hermanos y estén inmediantamente después de <h1>; */
  /* estilo:valor; */
}

/*
Más selectores:
pseudo-clases: https://www.w3schools.com/css/css_pseudo_classes.asp
pseudo-elementos: https://www.w3schools.com/css/css_pseudo_elements.asp
pseudo-atributos: https://www.w3schools.com/css/css_attribute_selectors.asp
formularios: https://www.w3schools.com/css/css_form.asp
*/