/* ========================================================================== 
   Base & Typography Reset 
   ========================================================================== */

/* Main layout font matching Pico.css container */
body {
  font-family: "JetBrains Mono";
  line-height: 1.6;
  background: linear-gradient(135deg, #12131c 0%, #252736 100%);
  background-attachment: fixed;
  color: #e2e8f0;
  min-height: 100vh;
}

/* Heading style override */
h1 {
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ========================================================================== 
   Custom Inline Components 
   ========================================================================== */

/* Editorial emphasis style */
p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

em {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
  color: #97b3f0;
}

.cf {
  font-family: "JetBrains Mono";
}

hgroup {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  background: linear-gradient(135deg, rgb(37, 39, 54) 0%, rgb(50, 53, 74) 100%);
  padding: 2rem;
  border-radius: 8px;
}

h1,
h2,
h3 {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

line {
  border: #e2e8f0;
  border-radius: 100%;
}

strong {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

li {
  font-family:
    "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.alright {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

/* Add to app.css */
.animated-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.tech-orb {
  width: 80px;
  height: 80px;
  animation: float 4s ease-in-out infinite;
}

.ring {
  fill: none;
  stroke: #97b3f0;
  stroke-width: 3;
  stroke-dasharray: 200;
  animation:
    dash 3s linear infinite,
    spin 8s linear infinite;
  transform-origin: center;
}

.core {
  fill: rgb(37, 39, 54);
  stroke: #e2e8f0;
  stroke-width: 2;
  animation: pulse 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 200;
  }
  50% {
    stroke-dashoffset: 50;
  }
  100% {
    stroke-dashoffset: 200;
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}