/* Manera 1: Fonts de Google / Fuente en linea */

@font-face {
    font-family: Danna;
    src: url(./Helvetica.ttf);
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Danna;
}

h1 {
    color: blueviolet;
    font-family: Roboto; /* Manera 1: Fonts de Google / Fuente en linea */
    font-weight: 100;
    font-style: italic;
    font-size: 3rem; 
    /*REM toma un valor predefinido del navegador=16px*/
    /* EM toma el valor de su padre*/
    /* vh: lee el total disponible de pantalla 1vh= 1% de la pantalla o pixeles tmb*/ 
}

h2{
    color: magenta !important; /* Utilizar esto es mala practica */  

    /* Para utilizar una fuente local*/
    font-family: Danna;

}
/* Con inspeccionar no podemos cambiar cosas pero podemos ver donde esta el error para ver q es lo que toma el CSS */

/* Mas especifico que clase // NO SE PUEDE REPETIR */
#id {
    color: rgb(47, 47, 173);
}

/* Mas especifico que etiquetas como h2 // SE PUEDE REPETIR */
.class{
    color: green;
}
 
/*Es mejor usar class que id porque id puede ser tambien para logistica y navegacion*/

.foto{
    height: 20vh;
    /*width: 20vw; asi quedaria deforme si no es cuadrada la imagen, entonces usamos // RESPONSIVEEEEEEE */
    width: auto; /*puede ser viceversa*/
}

a{
    font-family: Danna;
    color: brown;
    text-decoration: none;
}

/* Si quisiera que sea con respecto a su espacio padre seria asi
imaginemos que la foto esta dentro de un main:

main{
height: 50vh 
width: 100vw
}

.foto{
height: 15* !!RESPECTO A SU PADRE!!
width: auto
}*/

/*
Para poner una foto de fondo en el footer=

footer{
    background-image: url(./mag.jpg.jpg);

Para que no se repita la img=
    background-repeat:no-repeat;

 Para indicar que tamanio quiero que tenga mi imagen
    background-size: cover;

Para acomodarla=
    background-position: jskfa;

Para bajarle la opacidad a un elemento solo=
opacity: 0.5;
    */

    /*
Para sacarle los puntitos a una Lista desordenada=

    ul{
        list-style: none;
    }
    
Para sacarle el underline=
    a{
        text-decoration: none;
        color: red (para darle color al enlace)*/

 /*El asterisco es un selector universal, llama a todo lo que contenga el HTML*/

 
/* *{
    font-family: Danna;
} //Esto se pone por encima de todo. NO ME DEJA!!!!!!!!
 
body{
    font-family: Danna;
}*/

/* Para resetear las cosas que vienen por default en cada navegador=

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
*/


/* Pagina para jugar y aprender como utilizar cada etiqueta: w3schools.com*/
/* Pagina para buscar color exacto para escribir en HTML: htmlcolorcodes.com/es/*/

/* Para diferentes margenes en el mismo elemento
margin-top para superior
margin-botton para inferior
-left para izquierda
-right para derecha
margin tiene una ventaja donde yo le puedo poner varios valores que no se suman
10px superior / 25px inferior (con dos valores)
50px superior / 75 px right / 20 px inferior / 40 px left
 se leeria asi

 div{
    margin: 50px 75px 20px 40px;
}

lo mismo aplica con padding*/

/* Display: como yo quiero desplegar un elemento en mi pantalla
Se utiliza para dos elementos para FlexBox y FlexSidex

DISPLAY BLOCK (se aplica en CSS, poniendo el class "block" dentro del elemento, en el HTML)
.block{
    display: block;
    height: 10vh;
}

DISPLAY INLINE (solo se aplica en el lugar que se necesita, en linea a la derecha)
.inline{
    display: inline
}

DISPLAY INLINE-BLOCK (sigue en linea pero ocupa cierto bloque se puede usar alto y ancho como en block, pero en inline solo no)
.inline-block{
    display: inline-block
    height: 30vh;
    width: 45vw;
}
    */
    /* POSITIONS
Indicar que posicion que quiero que ocupe

1. 
.static{
    position: static
}
    No tiene mucho sentido porque es el que trae por default

2.
.relative{
    position: relative;
    top: 20px;
    left: 250px;
    bottom:30px;a
    right: 70px;
}
    Mueve nuestro elemento desde el lugar donde esta

3. 
.absolute{
    background-color: aqua;
    position: absolute;
    top: 150px;
    left: 150px
}
    Mueve nuestro elemento abarcando TODO el ABSOLUTO del html, tope superior e inferior

4. PARA WHATSAPP
.fixed{
    position: fixed;
    bottom: 50px;
    right: 50px;
}
    Deja quieto el elemento en un solo lugar mientras se scrollea, esta por encima de todos

5. PARA EL HEADER
.sticky{ 
    position: sticky;
    top: 0px
    background-color: aliceblue;
}
    Te acompana en el scroll y cuando bajas se traba*/

    /*
Flex ---> Crear un archivo "flex.css"*/
header{
        display: flex;
        justify-content: space-around;
        height: 15vh;
        position: sticky;
        top: 0;
        padding: 15px;
}

nav{
    width: 30vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.logo{
    height: 12vh;
    width: auto;
}

footer{
    display: flex;
    padding: 15px;
    justify-content: space-around;
    align-self: center;
}