:root {
  /* Colores rojos */
  --color-red-50:  #fff0f0;
  --color-red-100: #ffdddd;
  --color-red-200: #ffc0c0;
  --color-red-300: #ff9494;
  --color-red-400: #ff5757;
  --color-red-500: #ff2323;
  --color-red-600: #ff0f0f;
  --color-red-700: #d70000;
  --color-red-800: #b10303;
  --color-red-900: #920a0a;
  --color-red-950: #500000;

  /* Colores negros */
  --color-black-50:  #f6f6f6;
  --color-black-100: #e7e7e7;
  --color-black-200: #d1d1d1;
  --color-black-300: #b0b0b0;
  --color-black-400: #888888;
  --color-black-500: #6d6d6d;
  --color-black-600: #5d5d5d;
  --color-black-700: #4f4f4f;
  --color-black-800: #454545;
  --color-black-900: #3d3d3d;
  --color-black-950: #000000;

  /* Colores blancos */
  --color-white-50:  #ffffff;
  --color-white-100: #efefef;
  --color-white-200: #dcdcdc;
  --color-white-300: #bdbdbd;
  --color-white-400: #989898;
  --color-white-500: #7c7c7c;
  --color-white-600: #656565;
  --color-white-700: #525252;
  --color-white-800: #464646;
  --color-white-900: #3d3d3d;
  --color-white-950: #292929;

  --font-main: 'Poppins', sans-serif;
  --font-title: 'Exo 2', sans-serif;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-black-950);
  color: var(--color-white-50);
  margin: 0;
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255, 0, 60, 0.1), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(255, 0, 60, 0.05), transparent 40%);
  background-attachment: fixed;

  width: 100%;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  font-family: var(--font-title);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}