nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav ul li {
  float: left;
}

nav ul li a {
  display: block;
  color: whitesmoke;
  background: #2a438c;
  margin: 3px 3px;
  padding: 3px 12px;
  text-align: center;
  text-decoration: none;
}

nav ul li a:hover {
  color: deepskyblue;
}

/*
En CSS tenemos varios tipos de selectores

Estructura 
Selector{ 
  linea;
  propiedad:valor;
  propiedad:valor;
  CSS no distingue entre upper/lower case en propiedades
  Sí ve la diferencia en el nombre del archivo CSS
  No es lo mismo decir style.css que STYLE.css

 }

1. Selector de elemento o etiqueta
Solo requiere que se indique cual es la etiqueta HTML que se desea aplicar con diseño
body{}
h1{}

2. Selector de clase inicia con un punto
Mayoria de los frameworks usan este tipo de selector
Los selectores de clase son de su propio criterio

.Titulo{}
.Cuerpo{}

HTML:
<p class="Cuerpo"></p>

3. Selector por ID 
se empieza con #
Se asigna un ID unico a un elemento HTML

#Titulo{}
#Cuerpo{}

<p id="Cuerpo"></p>

4. Selector combinado/descendiente(especifica etiqueta HTML por niveles)

Diferencias 3 y 2:
Varios elementos pueden tener la misma clase, pero solo un elemento puede tener un ID

====== BOX MODEL =======

1. Todo elemento HTML se representa como una caja

content - contenido
padding - relleno interno
border -borde
margin - espacio externo

sirven para controlar el espacio y tamaño que ocupa cada elemento

.caja{
  width: 300px;
  padding: 20px; arriba derecha abajo izquierda
  border: 5px solid black;
  margin: 0px;
}

display: como debe comportarse un elemento dentro de una pagina
  da instrucciones al navegador

  display: block : ocupa toda la linea
           inline : lo presenta todo en la misma linea (texto)
           inline-block : todo en la misma linea (botones iconos etc)
           none: oculta el elemento
           flex: contenedor flexible
           grid: cuadriculas
           table: simula ser una tabla

propiedad box-shadow : sombra proyectada bajo el elemento
        parametros
        desplazamiento horizontal
        desplazamiento vertical
        difuminado
        rgba[0,0,0,0.0]

        valores
div{
  box-shadow: 0, 5px, 10px, (0,0,0,0.2)
}

valor sticky: comportamiento de eleemento fijo o estatico
position: sticky

propiedad top - bottom - right - left


z-index: posicionar el elemento por encima de los demas


*/


/* 
RESET BASICO
*/

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

.brico {
  font-family: "Bricolage Grotesque", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body{
  font-family: 'helvetica','montserrat';
  background: linear-gradient(135deg, #e8f3ff 0%,#b6d2f2 100%);
  color: #333;
  line-height: 1.8;
  z-index: 100;
}

header{
  background: #233363;
  padding: 12px 6px 15px 6px;
  position: sticky;
  top: 0;

}

header nav{
  margin: 0;
  padding: 3px;
}

.caja{
  background: lightcyan;
  width : 360px;
  padding: 6px;
  border: 6px solid blue;
  margin: 12px;
  justify-content: center;
  text-align: left;

}

.behavior{
  display: flex;
  background: lightblue;
  margin: 10px;
  padding: 5px;

}

main{
  max-width: 90%;
  margin: 24px;
  padding: 0px;
}

button{
  padding:12px 24px;
  margin:10px;
  border:none;
  background: #2a438c;
  color: white;
  border-radius: 5px;
  font-weight: bold;
}

button:hover{
  background: #233363;
  transform: scale(1.05);
  cursor:pointer;
  transition: background 0.5s, transform 0.5s;
}

button.push{
  background: lightseagreen;
}

button.push:hover{
  background: mediumseagreen;
}

h1,h2,h3{
  margin-bottom: 12px;
  color: darkslateblue;
}

h1{
  text-align: center;
  text-transform: uppercase;
  animation: aparecer 2s ease-out;
}

@keyframes aparecer{
  from {opacity: 0; transform: translateY(-20px);}
  to{opacity: 1; transform:translateY(0);}
}

.Resalta{

  color: #003366;
  font-weight: bold;
  background: white;
  padding: 10px 10px;
  border-left: 4px solid #003366;
}

footer{
  background: #233363;
  color: white;
  text-align: center;
  padding: 20px;
  margin: 10px;

}

footer a{
  color: deepskyblue;
}

/*
Puntos clave: 
- El diseño de la pagina debe ser adaptable a la pantalla de tal forma que reorganice el contenido de la misma
- Es indispensable su manejo hoy en dia
- La idea es mejorar la experiencia del usuario

<meta name="viewport" content="width = device-width, initial-scale = 1.0">

Unidades
% para anchos fluidos
em y rem para tipografia
vh para altura
vw para ancho
*/

/*
Estilo para responsive design
*/

@media (max-width: 768px){

  body{
    background: orange;
  }

  .caja{
  background: white;
  width : 60%;
  }

}

@media (max-width: 480px){
  body{
    background: red;
  }
  .caja{
  background: lightsalmon;
  width : 85%;
  }
  
}