* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Roboto", sans-serif; text-decoration: none; } /* Custom properties */ :root { --blanco: #ffffff; --negro: #2a2a2a; --color-primario: #003bff; --color-secundario: #3e72ff; --color-fondo-carta: linear-gradient( -45deg, var(--blanco) 0%, transparent 30% ); --color-degradado: linear-gradient(var(--blanco), #c9c9c9); --color-degradado2: linear-gradient( -45deg, var(--color-primario) 0%, transparent 45% ); --color-fondo-index: linear-gradient( -45deg, var(--color-primario) 25%, transparent 45% ); --color-formulario: linear-gradient(-45deg, #55cb60 0, var(--blanco) 40%); /* Sombras */ --sombra: 4px 4px 9px #6a6969da, -4px -4px 9px #d9d9d9da; /* Botones */ --border: 2px double var(--color-primario); --border-radius: 20px; /* Tipografía */ --tipo-principal: "Roboto", sans-serif; --tipo-secundaria: Verdana; /* Transition */ --transition: all 0.5s ease-in-out; } body { width: 100%; } /* fadeIn - En el de cada página */ .fade-in { animation: fadeIn ease 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } h1{ color: var(--blanco); } /* Títulos de las familias de comidas y bebidas */ p { font-size: 1rem; /* white-space: pre-line; Valida los saltos de linea \n que inserto en los textos largos que tengo en la data*/ white-space: pre-line; padding-left: 1.3rem; color: var(--color-secundario); } h2 { font-size: 1.2rem; font-weight: 600; } h3 { font-size: 1.1rem; color: var(--blanco); } /* ICONOS BOOTSTRAP */ i { font-size: 1.7rem; padding: 0 0.8rem; color: var(--color-secundario); } /* Iconos Cartas */ .bi-house-fill, .bi-heart-pulse, .star2 { font-size: 2rem; padding: 0; text-align: center; color: var(--color-secundario); } .star3 { font-size: 2rem; } /* ************************************************ */ /* Logo de fondo */ .logo__fondo { width: 50%; max-width: 20rem; position: fixed; top: 50%; left: 55%; transform: translate(-50%, -50%); z-index: -2; } .imagen__fondo { width: 100%; position: fixed; bottom: 0; right: 0; z-index: -2; } /* LUCES BRILLANTES */ @keyframes STAR { 0% { background: powderblue; height: 1px; width: 1px; box-shadow: 0px 0px 13px white; } 10% { background: #b0e5de; } 20% { background: #b0e5cc; } 30% { background: #cce5b0; } 40% { background: #dae5b0; } 50% { background: #e5ddb0; width: 4px; height: 4px; box-shadow: 0px 0px 13px #d3bd3d; } 100% { width: 1px; height: 1px; background: powderblue; box-shadow: 0px 0px 13px white; } } .star { height: 1px; width: 1px; border-radius: 5px; box-shadow: 0px 0px 13px white; background: powderblue; position: fixed; z-index: 2; } .star.pulse { animation: STAR 2s infinite; }