@font-face {
  font-family: 'apple_garamondregular';
  src: url('applegaramond-webfont.woff2') format('woff2'),
       url('applegaramond-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/*@import url('https://fonts.cdnfonts.com/css/apple-garamond');*/

:root {
  --navBkg: #323232;
  --nav-text: #ffffff;
  --linkBkg: #444444;
  --shadowColor: #3af3bd;
  --gradient: linear-gradient(to right, #222222, #272829, #3af3bd);
  --textColor: #dadada;
  --contentBackground: #222222;
  --contentTitle: #3af3bd;
  --scrollbar-thumb: #3af3bd;
  --scrollbar-track: #272829;
  --scrollbar-border: #272829;
  --quote-border: #3af3bd;
  --terminal-bkg: #000000;
  --terminal-text: #3af3bd;
  --link-text: #3af3bd; /* NEW */
}

.blueLikeJazz {
  --navBkg: #323232;
  --nav-text: #ffffff;
  --linkBkg: #444444;
  --shadowColor: #3af3bd;
  --gradient: linear-gradient(to right, #222222, #272829, #3af3bd);
  --textColor: #dadada;
  --contentBackground: #222222;
  --contentTitle: #3af3bd;
  --scrollbar-thumb: #3af3bd;
  --scrollbar-track: #272829;
  --scrollbar-border: #272829;
  --quote-border: #3af3bd;
  --terminal-bkg: #000000;
  --terminal-text: #3af3bd;
  --link-text: #3af3bd; /* NEW */
}

.challenge-sky {
  --gradient: linear-gradient(to right, #0b0c1b, #492b6c, #9559e9, #e959b0, #0b0c1b);
  --navBkg: #492b6c;
  --nav-text: #e0e0e0;
  --linkBkg: #3a1f4f;
  --shadowColor: #e959b0;
  --textColor: #e0e0e0;
  --contentBackground: #0b0c1b;
  --contentTitle: #9559e9;
  --scrollbar-thumb: #9559e9;
  --scrollbar-track: #0b0c1b;
  --scrollbar-border: #0b0c1b;
  --quote-border: #e959b0;
  --terminal-bkg: #000000;
  --terminal-text: #9559e9;
  --link-text: #9559e9; 
}

.drachenblut {
  --navBkg: #2a0a0a;
  --nav-text: #e0e0e0;
  --linkBkg: #444444;
  --shadowColor: #ff0000;
  --gradient: linear-gradient(to right, #1a0505, #2a0a0a, #4a1a1a);
  --textColor: #e0e0e0;
  --contentBackground: #1a0505;
  --contentTitle: #a43d3d;
  --scrollbar-thumb: #a43d3d;
  --scrollbar-track: #0a0101;
  --scrollbar-border: #2a0a0a;
  --quote-border: #ff0000;
  --terminal-bkg: #000000;
  --terminal-text: #ff0000;
  --link-text: #a43d3d; 
}

.dream-hill {
  --gradient: linear-gradient(to right, #2a3d2a, #3a5a40, #d4af37);
  --navBkg: #3a5a40;
  --nav-text: #f1e9d2;
  --linkBkg: #3a5a40;
  --shadowColor: #d4af37;
  --textColor: #f1e9d2;
  --contentBackground: #2a3d2a;
  --contentTitle: #d4af37;
  --scrollbar-thumb: #d4af37;
  --scrollbar-track: #2a3d2a;
  --scrollbar-border: #3a5a40;
  --quote-border: #d4af37;
  --terminal-bkg: #2a3d2a;
  --terminal-text: #d4af37;
  --link-text: #d4af37; /* NEW - Using the antique gold */
}

.whoWillBi {
  --navBkg: #7545ab;
  --nav-text: #ffffff;
  --linkBkg: #fadde1;
  --shadowColor: #2d2d2d;
  --contentBackground: #eba2dc;
  --contentTitle: #eba2dc;
  --gradient: linear-gradient(to right, #e959b0, #9559e9, #3154ec);
  --textColor: #2d2d2d;
  --scrollbar-thumb: #8f54a0;
  --scrollbar-track: #ffffff;
  --scrollbar-border: #ffffff;
  --quote-border: #8f54d1;
  --terminal-bkg: #ffffff;
  --terminal-text: #2d2d2d;
  --link-text: #7545ab; /* NEW - Using the dark purple */
}

.paperFace {
  --navBkg: #ffe6cc;
  --nav-text: #3a352f;
  --linkBkg: #fbf3e6;
  --shadowColor: #2d2d2d;
  --gradient: linear-gradient(to right, #f5f5f5, #eee5dc, #eedfcf);
  --textColor: #3a352f;
  --contentBackground: #fffbf5;
  --contentTitle: #c9a67f;
  --scrollbar-thumb: #c9a67f;
  --scrollbar-track: #f5f5f5;
  --scrollbar-border: #f5f5f5;
  --quote-border: #c9a67f;
  --terminal-bkg: #fffbf5;
  --terminal-text: #3a352f;
  --link-text: #8B4513; 
}

.pacific-sunset {
  --gradient: linear-gradient(to right, #06b9a3, #0689b9, #dbdbdb, #dd4848, #e6a1e, #01214e);
  --navBkg: #0689b9;
  --nav-text: #ffffff;
  --linkBkg: #cffaf4;
  --shadowColor: #dd4848;
  --textColor: #01214e;
  --contentBackground: #f5f5f5;
  --contentTitle: #e6a12e;
  --scrollbar-thumb: #dd4848;
  --scrollbar-track: #dbdbdb;
  --scrollbar-border: #dbdbdb;
  --quote-border: #0689b9;
  --terminal-bkg: #01214e;
  --terminal-text: #06b9a3;
  --link-text: #dd4848; 
}
html {
  background-image: var(--gradient);
  background-size: 600%;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: sunrise-sunset;
  font-family: 'apple_garamondregular', serif;
}

@keyframes sunrise-sunset {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 50% 0;
  }
  50% {
    background-position: 90% 0;
  }
  60% {
    background-position: 60%;
  }
  75% {
    background-position: 40%;
  }
  100% {
    background-position: 0 0;
  }
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px;
  border: 3px ridge var(--scrollbar-border);
}

body {
  color: var(--textColor);
  font-family: 'Apple Garamond', 'apple_garamondregular', serif;
}

   .container {
            display: flex; /* Enables Flexbox for the container */
            justify-content: space-around; /* Distributes space between items */
            gap: 20px; /* Adds space between the columns */
        }
        .column {
            flex: 1; /* Allows columns to grow and shrink equally */
            padding: 10px;
            border: 1px solid #ccc;
        }

.sidebar {
  height: 100%;
  width: 15vw;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: var(--navBkg);
  overflow-x: hidden;
}

nav li a {
  padding: 2px;
  text-decoration: none;
  background-color: var(--linkBkg);
  /* font-family: 'Montserrat', sans-serif;*/
  font-weight: 600;
  box-shadow: 5px 5px 0px var(--shadowColor);
  display: block;
 
  transition: all 0.2s ease-in-out;
}

nav li a:hover {
  transform: translateY(-2px);
  box-shadow: 7px 7px 0px var(--shadowColor);
  color: var(--textColor); /* This was in your original rule, so we keep it */
}

.main {
  margin-left: 200px;
  background-color: transparent;
}

nav li {
  display: block;
  padding: 20px;
}

nav li a:link {
  color: var(--textColor);
}
nav li a:visited {
  box-shadow: 5px 5px 0px var(--shadowColor);
  color: var(--textColor);
}
nav li a:hover {
  transform: translateY(-2px);
  box-shadow: 7px 7px 0px var(--shadowColor);
  color: var(--textColor); 
}
nav li a:active {
  transform: translateY(1px); 
  box-shadow: none; 
}

.outerquote {
  padding: 20px;
}
.quote {
  border: ridge;
  border-color: var(--quote-border);
  padding: 10px;
}

.quotebody {
  text-align: left;
  font-size: 16px;
}
.quoteattrib {
  text-align: right;
  font-size: 14px;
}

.logo svg {
  filter: invert(100%) drop-shadow(5px 5px 0px var(--shadowColor));
  padding: 20px;
  
  /* Add the transition for a smooth effect */
  transition: all 0.2s ease-in-out;
}

.logo svg:hover {
  /* 1. Lift the SVG */
  transform: translateY(-2px);
  
  /* 2. Invert and expand the shadow */
  filter: invert(100%) drop-shadow(7px 7px 0px var(--shadowColor));
  padding: 20px; /* This was in your original rule, so we keep it */
}
.logo svg:active {
  transform: translateY(1px); /* Move down slightly */
  filter: invert(100%); /* Keep the invert, but remove the drop-shadow */
}
.logo a {
  padding: 2px;
  text-decoration: none;
  display: block;
}

.webbuttons {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.webbuttons img {
  padding: 2px 5px;
}

.articleTitle {
  padding: 5px;
  text-decoration: none;
  background-color: var(--navBkg);
  color: var(--nav-text); /* Changed from 'white' */
  font-weight: 600;
  box-shadow: 5px 5px 0px var(--shadowColor);
  display: block;
  text-align: center;
  align-content: center;
  align-self: center;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 30px;
}

.articleTitle em {
  color: var(--contentTitle);
  text-shadow: 5px 5px 0px #000000; /* Changed from #000000 */
}

.articleContent {
  padding: 20px;
  background-color: var(--contentBackground);
  text-align: left;
  font-size: 12px;
  align-self: center;
  margin-left: 20%;
  margin-right: 20%;
  box-shadow: 5px 5px 0px var(--shadowColor);
  font-size: 15px;
  color: var(--textColor);
}

.articleContent h3 {
  text-align: center;
  font-size: 30px;
  color: var(--textColor);
}
.articleContent h5 {
  font-size: 20px;
  color: var(--textColor);
}

.twocolSection {
  display: flex;
  align-content: center;
  align-self: center;
  margin-left: 8%;
  margin-right: 8%;
}

.homegrid {
  margin-left: 8%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-self: center;
}
.opiniongrid {
  margin-left: 8%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-self: center;
}

.fullSpreadBlock {
  padding: 20px;
  background-color: var(--contentBackground);
  text-align: left;
  font-size: 12px;
  align-self: center;
  margin-left: 8%;
  margin-right: 8%;
  box-shadow: 5px 5px 0px var(--shadowColor); /* Changed from #2d2d2d */
  font-size: 15px;
  color: var(--textColor);
  display: inline-block;
}

.fullSpreadBlock td {
  padding: 5px;
  margin: 0px;
}

.block {
  padding: 20px;
  background-color: var(--contentBackground);
  text-align: left;
  font-size: 12px;
  align-self: center;
  margin: 20px;
  width: 100%;
  height: 500px;
  box-shadow: 5px 5px 0px var(--shadowColor);
  font-size: 15px;
  color: var(--textColor);
  overflow-x: hidden;
}

.homegrid .block {
  padding: 10px;
  background-color: var(--contentBackground);
  text-align: left;
  font-size: 12px;
  align-self: center;
  height: 50vh;
  box-shadow: 5px 5px 0px var(--textColor); /* This one uses textColor for shadow */
  font-size: 15px;
  color: var(--textColor);
  overflow-x: hidden;
  width: 30vw;
}

.opiniongrid .block {
  padding: 10px;
  background-color: var(--contentBackground);
  text-align: left;
  font-size: 12px;
  align-self: center;
  height: 50vh;
  box-shadow: 5px 5px 0px var(--textColor); /* This one uses textColor for shadow */
  font-size: 15px;
  color: var(--textColor);
  overflow-x: hidden;
  width: 30vw;
}

@media (max-aspect-ratio: 1.9/1) {
  .homegrid {
    margin-left: 0%;
    margin-right: 5%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-self: center;
  }
  .homegrid .block {
    background-color: var(
      --contentBackground
    ); /* Changed from #eba2dc */
    text-align: left;
    font-size: 12px;
    align-self: center;
    width: 100%;
    height: 50vh;
    box-shadow: 5px 5px 0px var(--shadowColor); /* Changed from #2d2d2d */
    font-size: 15px;
    color: var(--textColor); /* Changed from #2d2d2d */
    overflow-x: hidden;
  }
  
  .sidebar{
  width: 200px;
  
  }
}

.right-text {
  text-align: right;
  align-self: right;
  display: block;
}
.right-text h3 {
  text-align: center;
  font-size: 30px;
  color: var(--textColor); /* Changed from #2d2d2d */
}
.right-text h5 {
  font-size: 20px;
  color: var(--textColor); /* Changed from #2d2d2d */
}

textarea {
  border-radius: 2px;
  border-style: outset;
  background-color: var(--terminal-bkg); /* Changed from black */
  color: var(--terminal-text); /* Changed from aquamarine */
}

.weGetIt {
  text-decoration: none;
  padding: 5px;
  background-color: var(--contentBackground);
  text-align: left;
  font-size: 14px;
  align-self: center;
  box-shadow: 5px 5px 0px var(--shadowColor);
  font-size: 15px;
  color: var(--textColor);
  
  transition: all 0.2s ease-in-out;
}
.weGetIt:hover {
  transform: translateY(-2px);
  box-shadow: 7px 7px 0px var(--shadowColor);
 
}
.weGetIt:active {
  transform: translateY(1px); /* Move down slightly */
  box-shadow: none; /* Hide the shadow */
}


.weGetIt img {
  height: auto;
}

.wgi {
  margin: 30px 0px;
  align-self: right;
}

.webButton3Col {
  margin-left: 10%;
  margin-right: 10%;
}
.projectIcon {
  width: 20%;
  margin: 3%;
}
.photoOfWeek {
  box-shadow: 5px 5px 0px var(--shadowColor);
  width: 65%;
  align-self: center;
}
.shadowphoto {
  box-shadow: 5px 5px 0px var(--shadowColor);
}
.blogp {
  padding: 25px;
}
.blogThumb img {
  box-shadow: 5px 5px 0px var(--shadowColor);
  width: 65%;
  align-self: center;
   
  transition: all 0.2s ease-in-out;
}
.blogThumb img:hover {

  transform: translateY(-2px);
  box-shadow: 7px 7px 0px var(--shadowColor);
 
}
.blogThumb img:active {
  transform: translateY(1px); /* Move down slightly */
  box-shadow: none; /* Hide the shadow */
}
p {
  font-size: 16px;
}

.icn {
  width: 3%;
}

.arcrow {
  display: flex;
  flex-wrap: wrap;
  padding: 1% 8%;
}

.arcolumn {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.arcolumn img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .arcolumn {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .arcolumn {
    flex: 100%;
    max-width: 100%;
  }
}

.sidebyside {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 5px;
}
.blogCard div {
  padding: 20px;
  background-color: var(--contentBackground);
  text-align: left;
  font-size: 12px;
  align-self: center;
  margin-left:5%;
  font-size: 15px;
  color: var(--textColor); /* Changed from #2d2d2d */
  box-shadow: 5px 5px 0px var(--textColor); /* This one uses textColor */
}
.blogCard div:hover {
  padding: 20px;
  background-color: var(--contentBackground);
  text-align: left;
  font-size: 12px;
  align-self: center;
 margin-left:5%;
  font-size: 15px;
  color: var(--textColor); /* Changed from #2d2d2d */
  box-shadow: 0px 0px 0px var(--textColor); /* This one uses textColor */
}

#qBlock{
  color: var(--textColor);

}

/* --- Links in Main Content --- */
.main a:link,
.main a:visited {
  color: var(--link-text);
  text-decoration: underline; /* Helps links stand out */
  font-weight: 600; /* Makes them a bit bolder */
}

.main a:hover {
  color: var(--shadowColor); /* Uses your theme's main accent on hover */
  text-decoration: none;
}


/* --- Favorites Gallery Rows --- */

.favorites-block {
  /* This just adds a bit of vertical space inside the block */
  padding-top: 10px;
  padding-bottom: 10px;
}

.favorites-row {
  /* A container for one category, e.g., "Movies" */
  margin-bottom: 25px; /* Space between rows */
}

.favorites-row h4 {
  /* The title, e.g., "Movies", "Albums" */
  text-align: center;
  margin-bottom: 15px;
  color: var(--contentTitle); /* Uses your theme's title color */
}

.favorites-gallery {
  /* This is the container that makes the images a row */
  display: flex;
  flex-wrap: wrap; /* Allows images to wrap on small screens */
  justify-content: center; /* Centers the images in the row */
  gap: 10px; /* The "tiny bit of space" you wanted */
}

.favorites-gallery a {
  /* The link wrapper */
  display: block; /* Ensures it behaves like a block */
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.favorites-gallery img {
  /* The poster image itself */
  height: 150px; /* Uniform height for all posters */
  width: auto; /* Width will adjust automatically */
  display: block;
  box-shadow: 3px 3px 0px var(--shadowColor);
  transition: all 0.2s ease-in-out;
}

/* --- Hover Effect --- */
.favorites-gallery a:hover {
  transform: translateY(-2px); /* Lifts the image slightly */
}

.favorites-gallery a:hover img {
  box-shadow: 5px 5px 0px var(--shadowColor); /* Expands the shadow */
}

/* --- Project Tracker --- */
.project-list {
  list-style-type: none;
  padding-left: 0;
}

.project-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.project-info {
  margin-left: 15px;
}

.project-info strong {
  font-size: 1.1em;
  color: var(--textColor); /* Use textColor to make sure it's readable */
}

.project-info p {
  font-size: 0.9em;
  margin-top: 5px;
}

/* --- Status Pills --- */
.project-list span[class^="status-"] {
  display: inline-block;
  font-size: 0.8em;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  flex-shrink: 0; /* Prevents the pill from shrinking */
}

/* "In Progress" uses your main accent color */
.status-active {
  background-color: var(--shadowColor);
  color: var(--contentBackground); /* Use contentBackground for text on pills */
}

/* "On Hold" uses a more neutral/dim color */
.status-on-hold {
  background-color: var(--linkBkg);
  color: var(--textColor);
  text-decoration: line-through;
}

/* "Complete" uses the main content title color */
.status-complete {
  background-color: var(--contentTitle);
  color: var(--contentBackground);
  opacity: 0.8;
}

/* --- /uses Block --- */
.uses-section {
  margin-bottom: 20px;
}

.uses-section h4 {
  color: var(--contentTitle);
  margin-bottom: 10px;
}

.uses-section ul {
  list-style-type: square;
  margin-left: 25px;
}

/* --- Favorite Software Grid --- */
.software-grid {
  display: grid;
  /* Creates a responsive grid: 
     - Tries to fit items that are 150px wide
     - Stretches them to fill the space
     - Wraps to the next line if they don't fit
  */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; /* Space between the grid items */
  padding: 10px;
}

.software-item a {
  display: block;
  text-decoration: none;
  padding: 15px 10px;
  text-align: center;
  font-weight: 600;
  
  /* Use theme variables for styling */
  background-color: var(--linkBkg); 
  color: var(--textColor);
  border-radius: 4px; /* Slightly rounded corners */
  
  transition: all 0.2s ease-in-out;
}

.software-item a:hover {
  background-color: var(--shadowColor);
  color: var(--contentBackground); /* Text color on hover */
  transform: translateY(-2px);
  box-shadow: 2px 2px 0px var(--contentTitle); /* Use a secondary color for shadow */
}

/* --- Divider Line --- */
.block hr {
  border: none; /* Remove default border */
  height: 2px; /* Make it a thin line */
  background-color: var(--contentTitle); /* Use your theme's title color */
  opacity: 0.5; /* Make it a bit faded */
  margin: 30px 10px; /* Add spacing above and below */
}

.tight-right-img
{
	float: right;
	margin-left: 15px;
	margin-bottom: 10px;
	width:30%;
	height:auto;
}
.tight-left-img
{
	float: left;
	margin-right: 15px;
	margin-bottom: 10px;
	width:30%;
	height:auto;
}