.buttons a,.card-links a,.footer a,.social-icons a {
text-decoration:none
}

body,body.landing {
margin:0;
font-family:'Fira Code',monospace
}

.buttons a,.card {
text-align:center
}

.blog-card,.card,.reveal {
opacity:0;
transform:translateY(30px);
animation:.6s forwards fadeInUp
}

.grid {
grid-template-columns:repeat(auto-fit,minmax(300px,1fr))
}

body.landing {
/*background:url(background.jpg) center center/cover no-repeat fixed;*/
display:flex;
justify-content:center;
align-items:center;
height:100vh
}

.card h2,.card p,.profile-pic {
margin-bottom:1rem
}

@keyframes fadeSlideUp {
to {
opacity:1;
transform:translateY(0)
}
}

.card h2 {
color:#fff;
margin-top:1rem;
font-weight:600;
letter-spacing:1px
}

.profile-pic {
width:100px;
height:100px;
border-radius:50%;
border:2px solid #000
}

.social-icons {
margin:1rem 0;
display:flex;
justify-content:center;
gap:15px
}

.social-icons a {
color:#fff;
font-size:1.2rem;
transition:color .2s,transform .3s
}

.social-icons a:hover {
color:#38bdf8;
transform:scale(1.3)
}

.buttons {
margin-top:1.2rem;
display:flex;
flex-direction:column;
gap:.8rem
}

.buttons a {
background:#fff;
color:#000;
padding:.6rem 1rem;
border:2px solid #fff;
transition:.3s
}

.buttons a:hover {
background:0 0;
color:#fff
}

@media (max-width:768px) {
body {
padding:1rem;
height:auto;
flex-direction:column
}

.card {
width:400px;
padding:3rem 2.5rem
}

.buttons {
flex-direction:column;
gap:.5rem
}

.profile-pic {
width:100px;
height:100px
}

.social-icons {
gap:10px
}

.social-icons a i {
font-size:1.4rem
}
}

.blog-entry,.project-card {
background:#1a1a1a;
padding:1.5rem
}

.grid {
display:grid
}

.blog-timeline,.footer,.site-header {
display:flex;
display:flex
}

.project-card {
border:1px solid #333;
transition:transform .3s,box-shadow .3s
}

.project-card:hover {
transform:translateY(-5px);
box-shadow:0 0 10px #38bdf8
}

.blog-card:hover,.blog-entry:hover {
transform:translateY(-4px)
}

.blog-timeline {
flex-direction:column;
gap:2rem
}

.blog-entry {
border-left:4px solid #38bdf8;
position:relative;
transition:.3s
}

.blog-entry::before {
content:"";
width:10px;
height:10px;
background:#38bdf8;
border-radius:50%;
position:absolute;
left:-7px;
top:1.5rem
}

.blog-entry:hover {
box-shadow:0 0 8px #38bdf8
}

.fixed-toggle label {
color:#38bdf8;
font-size:1.2rem;
cursor:pointer;
font-weight:700
}

.tag,.tech-stack span {
border-radius:4px;
font-size:.7rem
}

#theme-icon {
font-size:1.4rem;
cursor:pointer;
color:#38bdf8
}

.read-btn,.tag {
background:#38bdf8;
font-weight:700
}

.footer a {
color:#38bdf8;
margin-left:15px
}

.blog-card a:hover,.footer a:hover,.read-more:hover {
text-decoration:underline
}

body.light-theme .blog-entry,body.light-theme .card,body.light-theme .project-card {
background:#fff;
color:#111
}

body.light-theme .tag {
background:#111;
color:#fff
}

body.light-theme {
background-color:#f9f9f9!important
}

body.light-theme input,body.light-theme textarea {
background:#fff;
color:#000;
border-color:#07f
}

body.light-theme .read-btn,body.light-theme button {
background:#07f;
color:#fff
}

body.light-theme .back-link,body.light-theme .footer a,body.light-theme .footer-left a,body.light-theme .footer-right a:hover,body.light-theme .project-card a:hover,body.light-theme .site-name:hover {
color:#07f
}

body.light-theme .project-card a,body.light-theme .project-card h2,body.light-theme .project-card p {
color:#111
}

.site-header {
align-items:center;
align-items:center
}

.site-name {
font-family:Georgia,'Times New Roman',serif;
transition:color .3s
}

.fixed-toggle,.footer-right a:hover,.site-name:hover {
color:#38bdf8
}

.card-thumb {
width:100%;
height:160px;
object-fit:cover;
border-radius:4px;
margin-bottom:.8rem;
transition:transform .3s
}

.no-scroll-page,body {
height:100vh;
overflow:hidden
}

