@charset "utf-8";
/* CSS Document */

body {
    background-color: #33E7FE;
    font-family: "Capital, Arial, HelveticaNeue", "Helvetica Neue", Helvetica, sans-serif;
}

h1 {
    margin: 25px;
    color: #08798B;
    font-size: 50px;
    letter-spacing: 28px;
    text-align: center;
    text-transform: uppercase;  /* Transforma el texto a mayúsculas */
}

p {
    float: left;  /* Ajusta las cajas a la izquierda */
    width: 182px;
    height: 185px;
    overflow: auto;  /* Se encarga de ajustar el contenido dentro de las cajas 
                        (En auto) si no cabe el contenido añade una barra desplazadora de contenido para bajar
                        Más ejemplos => https://developer.mozilla.org/es/docs/Web/CSS/overflow */
    border: dashed;
    margin: 6px;
    padding: 10px;
    background-color: #00B4CB;
    font-size: 17px;
    font-style: italic;  /* Letra cursiva en CSS */
}

p::first-letter {
    float: left;   /* Ajusta la letra mayúscula a la izquierda */ 
    color: #007B92;
    font-size: 50px;
    font-style: normal;
    line-height: 60%;   /* Arregla la diferencia de posicionamiento de las letras mayusculas 
                           iniciales entre mozilla y chrome ya que este último muestra esta letra
                           más abajo de que queriamos 
                           Más información => https://developer.mozilla.org/es/docs/Web/CSS/line-height */
    
}