:root {
      --color-1: hsl(240, 40%, 25%);
      --color-2: hsl(280, 35%, 20%);
      --color-3: hsl(220, 45%, 22%);
      --color-4: hsl(200, 40%, 18%);
      --color-1-next: hsl(240, 40%, 25%);
      --color-2-next: hsl(280, 35%, 20%);
      --color-3-next: hsl(220, 45%, 22%);
      --color-4-next: hsl(200, 40%, 18%);
    }

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

    body, html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .background-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .gradient-bg {
      position: absolute;
      top: -20%;
      left: -20%;
      width: 140%;
      height: 140%;
      animation: breathe 5s ease-in-out infinite;
    }

    .gradient-bg::before,
    .gradient-bg::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity 2.5s ease-in-out;
    }

    .gradient-bg::before {
     background: linear-gradient(
        135deg,
        var(--color-1) 0%,
        var(--color-2) 25%,
        var(--color-3) 75%,
        var(--color-4) 100%
      );
		 /*background-image: radial-gradient(
			circle at 50% 50%, 
			var(--color-1), 
			var(--color-2), 
			var(--color-3),
			var(--color-4)
		);*/

      opacity: 1;
      z-index: 1;
    }

    .gradient-bg::after {
     background: linear-gradient(
        135deg,
        var(--color-1-next) 0%,
        var(--color-2-next) 25%,
        var(--color-3-next) 75%,
        var(--color-4-next) 100%
      );
		 /*background-image: radial-gradient(
			circle at 50% 50%, 
			var(--color-1-next), 
			var(--color-2-next), 
			var(--color-3-next-next),
			var(--color-4-next)
		);*/
	
      opacity: 0;
      z-index: 2;
    }

    .gradient-bg.transitioning::after {
      opacity: 1;
    }

    @keyframes breathe {
      0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
      }
      50% {
        transform: scale(1.1) rotate(2deg);
        opacity: 0.95;
      }
    }

    .content {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      text-align: center;
      padding: 2rem;
    }

    h1 {
      font-size: 3.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      letter-spacing: -0.02em;
    }

    p {
      font-size: 1.25rem;
      font-weight: 400;
      line-height: 1.6;
      max-width: 600px;
      margin-bottom: 0.5rem;
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
      opacity: 0.95;
    }

    .subtitle {
      font-size: 1rem;
      opacity: 0.8;
      margin-top: 2rem;
      font-style: italic;
    }

    @media (max-width: 768px) {
      h1 {
        font-size: 2.5rem;
      }
      p {
        font-size: 1rem;
      }
    }