/* Dark Green Theme with Animations */

/* Use Open Sans as the default sans serif font. */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700|Source+Code+Pro:300,400,500,700");

/* Override Bootstrap and TechFolio variables for dark cyan theme */
:root {
  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-body-color: #ffffff;
  --bs-body-bg: #000000;
  --bs-link-color: #8700ff;
  --bs-link-hover-color: #a61414;
  --bs-primary: #00ffff;
  --bs-secondary: #ffffff;
  --bs-light: #333333;
  --bs-dark: #000000;
  --bs-white: #ffffff;
  --bs-gray: #666666;
  --bs-gray-100: #222222;
  --bs-gray-200: #333333;
  --bs-gray-500: #888888;
  --tf-pill-bg: #00ffff;
  --tf-icon-fill: #ffffff;
  --tf-icon-hover: #00ffff;
  --tf-page-bg-color: #000000;
  --tf-footer-bg-color: #111111;
  --tf-projects-bg-color: #111111;
}

/* Global gradient background */
html, body {
  background: linear-gradient(to bottom, #2b00bf, #a61414) !important;
  color: #ffffff;
}

/* Body fade-in animation */
body {
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Format social media icons with hover animation */
.tf-social {
  display: inline-block;
  fill: var(--tf-icon-fill);
  height: 1.5em;
  vertical-align: -.1em;
  width: 1.5em;
  transition: 0.3s;
  transform: scale(1);
}

.tf-social:hover {
  fill: #8700ff;
  transform: scale(1.1);
  filter: drop-shadow(0 0 5px #0000ff);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) scale(1.1); }
  40% { transform: translateY(-10px) scale(1.1); }
  60% { transform: translateY(-5px) scale(1.1); }
}

/* Links with glow effect */
a {
  text-decoration: none;
  position: relative;
}

a:hover {
  text-shadow: 0 0 10px #8700ff;
}

/* Cards with slide-in animation */
.card {
  background-color: rgba(51, 51, 51, 0.8);
  border: 1px solid #8700ff;
  color: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(135, 0, 255, 0.3);
}

/* Buttons with gradient background */
.btn {
  color: white !important;
  border: 2px solid white !important;
  background: linear-gradient(to right, #2b00bf, #a61414) !important;
  transition: all 0.3s ease;
}

.btn:hover {
  background: linear-gradient(to right, #a61414, #2b00bf) !important;
  border-color: #8700ff !important;
  box-shadow: 0 0 10px #8700ff;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Images with zoom effect */
img {
  transition: transform 0.3s ease;
}

img:hover {
  transform: scale(1.05);
}

/* Navigation bar slide down */
.navbar {
  animation: slideDown 0.8s ease-out;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Headings without typewriter effect */
h1, h2, h3, h4, h5, h6 {
  /* Removed typewriter animation */
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #00ffff; }
}

/* List items fade in */
li {
  animation: fadeInUp 0.5s ease-out;
  animation-fill-mode: both;
}

li:nth-child(1) { animation-delay: 0.1s; }
li:nth-child(2) { animation-delay: 0.2s; }
li:nth-child(3) { animation-delay: 0.3s; }
li:nth-child(4) { animation-delay: 0.4s; }
li:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form inputs with focus glow */
.form-control:focus {
  border-color: #8700ff;
  box-shadow: 0 0 10px rgba(135, 0, 255, 0.5);
}

/* Simplify the styling of the bottom of Essay cards. */
.card-footer {
  background-color: rgba(17, 17, 17, 0.8);
  border-top: 1px solid #8700ff;
}

/* Page transitions */
.page-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s, transform 0.5s;
}

/* Scroll animations */
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.animate-left {
  animation: slideInLeft 1s ease-out;
}

.animate-right {
  animation: slideInRight 1s ease-out;
}

/* Floating animation for badges */
.badge {
  animation: float 3s ease-in-out infinite;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .card:hover {
    transform: none;
  }

  img:hover {
    transform: none;
  }

  .tf-social:hover {
    transform: scale(1.05);
  }
}