.card-btn,.read-btn {
transition:background .3s
}

.project-card:hover .card-thumb {
transform:scale(1.03)
}

.tag {
display:inline-block;
color:#000;
padding:3px 8px;
margin-bottom:.5rem
}

.tech-stack {
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:.5rem
}

.tech-stack span {
background:#222;
padding:3px 7px;
color:#fff
}

.card-links {
margin-top:1rem;
display:flex;
justify-content:space-between
}

.page {
justify-content:center;
display:flex
}

.card-links a {
font-size:.85rem;
color:#38bdf8;
transition:color .2s
}

.card,.card-links a:hover {
color:#fff
}

.read-btn,body.light-theme .card a,body.light-theme .card h2,body.light-theme .card p,body.light-theme .card span,body.light-theme .footer-right a,body.light-theme .site-name {
color:#000
}

.page {
align-items:center;
flex-direction:column
}

.top-page {
padding-top:6rem;
align-items:flex-start
}

.page {
min-height:100vh;
flex-direction:column;
align-items:center;
padding:3rem
}

body {
background:#111;
color:#eee;
transition:background .4s,color .4s
}

.no-scroll-page {
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
padding:6rem 2rem 3rem;
display:flex;
flex-direction:column;
align-items:center;
justify-content:start
}

.read-btn {
border:none;
padding:.6rem 1.2rem;
cursor:pointer
}

.read-btn:hover {
background:#1a1a1a;
color:#fff
}

.full-blog {
margin-top:1rem;
font-size:.9rem;
line-height:1.5
}

.hidden {
display:none
}

body.light-theme .blog-card,body.light-theme .full-blog {
background:#fff;
color:#000;
border-color:#000
}

.page.no-scroll-page {
display:flex;
padding:6rem 2rem;
align-items:flex-start
}

.blog-grid,.grid {
justify-content:center
}

.blog-card .read-btn,.read-btn {
display:inline-block;
margin-top:1rem
}

.grid {
gap:2.5rem;
display:flex;
flex-wrap:wrap
}

.blog-card a,.read-more {
display:inline-block;
color:#38bdf8;
text-decoration:none
}

.read-more {
margin-top:1rem;
font-weight:700
}

.blog-grid,.blogs-grid,.footer,.grid,.site-header {
display:flex
}

body.light-theme .blog-card {
border:2px solid #000
}

.site-header {
padding:1rem 2rem;
font-family:Georgia,serif
}

.back-link {
position:fixed;
top:4rem;
left:2rem;
text-decoration:none;
color:inherit;
font-size:.95rem
}

.grid {
flex-wrap:wrap;
justify-content:center
}

.card {
border-radius:10px;
box-shadow:0 0 15px #0003;
background:#1a1a1a;
padding:3rem 2.5rem;
border:2px solid #fff;
box-shadow:6px 6px 0 #000;
width:450px;
max-width:90%
}

.card h2 {
font-size:1.8rem
}

.card p {
font-size:.9rem
}

.card-btn {
text-decoration:none;
color:#fff;
background:#38bdf8;
padding:.5rem 1rem;
border-radius:4px;
font-size:.85rem
}

.blog-page,.blogs-page {
min-height:100vh;
transition:background .3s,color .3s
}

.card-btn:hover {
background:#07f
}

body.light-theme .card-btn {
color:#fff;
background:#07f
}

body.light-theme .card-btn:hover {
background:#005fd8
}

.blog-page {
background-color:#0f0f0f;
padding:3rem 2rem;
color:#fff
}

body.light-theme .blog-page {
background-color:#f9f9f9;
color:#000
}

.blog-grid {
gap:2rem;
flex-wrap:wrap
}

.blog-card h3 {
margin-top:0;
font-size:1.1rem;
margin-bottom:.8rem;
font-weight:700
}

.blogs-page {
padding:6rem 2rem 4rem;
background:#0f0f0f
}

body.light-theme .blogs-page {
background:#f9f9f9;
color:#000
}

.blogs-grid {
justify-content:center;
gap:2rem;
flex-wrap:wrap;
margin-top:2rem
}

.blog-card a,.button-link {
margin-top:1rem;
font-weight:700
}

.blog-card {
border-radius:8px;
width:350px;
box-shadow:6px 6px 0 #000
}

body.light-theme .blog-card p {
color:#333
}

body.light-theme {
background:#f4f4f4;
color:#000
}

body.light-theme .card {
background:#fff;
color:#000;
border:2px solid #000
}

.page-path,.site-name {
color:#fff;
text-decoration:none
}

.page-path,.site-name {
font-weight:700;
font-size:1.3rem
}

