newsletter-hackernews/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overscroll-behavior: none;
  width: 100%;
  position: relative;
}

#root,
#__next {
  overflow-x: hidden;
  width: 100%;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;

    --radius: 0.5rem;
  }

  h1 {
    @apply text-3xl font-semibold;
  }

  h2 {
    @apply text-2xl font-semibold;
  }

  h3 {
    @apply text-xl font-semibold;
  }

  h4 {
    @apply text-lg font-semibold;
  }

  h6 {
    @apply text-lg italic;
  }

  .privacy-content h1 {
    @apply mb-6 text-3xl font-bold text-gray-900;
  }

  .privacy-content h2 {
    @apply mt-8 border-b border-gray-200 pb-2 text-2xl font-semibold text-gray-800;
  }

  .privacy-content h3 {
    @apply mt-6 text-xl font-medium text-gray-800;
  }

  .privacy-content h4 {
    @apply mt-4 text-lg font-medium text-gray-800;
  }
}

/* Card border gradient */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #222;
}

.gradient-border {
  --radius: 5px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: #222;
  border-radius: var(--radius);

  &::after {
    position: absolute;
    content: '';
    top: calc(-1 * var(--radius));
    left: calc(-1 * var(--radius));
    width: calc(100% + var(--radius) * 2);
    height: calc(100% + var(--radius) * 2);
    background: linear-gradient(
      60deg,
      hsl(224, 85%, 66%),
      hsl(269, 85%, 66%),
      hsl(314, 85%, 66%),
      hsl(359, 85%, 66%),
      hsl(44, 85%, 66%),
      hsl(89, 85%, 66%),
      hsl(134, 85%, 66%),
      hsl(179, 85%, 66%)
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--radius));
    animation: moveGradient 4s alternate infinite;
  }
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}

/* Button gradient */
.btn-grad {
  background-image: linear-gradient(
    to right,
    #da22ff 0%,
    #9733ee 51%,
    #da22ff 100%
  );
  padding: 10px;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}