/* Base styles */
:root {
  /* Light Theme Colors - Easy to change */
  --bg-light: #fff9f2;           
  --accent-light: #1e107a;       
  --muted-light: #000000;        
  --text-light: #000000;         
  --sub-light: #df1541; 
  
  /* Dark Theme Colors - Easy to change */
  --bg-dark: #0d1c1c;           
  --text-dark: #ffffff;         
  --accent-dark: #ff6600;        
  --muted-dark: #9c9191;         
  --sub-dark: #f0e800;    
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: monospace;
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s;
}

.light-theme {
  background-color: var(--bg-light);
  color: var(--text-light);
}

.dark-theme {
  background-color: var(--bg-dark);
  color: var(--text-dark);
}

#app {
  min-height: 100vh;
  padding: 2rem;
  /* Adding responsive padding */
  margin: 0 auto;
}

/* Responsive padding for desktop and tablet */
@media (min-width: 768px) {
  #app {
    padding-left: 10%;
    padding-right: 10%;
  }
}

/* Header & Navigation */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

nav a {
  color: inherit;
  text-decoration: none;
}

.light-theme nav a:hover,
.light-theme nav a.active {
  color: var(--sub-light);
  border-bottom: 1px solid var(--sub-light);
}

.dark-theme nav a:hover,
.dark-theme nav a.active {
  color: var(--sub-dark);
  border-bottom: 1px solid var(--sub-dark);
}

#theme-toggle {
  background: none;
  border: 1px solid;
  border-color: var(--sub-light);
  padding: 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.dark-theme #theme-toggle {
  border-color: var(--sub-dark);
}

/* Content Sections */
section {
  margin-bottom: 2rem;
}

h1, h2, h3 {
  margin-bottom: 1rem;
}

.light-theme h1,
.light-theme h2,
.light-theme h3 {
  color: var(--accent-light);
}

.dark-theme h1,
.dark-theme h2,
.dark-theme h3 {
  color: var(--accent-dark);
}

p {
  margin-bottom: 1.5rem;
}

/* Experience Items */
.experience-item {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid;
}

.light-theme .experience-item {
  border-color: var(--sub-light);
}

.dark-theme .experience-item {
  border-color: var(--sub-dark);
}

.experience-item:last-child {
  border-bottom: none;
}

.experience-meta {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.light-theme .experience-meta {
  color: var(--muted-light);
}

.dark-theme .experience-meta {
  color: var(--muted-dark);
}

/* Featured projects on me section */
.featured-projects {
  margin-top: 2rem;
}

.featured-projects ul {
  list-style: none;
}

.featured-projects li {
  margin-bottom: 0.5rem;
}

.featured-projects .project-tagline {
  font-size: 0.875rem;
}

.light-theme .featured-projects .project-tagline {
  color: var(--muted-light);
}

.dark-theme .featured-projects .project-tagline {
  color: var(--muted-dark);
}

/* Projects List */
.project-link {
  color: inherit;
  text-decoration: none;
}

.light-theme .project-link:hover {
  color: var(--sub-light);
  text-decoration: underline;
}

.dark-theme .project-link:hover {
  color: var(--sub-dark);
  text-decoration: underline;
}

/* Thoughts List */
.thought-item {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid;
  cursor: pointer;
}

.light-theme .thought-item {
  border-color: var(--sub-light);
}

.dark-theme .thought-item {
  border-color: var(--sub-dark);
}

.thought-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
}

.thought-title {
  font-weight: 500;
}

.light-theme .thought-item:hover .thought-title {
  color: var(--accent-light);
  text-decoration: underline;
}

.dark-theme .thought-item:hover .thought-title {
  color: var(--accent-dark);
  text-decoration: underline;
}

.thought-date {
  font-size: 0.875rem;
}

.light-theme .thought-date,
.light-theme .thought-summary {
  color: var(--muted-light);
}

.dark-theme .thought-date,
.dark-theme .thought-summary {
  color: var(--muted-dark);
}

.thought-summary {
  font-size: 0.875rem;
}

/* Thought Detail Page */
.thought-detail-page {
  max-width: 100%;
}

.thought-detail-page header {
  margin-bottom: 2rem;
}

.thought-detail-page header.with-backdrop {
  position: relative;
  background-image: url('../ships.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding: 3rem 2rem;
  border-radius: 0.5rem;
  margin-bottom: 3rem;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.thought-detail-page header.with-backdrop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
  border-radius: 0.5rem;
  z-index: 1;
}

.thought-detail-page header.with-backdrop h1,
.thought-detail-page header.with-backdrop time {
  position: relative;
  z-index: 2;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.thought-detail-page h1 {
  margin-bottom: 0.5rem;
}

.thought-detail-page time {
  display: block;
  font-size: 0.875rem;
}

.light-theme .thought-detail-page time {
  color: var(--muted-light);
}

.dark-theme .thought-detail-page time {
  color: var(--muted-dark);
}

.thought-content {
  white-space: pre-line;
  line-height: 1.8;
}

/* Social Links */
.social-links {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.social-link {
  color: inherit;
  transition: color 0.2s;
}

.light-theme .social-link:hover {
  color: var(--sub-light);
}

.dark-theme .social-link:hover {
  color: var(--sub-dark);
}

.light-theme .site-link {
  color: var(--text-light);
}

.dark-theme .site-link {
  color: var(--text-dark);
}

.light-theme .site-link:hover {
  color: var(--sub-light);
}

.dark-theme .site-link:hover {
  color: var(--sub-dark);
}

/* Contact info in me section */
.contact-info {
  margin-top: 2rem;
}

.contact-info .social-links {
  margin-bottom: 1rem;
}

/* Back Link */
.back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  cursor: pointer;
}

.light-theme .back-link {
  color: var(--sub-light);
}

.dark-theme .back-link {
  color: var(--sub-dark);
}

.back-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  #app {
    padding: 1.5rem;
  }
}