/* === Custom version of beautifuljekyll.css with black background and gradient h1 === */

/* Black background and white text globally */
body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
            color: white;
            overflow-x: hidden;
            min-height: 100vh;
}

/* Strong text gradient */
strong, b {
  background: linear-gradient(90deg, #7effb2, #f9f871);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* Comic-style paragraphs - only top-level paragraphs inside the blog post */
.blog-post > p {
font-family: 'Verdana', sans-serif;
  font-size: 20px;
  color: #ffeb99; /* warm yellow text */
  background-color: #111; /* dark background */

  /* Gradient full border */
  border: 3px solid transparent;
  border-radius: 15px;
  background-clip: padding-box;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;

  /* Outer border gradient using pseudo background */
  background-image:
    linear-gradient(#111, #111), /* inner background */
    linear-gradient(90deg, #ff4e50, #f9d423); /* border gradient */
  background-origin: border-box;
  background-clip: padding-box, border-box;

  /* Optional soft glow */
  box-shadow: 0 0 12px rgba(255, 102, 0, 0.4);
}

/* Blockquotes - elegant style */
blockquote {
  border-left: 4px solid #f9d423;
  background: rgba(255, 255, 255, 0.05);
  color: #ddd;
  font-style: italic;
  font-family: 'Lora', serif;
  padding: 0.8rem 1rem;
  margin: 1.3rem 0;
  border-radius: 6px;
}

/* Headings */
h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

/* Gradient only for h1 */
h1:not(.main-title) {
  font-size: 2.25rem;
  background: linear-gradient(90deg, #ff4e50, #f9d423, #24c6dc, #514a9d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.main-title {
            font-size: clamp(4rem, 12vw, 12rem);
            font-weight: 900;
            margin-bottom: 30px;
            background: linear-gradient(45deg, #ff6b6b, #ffd93d, #64ffda, #00d4ff, #ff6b6b);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientShift 4s ease-in-out infinite;
            text-shadow: 0 0 60px rgba(100, 255, 218, 0.5);
            letter-spacing: -4px;
            line-height: 0.9;
}
        
@keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            25% { background-position: 25% 50%; }
            50% { background-position: 100% 50%; }
            75% { background-position: 75% 50%; }
}

/* Enhanced profile section */
.profile-section {
            margin-bottom: 50px;
            position: relative;
}

.profile-container {
            position: relative;
            display: inline-block;
            margin-bottom: 40px;
}

        /* Much larger profile image */
.profile-image {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: linear-gradient(45deg, #64ffda, #00d4ff, #ff6b6b, #ffd93d, #64ffda);
            background-size: 400% 400%;
            animation: gradientRotate 6s ease-in-out infinite;
            padding: 6px;
            transition: all 0.4s ease;
            cursor: pointer;
            box-shadow: 
                0 0 60px rgba(100, 255, 218, 0.4),
                0 0 120px rgba(100, 255, 218, 0.2),
                inset 0 0 60px rgba(255, 255, 255, 0.1);
}

.profile-image:hover {
            transform: scale(1.1) rotate(10deg);
            box-shadow: 
                0 0 80px rgba(100, 255, 218, 0.6),
                0 0 160px rgba(100, 255, 218, 0.3),
                inset 0 0 80px rgba(255, 255, 255, 0.2);
}

.profile-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 6rem;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}

        /* Security ninja emoji */
.ninja-emoji {
            font-size: 8rem;
            animation: bounce 2s ease-in-out infinite;
            text-shadow: 0 0 30px rgba(100, 255, 218, 0.5);
}

@keyframes bounce {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-10px) scale(1.05); }
}

        /* Animated rings around profile */
.profile-ring {
            position: absolute;
            border: 3px solid transparent;
            border-radius: 50%;
            border-top: 3px solid #64ffda;
            border-right: 3px solid #00d4ff;
            animation: spin 4s linear infinite;
}

.ring-1 {
            width: 360px;
            height: 360px;
            top: -30px;
            left: -30px;
            animation-duration: 4s;
}

.ring-2 {
            width: 420px;
            height: 420px;
            top: -60px;
            left: -60px;
            animation-duration: 6s;
            animation-direction: reverse;
            opacity: 0.7;
            border-top: 3px solid #ff6b6b;
            border-right: 3px solid #ffd93d;
 }

.ring-3 {
            width: 480px;
            height: 480px;
            top: -90px;
            left: -90px;
            animation-duration: 8s;
            opacity: 0.5;
            border-top: 2px solid #64ffda;
            border-left: 2px solid #00d4ff;
 }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
 }

@keyframes gradientRotate {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
 }


h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; }
h1, h2, h3, h4 {
  margin-top: 1.25rem;
}

/* Links adjusted for dark background */
a {
  color: #00aaff;
}
a:hover,
a:focus {
  color: #66d9ff;
}

/* Horizontal rules */
hr.small {
  max-width: 6.25rem;
  margin: 1rem auto;
  border-width: 0.25rem;
  border-color: inherit;
  border-radius: 0.1875rem;
}

/* Selection styles */
::-moz-selection {
  color: #fff;
  text-shadow: none;
  background-color: #0085A1;
}
::selection {
  color: #fff;
  text-shadow: none;
  background-color: #0085A1;
}
img::selection,
img::-moz-selection {
  color: #fff;
  background: transparent;
}

img {
  max-width: 100%;
}

/* Navbar (kept light adjustments) */
.navbar-custom {
  background-color: #111;
  border-bottom: 1px solid #222;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link {
  font-weight: 800;
  color: #fff;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-nav .nav-link:hover {
  color: #66d9ff;
}

/* Footer dark */
footer {
  padding: 1.875rem 0;
  border-top: 1px #333 solid;
  margin-top: 3.125rem;
  font-size: 0.875rem;
  background-color: #111;
}
footer p.text-muted {
  color: #aaa !important;
}
footer a {
  color: #ccc;
}
footer a:hover {
  color: #fff;
}

/* Tables dark mode */
table tr {
  border-top: 1px solid #333;
  background-color: #111;
}
table tr:nth-child(2n) {
  background-color: #1a1a1a;
}
table tr th {
  font-weight: bold;
  border: 1px solid #444;
  text-align: left;
  padding: 0.375rem 0.8125rem;
}
table tr td {
  border: 1px solid #444;
  text-align: left;
  padding: 0.375rem 0.8125rem;
}

/* Code blocks dark mode */
code {
  padding: 0.125rem 0.25rem;
  color: #f08d49;
  background-color: #222;
  border-radius: 0.25rem;
}
pre {
  font-size: 0.875rem;
  line-height: 1.5em;
  border-radius: 0.25rem;
  padding: 0.59375rem;
  background-color: #111;
  color: #fff;
}

/* Post previews dark */
.post-preview {
  padding: 1.25rem 0;
  border-bottom: 1px solid #333;
}
.post-preview a {
  color: #fff;
}
.post-preview a:hover {
  color: #66d9ff;
}
.post-preview .post-title {
  font-size: 1.875rem;
  margin-top: 0;
  color: #fff;
}
.post-preview .post-meta {
  color: #aaa;
  font-size: 1.125rem;
  font-style: italic;
}

/* Tags dark */
.blog-tags a {
  color: #ddd;
  opacity: 0.8;
  border: 1px solid transparent;
}
.blog-tags a:hover {
  opacity: 1;
  border-color: #ddd;
}

/* Pagination dark */
.pagination .page-item .page-link {
  background-color: #111;
  color: #fff;
  border: 1px solid #444;
}
.pagination .page-item .page-link:hover {
  background-color: #0085A1;
  color: #fff;
}