/* variables */
  :root {
    /* Rainbow Islands */
    --rojo: #fd0279;
    --naranja: #fca601;
    --amarillo: #f4fa06;
    --verde: #04fe04;
    --celeste: #08dbff;
    --violeta: #bd03ff;
    --fucsia: #ff00fd;
    --azul: #0000fe;

    /* Otros */
    --c1: #1774a0;
    --c2: #265579;
    --c3: #f5a9c3;
    --c4: #c8e9fc;

    --ruido: url("data:image/png;base64,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");
  }

  body {
    background-color: #111121;
    font-family: Courier New, Monospace;
    margin: 0 0;
    color: white;
  }
  main {
    width: 80%;
    margin: 0 auto;
    padding: 2em;
  }
  footer {
    width: 80%;
    margin: 0 auto;
    padding: 2em;
  }
  header {
    margin: 0 0;
    min-height: 45vh;
    mask-image: var(--ruido), linear-gradient(45deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100%);
  }
  h1 {
    font-weight: bold;
    position: relative;
    font-size: 4em;
    line-height: 0.8;
    text-shadow: 2px 2px 1px var(--fucsia);
  }
  h1::before{
    content: attr(contenido);
    text-shadow: 5px 5px 5px var(--fucsia);
    position: absolute;
    z-index: -1;
    mask-image: var(--ruido), linear-gradient(45deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%);
  }
  h2 {
    font-weight: bold;
    font-size: 3em;
    line-height: 0.8;
    color: var(--fucsia);
  }
  .no-wrap {
    text-wrap: nowrap;
    overflow-x: hidden;
  }
  .colores {
    min-width: 100%;
    min-height: 9vh;
    image-rendering: pixelated; /* antialiasing */
    image-rendering: crisp-edges; /* Para browsers más viejos */
  }
  .colores1 {
    background: linear-gradient(90deg,
      var(--violeta) 0% 2%,
      rgba(0,0,0,0) 3% 5%,
      var(--rojo) 6% 8%,
      rgba(0,0,0,0) 9% 12%,
      var(--c1) 12.5% 13%,
      rgba(0,0,0,0) 13.5% 15.5%,
      var(--c2) 16% 17%,
      rgba(0,0,0,0) 18% 18.2%,
      var(--c4) 18.5% 19.5%,
      rgba(0,0,0,0) 20% 21%,
      var(--c3) 22% 22.5%,
      rgba(0,0,0,0) 23% 25%,
      var(--c4) 25.2% 26%,
      rgba(0,0,0,0) 27% 28%,
      var(--c2) 29% 29.5%,
      rgba(0,0,0,0) 30% 31%,
      var(--c1) 33%,
      var(--amarillo) 34% 34.5%,
      rgba(0,0,0,0) 35% 37%,
      var(--c2) 38%,
      var(--c3) 39%,
      rgba(0,0,0,0) 40% 44%,
      var(--c4) 44.2% 44.8%,
      var(--violeta) 45%,
      rgba(0,0,0,0) 45.2% 45.5%,
      var(--c4) 45.7% 46%,
      rgba(0,0,0,0) 46.5% 46.8%,
      var(--naranja) 47% 48%,
      rgba(0,0,0,0) 48.5% 49%,
      var(--c3) 50% 51%,
      rgba(0,0,0,0) 52% 53%,
      var(--c4) 53.5% 54%,
      rgba(0,0,0,0) 55% 56%,
      var(--c2) 57% 58%,
      rgba(0,0,0,0) 59% 60%,
      var(--c1) 60.5% 61%,
      rgba(0,0,0,0) 62% 63%,
      var(--c2) 63.5% 65%,
      rgba(0,0,0,0) 66% 68%,
      var(--c3) 68.5% 69%,
      var(--c4) 69.5% 71%,
      rgba(0,0,0,0) 71.2% 73%,
      var(--amarillo) 73.2% 76%,
      rgba(0,0,0,0) 76.5% 77%,
      var(--c2) 77.8% 78%,
      var(--c3) 78.2% 79%,
      var(--c1) 80.2% 81%,
      rgba(0,0,0,0) 81.5% 83%,
      var(--verde) 83.5% 87%,
      rgba(0,0,0,0) 87.5% 89%,
      var(--c2) 89.8% 91%,
      var(--c4) 93%,
      var(--c1) 94.2% 95%,
      rgba(0,0,0,0) 96% 97%,
      var(--c1) 97.5%,
      rgba(0,0,0,0) 98% 100%
    );
  }
  .colores2 {
   background: linear-gradient(90deg,
      var(--c1) 0% 1%,
      var(--c2) 1.2% 1.5%,
      rgba(0,0,0,0) 2% 3%,
      var(--c4) 3.2% 6%,
      rgba(0,0,0,0) 7% 8%,
      var(--c2) 9% 9.5%,
      rgba(0,0,0,0) 10% 11%,
      var(--c1) 13%,
      var(--naranja) 14% 14.5%,
      rgba(0,0,0,0) 15% 17%,
      var(--c2) 18%,
      var(--c3) 19%,
      rgba(0,0,0,0) 20% 24%,
      var(--c4) 24.2% 24.7%,
      var(--violeta) 25%,
      rgba(0,0,0,0) 25.5% 36%,
      var(--c2) 37% 38%,
      rgba(0,0,0,0) 39% 40%,
      var(--c1) 40.5% 41%,
      rgba(0,0,0,0) 42% 43%,
      var(--c2) 43.5% 45%,
      rgba(0,0,0,0) 46% 48%,
      var(--c3) 48.5% 49%,
      var(--c4) 49.5% 51%,
      rgba(0,0,0,0) 51.2% 53%,
      var(--verde) 53.2%,
      rgba(0,0,0,0) 72% 73%,
      var(--c1) 73.5% 74.7%,
      rgba(0,0,0,0) 75% 76%,
      var(--c1) 77% 78%,
      var(--c3) 79% 80%,
      rgba(0,0,0,0) 81% 83%,
      var(--c2) 84% 86%,
      rgba(0,0,0,0) 86.5% 87%,
      var(--c2) 88% 89%,
      var(--c4) 90% 92%,
      rgba(0,0,0,0) 92.5% 93%,
      var(--fucsia) 94% 94.5%,
      rgba(0,0,0,0) 95% 96%,
      var(--c2) 97%,
      rgba(0,0,0,0) 98% 99%,
      var(--c2) 100%
   );
  }
  .colores3 {
    background: linear-gradient(90deg,
      var(--c4) 0% 0.3%,
      rgba(0,0,0,0) 0.8% 1.1%,
      var(--c4) 1.5% 2.2%,
      rgba(0,0,0,0) 3% 4%,
      var(--c3) 5% 6%,
      rgba(0,0,0,0) 7% 22%,
      var(--c2) 23% 23.5%,
      rgba(0,0,0,0) 25% 31%,
      var(--c1) 32%,
      var(--azul) 32.5% 33.5%,
      rgba(0,0,0,0) 35% 37%,
      var(--c2) 37.5%,
      var(--c3) 39.5%,
      rgba(0,0,0,0) 40% 42%,
      var(--c4) 42.2% 42.8%,
      var(--rojo) 43.5%,
      rgba(0,0,0,0) 45.2% 45.5%,
      var(--c4) 46% 48%,
      rgba(0,0,0,0) 48.5% 49.8%,
      var(--c1) 50% 51%,
      rgba(0,0,0,0) 51.5% 52%,
      var(--violeta) 53% 54%,
      rgba(0,0,0,0) 55% 56%,
      var(--c4) 56.5% 58%,
      rgba(0,0,0,0) 59% 61%,
      var(--c3) 62.5% 63%,
      var(--c4) 63.5% 64%,
      rgba(0,0,0,0) 65.2% 66%,
      var(--c2) 67.2% 68%,
      rgba(0,0,0,0) 68.5% 69%,
      var(--c1) 70.8% 74%,
      var(--c2) 74.2% 75%,
      var(--c1) 76.2% 77%,
      rgba(0,0,0,0) 78.5% 79%,
      var(--c4) 80.5% 81%,
      rgba(0,0,0,0) 82.5% 83%,
      var(--c3) 84.8% 85%,
      var(--c4) 86%,
      var(--c1) 86.2% 88%,
      rgba(0,0,0,0) 89% 90%,
      var(--azul) 90.2% 92%,
      rgba(0,0,0,0) 93% 95%,
      var(--c3) 96%,
      rgba(0,0,0,0) 97% 98%,
      var(--c2) 100%
    );
  }
  .colores4 {
    background: linear-gradient(90deg,
      var(--c3) 0% 1%,
      rgba(0,0,0,0) 4% 5%,
      var(--c2) 6% 6.5%,
      rgba(0,0,0,0) 6.8% 7.3%,
      var(--c2) 8% 8.5%,
      rgba(0,0,0,0) 11% 15%,
      var(--c1) 17% 18%,
      var(--violeta) 18.5% 18.8%,
      rgba(0,0,0,0) 19% 20.5%,
      var(--c3) 21% 22%,
      rgba(0,0,0,0) 22.3% 35%,
      var(--c2) 37% 38%,
      rgba(0,0,0,0) 38.5% 45.5%,
      var(--c2) 46% 47.5%,
      var(--c1) 48% 49%,
      rgba(0,0,0,0) 50% 51%,
      var(--c4) 52% 53%,
      var(--c2) 54% 55%,
      rgba(0,0,0,0) 56% 56.5%,
      var(--c2) 57% 58%,
      rgba(0,0,0,0) 59% 59.5%,
      var(--naranja) 60% 62%,
      rgba(0,0,0,0) 63% 63.5%,
      var(--naranja) 64% 64.5%,
      rgba(0,0,0,0) 65% 67%,
      var(--c4) 67.5% 67%,
      rgba(0,0,0,0) 68.5% 69%,
      var(--c3) 70.5% 71%,
      rgba(0,0,0,0) 72.5% 73%,
      var(--c2) 74.8% 75%,
      var(--c4) 76%,
      rgba(0,0,0,0) 76.5% 77%,
      var(--c2) 77.3% 78%,
      rgba(0,0,0,0) 79% 80%,
      var(--c1) 81.3% 82%,
      rgba(0,0,0,0) 83% 87%,
      var(--celeste) 87.3% 88.5%,
      rgba(0,0,0,0) 89% 92%,
      var(--c1) 92.3% 94%,
      var(--c2) 95.3% 97%,
      rgba(0,0,0,0) 98% 99%,
      var(--rojo) 100%
    );
  }
  .colores5 {
    background: linear-gradient(90deg,
      rgba(0,0,0,0) 0% 2%,
      var(--c4) 2.4% 3%,
      rgba(0,0,0,0) 4% 5%,
      var(--c1) 6% 7%,
      rgba(0,0,0,0) 8% 9%,
      var(--celeste) 10% 11%,
      rgba(0,0,0,0) 12% 13%,
      var(--c4) 13.5% 14%,
      var(--verde) 14.2% 14.6%,
      rgba(0,0,0,0) 15% 16%,
      var(--naranja) 16.5% 16.5%,
      var(--c2) 17% 18%,
      rgba(0,0,0,0) 19% 20%,
      var(--c1) 20.5% 21%,
      rgba(0,0,0,0) 22% 23%,
      var(--c2) 23.5% 25%,
      rgba(0,0,0,0) 26% 28%,
      var(--c3) 28.5% 29%,
      var(--c4) 29.5% 31%,
      rgba(0,0,0,0) 31.2% 33%,
      var(--c3) 33.5% 33.7%,
      var(--c4) 34% 34.8%,
      rgba(0,0,0,0) 35.2% 36%,
      var(--c2) 37.2% 38%,
      rgba(0,0,0,0) 38.5% 39%,
      var(--c1) 40.8% 44%,
      var(--c2) 44.2% 45%,
      var(--c1) 46.2% 47%,
      rgba(0,0,0,0) 48.5% 49%,
      var(--c1) 50%,
      var(--fucsia) 52% 54.5%,
      rgba(0,0,0,0) 55% 57%,
      var(--c2) 58%,
      var(--c3) 59%,
      rgba(0,0,0,0) 60% 64%,
      var(--c4) 64.2% 64.7%,
      var(--amarillo) 65%,
      rgba(0,0,0,0) 65.5% 66%,
      var(--c2) 37% 68%,
      rgba(0,0,0,0) 69% 86%,
      var(--c1) 87% 88%,
      rgba(0,0,0,0) 89% 90.5%,
      var(--c2) 91% 91.5%,
      rgba(0,0,0,0) 92% 92.5%,
      var(--c4) 93% 94.5%,
      rgba(0,0,0,0) 95% 97%,
      var(--celeste) 97.3% 100%
    );
  }
  .logo {
    width: 100px;  
  }
  .cross {
    font-weight: bold;
    font-size: 2em;
  }
  .vertical-center {
    display: flex;
    align-items: center;
    height: 300px;
  }
  .dos-cols {
    display: grid;
    grid-template-columns: 1fr;
  }
  .dos-cols>div:last-child {
    justify-self: left;
  }
  @media screen and (min-width: 768px) {
    h1 {
      font-size: 5em;
    }
    .logo {
      width: 200px;  
    }
    .dos-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .dos-cols>div:last-child {
      grid-column: 2;
      justify-self: end;
    }
  }