.hoverbright:hover {
    /* increase the brightness on hover */
    filter: brightness(1.75);
}
@media (prefers-color-scheme: dark) {
    canvas {
        filter: invert(1) hue-rotate(180deg);
    }
}
/* Add an icon after every link with target="_blank" */
a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 8px; /* Adjust the size as needed */
    height: 8px; /* Adjust the size as needed */
    margin-left: 5px; /* Space between the link text and the icon */
    background-image: url('/assets/images/external-link.png'); /* The path to the icon */
    background-size: contain; /* Scale the image to fit within the element */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    vertical-align: middle; /* Aligns the icon vertically with the text */
}
tr:focus td {
    color: white !important;
    font-weight: 600 !important;
}
/*
  these type the CSS variable as color
  unlocking the ability for the browser
  to animate just that portion
*/
@property --＠color-1 {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(98 100% 62%);
  }

  @property --＠color-2 {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(204 100% 59%);
  }

  /* keyframes that change the color variable */
  @keyframes gradient-change {
    to {
      --＠color-1: hsl(210 100% 59%);
      --＠color-2: hsl(310 100% 59%);
    }
  }
.gradient-text {
    font-family: "Dank Mono", ui-monospace, monospace;
    /* apply variable changes over time */
    animation: gradient-change 2s linear infinite alternate;

    background: linear-gradient(
        /*
        in oklch produces more vibrant gradient results
        learn more https://developer.chrome.com/docs/css-ui/access-colors-spaces#color_interpolation
        */
        to right in oklch,
        /* use the variables in a gradient (or wherever!) */
        var(--＠color-1),
        var(--＠color-2)
    );

    /* old browser support */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* modern browser version */
    background-clip: text;
    color: transparent;
}