/* style.css */
* {
  box-sizing: border-box;
}

.background {
  background-image: radial-gradient( circle 720px at 2.8% 48.8%,  rgb(192, 255, 110) 0%, rgba(30,204,214,1) 100%);
  padding: 0;
  color: black;
}

.showcase{
  padding-bottom: 5rem;
}

@property --x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.animatedStar {
    
}

.animatedStar::before {
  content: "✦";
  animation: animateStar 0.8s steps(1) infinite;
}

.sun {
    transform: translate(var(--x), var(--y));
    position: relative; /* or absolute */
    font-size: 48px;
    animation: moveX 30s ease-in-out infinite, moveY 15s ease-in-out infinite;
    color: yellow;
    display: inline-block;
}

.sun::before{
    content: "✸";
    animation: animateChar 0.8s steps(1) infinite;
}

@keyframes moveX {
  0%   { --x: -200px; }
  50%  { --x: 200px; }
  100%  { --x: -200px; }
}

@keyframes moveY {
  0%   { --y: 35px; }
  50%  { --y: -15px; }
  100%  { --y: 35px; }
}

@keyframes animateChar {
  0%   { content: "✸"; }
  50%  { content: "✹"; }
}

@keyframes animateStar {
  0%   { content: "✦"; }
  50%  { content: "✶"; }
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  padding: 1rem;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  font-size: 16px;
}

img {
  max-width: 75%;
  height: auto;
  border-radius: 8px;
}

div {
    margin: 0 auto;
    text-align: center;
    border-radius: 8px;
    max-width: 720px;
}

pre {
  white-space: pre;       /* keep original formatting */
  overflow: hidden;       /* hide overflow instead of scrolling */
  text-align: center;     /* center the text horizontally */
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: monospace;       /* forces monospace font */
  max-width: 100%;        /* ensure it doesn’t exceed container */
  box-sizing: border-box;
}

p {
      margin: 0 auto;
  max-width: 75%;
  text-align: center;
}

a {
  /* Fallback */
  color:rgb(188, 255, 101);

  /* for Safari */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* for standard-compliant browsers */
  background-clip: text;
  color: transparent;
  background-image: radial-gradient( circle 360px at 2.8% 48.8%,  rgb(255, 243, 110) 0%, rgb(30, 214, 122) 45.6%, rgb(5, 54, 154) 65.9% );
  text-decoration: none;
  font-size: 20px;
}

h1 {
    text-align: center;
    font-size: 64px;
    margin-bottom: 0%;
  }

h2 {
    text-align: center;
    font-size: 32px;
}

h3{
  font-size: 28px;
  padding: 0;
  margin: 0;
}