/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  /* background-image: linear-gradient(to right, #DCD3F0, #738BE5);*/
  color: black;
  text-align: center;
  font-family: Verdana;
  background-image: url('/media/4.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
a { color: #ff00e1; }
a:link, a:visited {
    color: #ff00e1;
}

/* fonts */
            .mochiy-pop-p-one-regular {
                font-family: "Mochiy Pop P One", serif;
                font-weight: 400;
                font-style: normal;
            }
            .crimson-text-regular {
                font-family: "Crimson Text", serif;
                font-weight: 400;
                font-style: normal;
            }
            .crimson-text-semibold {
                font-family: "Crimson Text", serif;
                font-weight: 600;
                font-style: normal;
            }
            .crimson-text-bold {
                font-family: "Crimson Text", serif;
                font-weight: 700;
                font-style: normal;
            }
            .crimson-text-regular-italic {
                font-family: "Crimson Text", serif;
                font-weight: 400;
                font-style: italic;
            }
            .crimson-text-semibold-italic {
                font-family: "Crimson Text", serif;
                font-weight: 600;
                font-style: italic;
            }
            .crimson-text-bold-italic {
                font-family: "Crimson Text", serif;
                font-weight: 700;
                font-style: italic;
            }
/* end of fonts */

            h1 {
                font-family: "Crimson Text", serif;
                font-weight: 700;
                font-style: italic;
                font-size: 35px;
                color: #e60073;
                text-align: center;
            }
            p {
                font-family: Arial, sans-serif;
                font-size: 18px;
                color: #333;
                max-width: 600px;
                margin: 50px auto;
                margin-top: 10px;
                text-align: center;
            }
            .image-container {
                margin-top: 20px;
            }
            img {
                max-width: 100%;
                border-radius: 10px;
            }
            /* header */
            nav ul {
                list-style-type: none; /* Quitamos las viñetas de la lista */
            }
            nav li {
                display: inline; /* Ítems del menú en una línea horizontal */ 
            }
            header {
                background-color: #333;
                color: #fff;
                padding: 10px;
            }
            
            nav ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            
            nav li {
                display: inline; /* Hace que los ítems del menú estén en una línea horizontal */
                margin-right: 20px; /* Espacio entre los ítems del menú */
            }
            
            nav a {
                text-decoration: none;
                color: #fff;
                font-size: 16px;
            }
            
            nav a:hover {
                text-decoration: underline;
            }
/* end of header */
            .box {
              background: white;
            }