@charset "UTF-8";
/* CSS Document */
/* Tom Hunter Photography © */


/* CONTAINER - Used To Divide Columns */
.container {
  display: grid;
  /* Left column takes remaining space (1fr), right column is fixed (250px) */
  grid-template-columns: minmax(0, 600px) 308px;
  gap: 20px;

  /* This limits the layout's total size and centers it on wide screens */
  max-width: 800px;      /* 600px (content) + 350px (sidebar) + 20px (gap) */
  margin: 20px auto;     /* Centers the entire 2-column unit horizontally */
  padding: 0 20px;       /* Keeps it from touching screen edges on medium displays */
  align-items: start; 
}

/* 5. Sticky Sidebar Component */
.sidebar {
  /* Keeps the grid track context */
  height: 100%; 
}

.sidebar-sticky {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  /* Sets the gap from the top of your browser window when frozen */
  top: 20px; 
  background-color: #e7e6e6;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#sidebar { 

  margin-top: 50px; 
  margin-right: 20px; 
  margin-bottom: 30px; 
}

.logorotateright  {
	   -ms-transform: rotate(8deg); /* IE 9 */
         transform: rotate(8deg);
    }
	.logorotateleft  {
	   -ms-transform: rotate(-5deg); /* IE 9 */
         transform: rotate(-5deg);
    }


/* 4. Responsive Media Query for Mobile/Tablets (Keep your working setup!) */
@media screen and (max-width: 800px) {
  .container {
    grid-template-columns: 1fr; /* Drops the sidebar, content fills screen */
    max-width: 600px;           /* Keeps your preferred mobile width limit */
  }

  /* 2. Hides the sidebar completely */
  #sidebar, .sidebar {
    display: none;
  }



}




/*Awesome! I'm so glad that fixed the layout for you. 
CSS Grid can be tricky when mixing fixed pixel columns 
with responsive design, but changing it to 1fr is the 
cleanest way to make it snap right into place.*/