/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  box-sizing: border-box;
  background-image: 
    url("/lilypad.png"), 
    linear-gradient(#77C777, white);
  background-repeat: repeat, no-repeat;
  background-size: 20px, cover; 
  background-position: top left, center;
  background-repeat: repeat, no-repeat;
  background-size: 100px, cover; 
  min-height: 100vh;
  color: darkgreen;
  font-family: georgia, serif, sans-serif;
  font-size: 18px;
  max-width: 600px;
  padding: 0 20px;
  text-align: center;
  margin: 0 auto;
}
h1 {
  font-family: monospace, sans-serif;
  text-align: center;
  background-color: darkgreen;
  color: white;
  border: 4px dotted white;
  outline: 4px solid darkgreen;
  border-radius: 16px;
  padding: 15px;
  margin: 40px 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  font-size: 48px;
}
.small-pic {
    width: 200px;
    height: auto;
    background-color: rgba(255,255,255,0.9); 
    padding: 10px;
    border: 4px dotted darkgreen; 
    outline: 4px solid rgba(255,255,255,0.9);
    border-radius: 16px;
    margin: 40px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4)
}
/* Turns on the Flexbox system to force columns side-by-side */
.column-container {
    justify-content: center;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    gap: 20px;
    padding: 20px;
    max-width: 14000px;    /* Keeps your boxes from stretching too wide on massive screens */
    margin: 0 auto;   /* Centers the entire 3-column container on the screen */
    text-align: center;
}

/* Base styles for the two sidebars */
.side-column {
    flex: 0 0 200px;              /* Gives side columns 1 basic unit of width */
    background-color: rgba(255, 255, 255, 0.9); /* White box with slight transparency */
    border: 3px solid darkgreen;
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0,4px, 8px, rgba(0,0,0,0.4);
    height: fit-content;  /* Stops the box from stretching vertically if it doesn't need to */
    margin: 0 auto;
}

/* Base styles for the big middle content column */
.middle-column {
    flex: 0 0 400px;                /* Makes the middle column TWICE as wide as a side column */
    box-sizing: border-box;
    
    /* 1. Make the structural layout border very thin so text can expand */
    border: 1px solid transparent; 
    
    border-image-source: url('textbox-bg.png');
    border-image-slice: 552 fill; 
    border-image-repeat: no-repeat;
    
    /* 2. Scale the VISUAL graphic back up to roughly 64px without affecting text space */
    border-image-width: 64px; 
    
    /* 3. Adjust padding to move text away from the drawn edges if needed */
    padding: 24px;
    margin: 0 auto;
    font-size: 24px;
}

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

/* The parent navbar container */
.navbar {
  position: fixed;     /* Locks it in place relative to the screen */
  top: 0;              /* Aligns it to the very top edge */
  left: 0;             /* Aligns it to the very left edge */
  width: 150px;        /* Gives the sidebar a set width */
  height: 100vh;       /* Spans 100% of the viewport height */
  background-color: darkgreen;
  color:lightgreen;
  z-index: 1000;       /* Keeps it layered on top of page content */
  display: flex;
  flex-direction: column; 
  align-items: flex-start; /* Aligns content to the left inside the bar */
  padding: 30px 20px;
  gap: 40px;           /* Puts space between your logo and links list */
}

/* The links container */
.nav-links {
  display: flex;       /* Lays out the li items horizontally */
  gap: 20px;           /* Spacing between links */
  list-style: none;    /* Removes bullet points */
  flex-direction: column; 
}

.nav-links a {
  color: lightgreen;
  text-decoration: none;
  font-size: 22px;
  
}
  
.nav-links a:hover {
  color: #ffffff; 
  text-shadow: 
    0 0 5px #39ff14,
    0 0 10px #39ff14,
    0 0 20px #39ff14,
    0 0 40px #39ff14;
  font-size: 24px;
}