body.light-theme .footer-left {
color:#666
}

.grid {
display:grid;
padding:5rem 2rem 2rem
}

.footer,.site-header {
left:1.5rem;
display:flex;
position:fixed
}

.blog-card {
background:#1a1a1a;
padding:2rem;
border:2px solid #fff;
text-align:left;
transition:transform .3s
}

.blog-card h2 {
font-size:1.1rem;
margin-bottom:.5rem
}

.blog-card p {
font-size:.9rem;
color:#ccc;
margin-bottom:1rem
}

.blog-card a.read-more {
color:#38bdf8;
text-decoration:none;
font-weight:700
}

.site-header {
top:1rem;
font-size:1.3rem;
font-weight:700;
gap:.4rem;
z-index:1000
}

.page-path {
margin-left:4px;
color:#aaa
}

body.light-theme .page-path {
color:#555
}

.fixed-toggle {
position:fixed;
top:1rem;
right:1.5rem;
cursor:pointer;
font-size:1.3rem;
z-index:1000
}

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

to {
opacity:1;
transform:translateY(0)
}
}

.grid {
display:grid;
gap:2rem
}

.button-link {
display:inline-block;
padding:.5rem 1rem;
background:#38bdf8;
color:#000;
text-decoration:none;
border-radius:4px;
transition:background .3s
}

.button-link:hover {
background:#1a1a1a;
color:#fff;
border:1px solid #38bdf8
}

body.light-theme .footer-right a {
  color: #000;
}
body.light-theme .footer-right a:hover {
  color: #0077ff;
}
.email {
  color: #fff;
}
body.light-theme .email {
  color: #000;
}

.footer {
  position: fixed;
  bottom: 1rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: #999;
  flex-wrap: wrap;
}

.footer-left a {
  color: #38bdf8;
  text-decoration: none;
}

.footer-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.footer-right a {
  color: #fff;
  font-size: 1.1rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-right a:hover {
  color: #38bdf8;
}

body.light-theme .footer-left a {
  color: #0077ff;
}

body.light-theme .footer-right a {
  color: #000;
}

body.light-theme .footer-right a:hover {
  color: #0077ff;
}

.footer-right {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  max-width: 100%;
  overflow-x: auto;
}

footer .footer-right a {
  margin-left: 6px;
  margin-right: 0;
}

footer .footer-right a:first-child {
  margin-left: 0;
}

.blogs-page {
  min-height: 100vh;
  padding: 6rem 2rem 4rem;
  background: #0f0f0f;
  transition: background 0.3s, color 0.3s;
}

body.light-theme .blogs-page {
  background: #f9f9f9;
  color: #000;
}

.blogs-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.blog-card {
  background: #1a1a1a;
  padding: 2rem;
  border: 2px solid #fff;
  border-radius: 8px;
  width: 350px;
  box-shadow: 6px 6px 0px #000;
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(30px);
}

.blog-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  font-weight: bold;
}

.blog-card p {
  font-size: 0.9rem;
  color: #ccc;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.blog-card a.read-more {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #38bdf8;
  color: #000;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.blog-card a.read-more:hover {
  background: #1a1a1a;
  color: #fff;
}

body.light-theme .blog-card a.read-more {
  background: #0077ff;
  color: #fff;
}

body.light-theme .blog-card a.read-more:hover {
  background: #005fd8;
  color: #fff;
}
.blogs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  justify-content: center;
}
.tagline {
  font-size: 1rem;
  color: var(--text-color, #ccc);
  margin-top: 0.3rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-align: center;
}
.tagline {
  font-size: 1rem;
  color: var(--text-color, #ccc);
  margin-top: 0.3rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-align: center;
  height: 1.4rem;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

.cursor {
  display: inline-block;
  color: var(--text-color, #ccc);
  animation: blink 1s infinite;
  font-weight: bold;
}

.grid-loop {
  position: fixed;
  top: 0; left: 0;
  width: 200%;
  height: 200%;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: rotateGridLoop 80s linear infinite;
  z-index: -2;
}

@keyframes rotateGridLoop {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.blog-content {
  max-width: 800px;
  margin: 1.5rem auto;
  padding: 0 2rem 5rem;
  line-height: 1.6;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

@media (max-width: 768px) {
  .card {
    width: 90%;
    padding: 2rem 1rem;
  }

  .profile-pic {
    width: 120px;
    height: 120px;
  }

  .tagline {
    font-size: 1rem;
  }

  .buttons {
    flex-direction: column;
    gap: 0.75rem;
  }

  .buttons a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.95rem;
  }

  .social-icons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
}