@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
    font-family: Inter, sans-serif;
}

@-webkit-keyframes jumbo {
    from {
        background-position: 50% 50%, 50% 50%;
    }
    to {
        background-position: 350% 50%, 350% 50%;
    }
}

@keyframes jumbo {
    from {
        background-position: 50% 50%, 50% 50%;
    }
    to {
        background-position: 350% 50%, 350% 50%;
    }
}

.jumbo {
    --stripes: repeating-linear-gradient(
        100deg,
        #fff 0%,
        #fff 7%,
        transparent 10%,
        transparent 12%,
        #fff 16%
    );
    --stripesDark: repeating-linear-gradient(
        100deg,
        #000 0%,
        #000 7%,
        transparent 10%,
        transparent 12%,
        #000 16%
    );
    --rainbow: repeating-linear-gradient(
        100deg,
        #60a5fa 10%,
        #e879f9 15%,
        #60a5fa 20%,
        #5eead4 25%,
        #60a5fa 30%
    );
    background-image: var(--stripes), var(--rainbow);
    background-size: 300%, 200%;
    background-position: 50% 50%, 50% 50%;

    filter: blur(10px) invert(100%);

    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);

            mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);

    pointer-events: none;
}

.jumbo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--stripes), var(--rainbow);
    background-size: 200%, 100%;
    -webkit-animation: jumbo 60s linear infinite;
            animation: jumbo 60s linear infinite;
    background-attachment: fixed;
    mix-blend-mode: difference;
}

.dark .jumbo {
    background-image: var(--stripesDark), var(--rainbow);
    filter: blur(10px) opacity(50%) saturate(200%);
}
.dark .jumbo::after {
    background-image: var(--stripesDark), var(--rainbow);
}


.theme-button:hover {
    background-color: #4f8bd900;
}

.button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: rgb(255, 255, 255); /* Light background */
    color: #424242; /* Dark text */
    padding: 10px 20px;
    margin: 5px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; /* Smooth transition for click effect */
}


.button-link:hover {
    background-color: #f3f3f3;
    transform: translateY(-2px);
}

.button-link i {
    font-size: 1.5em;
}


/* Dark Theme Style */
.dark .button-link {
    background-color: #333; /* Dark background */
    color: #fff; /* Light text */
}


.dark .button-link:hover {
    background-color: #444;
}

/* Sun icon color in dark theme */
.sun-icon {
    color: white; /* Set the sun icon color to white */
  }
  
  /* When dark theme is active, override the sun icon color */
  .dark .sun-icon {
    color: white; /* Ensure the sun icon is white in dark mode */
  }
/* Default text color for light theme */
.text-theme {
    color: #1a1a1a; /* Assuming #424242 is a suitable dark color for the light theme */
}

/* Text color for dark theme */
.dark .text-theme {
    color: white; /* This will ensure text is white in dark mode */
}
  
#theme-toggle {
    position: fixed; /* Fixed position relative to the viewport */
    top: 1rem; /* 16px from the top */
    right: 1rem; /* 16px from the right */
    z-index: 1000; /* Make sure it's above other elements */
    cursor: pointer; /* Changes the cursor to a pointer when hovering over the button */
  }
  
  
  #theme-toggle:active {
    transform: translateY(2px); /* Pushes the button down 2 pixels when active */
  }

  /* Transition for color change */
body {
    transition: background-color 0.5s ease, color 0.5s ease;
  }
  
  /* Animation for the theme icon */
  #theme-icon {
    color: #000000a4;
    transition: transform 0.5s ease;
  }
  
  /* Rotate theme icon on theme change */
  .dark #theme-icon {
    color: rgba(255, 255, 255, 0.582);
    transform: rotate(180deg);
  }
  
  /* Add this to your CSS file */

/* If you are using a build process that purges unused CSS, ensure these styles are preserved */