@import url('http://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap');

:root {
  /* Fonts */
  --font-family: 'Open Sans', sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --font-size-body: 12px;
  --font-size-link: 16px;

  /* Colors */
  --color-background: #FBFCFE;
  --color-card-bg: #e3cde5;
  --color-card-border: #e098e7;
  --color-card-shadow: #634DFF0F;
  --color-link: #aa04b9;
  --color-link-visited: #fff;

  /* Spacing and dimensions */
  --padding-container-top: 5px;
  --container-width: 80%;
  --card-padding: 5px;
  --card-margin: 5px;
  --card-border-radius: 8px;
}

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

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-body);
  display: flex;
  flex-direction: column;
  justify-content: start;
  background-color: var(--color-background);
}

h1 {
  font-family: "Fuzzy Bubbles", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2em;
  color: #aa04b9;
  text-align: center;
  position: -webkit-sticky; /* Soporte para Safari */
  position: sticky;
  top: 0;                /* Se adhiere al borde superior */
  background-color: #fff; /* Evita que el contenido inferior se transparente */
  padding: 5px;
  z-index: 1000;         /* Asegura que esté por encima de otros elementos */
}

.logo {
  max-width: 100px;
  margin: 1em auto;
  display: block;
  align-content: center;
}

ul {
  margin: auto;
  text-align: center;
  padding-top: var(--padding-container-top);
  width: var(--container-width);
  background-color: #ffffff;
  list-style: none;
}

li {
  padding: var(--card-padding);
  background-color: var(--color-card-bg);
  border: 0px solid var(--color-card-border);
  border-radius: var(--card-border-radius);
  box-shadow: 0px 4px 16px 0px var(--color-card-shadow);
  margin: var(--card-margin);
  display: block;
}

li a {
  color: var(--color-link);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-link);
  text-decoration: none;
}

li a:visited {
  color: var(--color-link-visited) !important;
}