/* 
  alternative_base.css
  This file applies ONLY to synth-redesign.html
  so it won't interfere with the rest of your site.
*/

/* Use a new font via Google Fonts (Montserrat) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap');
@import url('font_alternative.css');
/* Reset / base styles */
body {
  margin: 0;
  padding: 0;
  background-color: #000; /* Solid black background */
  color: #eee;            /* Light text */
  font-family: 'Montserrat', sans-serif;
}

/* Left sidebar for navigation */
.left-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;             /* Full viewport height */
  background-color: #111;    /* Slightly lighter than black */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

/* Site logo/title at the top of the sidebar */
.site-logo a {
  color: #fff;
  text-decoration: none;
  font-size: 1.4em;
  font-weight: 600;
  margin-bottom: 40px;
  text-align: center;
}

/* Vertical navigation menu */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  margin: 20px 0;
}

nav a {
  color: #aaa;
  text-decoration: none;
  font-size: 1em;
  transition: color 0.2s ease;
}

nav a:hover {
  color: #fff;
}

/* Main content area, shifted right to accommodate the sidebar */
.main-content {
  margin-left: 200px; /* Matches .left-nav width */
  padding: 40px;
  max-width: 1000px;
}

/* Page header / main titles */
header h1 {
  font-size: 3em;
  margin: 0;
  color: #fff;
}

header h2 {
  font-size: 1.5em;
  color: #1abc9c; /* Accent color */
  margin: 10px 0 30px;
}

/* Intro paragraph styling */
.intro-text {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 40px;
  color: #ccc;
}

/* Each project section spacing */
.project-section {
  margin-bottom: 60px;
}

/* A grid layout to pair text & images or video side-by-side */
.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}

/*
  "reverse" class flips the order so that 
  the image (or video) can appear on the left 
  and text on the right (and vice versa).
*/
.project-grid.reverse {
  direction: rtl; 
}
.project-grid.reverse .grid-item {
  direction: ltr;
}

/* Grid item styling */
.grid-item {
  background-color: #111; 
  padding: 20px;
  border-radius: 4px;
}

.grid-item h3 {
  color: #fff;
  margin-top: 0;
}

.grid-item p {
  color: #ccc;
  line-height: 1.6;
}

/* Make media elements responsive */
.grid-item img,
.grid-item video {
  width: 100%;
  border-radius: 4px;
}

/* Links inside grid items */
.grid-item a {
  color: #1abc9c;
  text-decoration: none;
}
.grid-item a:hover {
  text-decoration: underline;
}

/* Footer styling */
footer {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid #333;
  text-align: center;
  color: #666;
}

footer a {
  color: #1abc9c;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}