:root 
{
   --background-color   : #444;
   --text-color         : #ccc;
   --accent-background  : #add8e6;   
   --accent-foreground  : black;
   --overlay-background : rgba(0, 0, 0, 0.7);   /* Semi-transparent black background */
}

[data-theme="dark"]
{
   --background-color   : #eee;
   --text-color         : #333;
   --accent-background  : #1E73BE;
   --accent-foreground  : white;
   /*--overlay-background : rgba(30, 115, 190, 0.5);   /* Semi-transparent black background */
}

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

html 
{
   height               :  100vh; /* Full height of the viewport */
}

body 
{
   height               :   100vh;               /* Full height of the viewport */
   /*border-top           :   solid 1px var(--accent-background);*/
   background-color     :   var(--background-color); 
   display              :  flex;          /* Center content horizontally => necessary if children don't take up full width */
   justify-content      :  center;              /* Center content horizontally */
   font-family          :   Arial, sans-serif;    
   flex-direction       :   column; /* Stack children vertically */    
}

/* General class to be used on any element of fixed-width, centered in the page */
.fix-width
{
   max-width            :  1232px;
   margin               :  0 auto;
   padding-left         :  8px;
   padding-right        :  8px;
}
@media (min-width: 1024px) 
{
   .fix-width 
   {
      padding-left      :  16px;
      padding-right     :  16px;
      }
 }


/* Full width horizontal bar used as header and footer */
.horizontal-bar {
   background-color     :  var(--accent-background);  
   color                :  var(--accent-foreground);
   width                :  100%;
}

.header-content
{ 
   flex-shrink          :  0; /* Prevent shrinking */
   font-size            :  28px;
   font-family          :  Georgia; 
   font-style           :  italic   ;
   display              :  flex;                   /* Enable Flexbox on the container */
   justify-content      :  space-between;  /* Distribute space between left and right */
   align-items          :  center;             /* Vertically align items in the center (optional) */
   padding              :  6px 8px 6px 8px;
 }
@media (min-width: 1024px) 
{
   .header-content 
   {
      font-size         :  48px;
      padding           :  12px 16px 12px 16px;
   }
 }
    
 
.header-left 
{
   /* No additional styling needed for left-aligned part */
   margin: 0;
   padding: 0;
}
 
.header-right 
{
   /* No additional styling needed for right-aligned part */
}

.content 
{
   flex                 :  1;          /* Grow to take up remaining space */
   overflow             :  hidden;
   overflow-y           :  scroll;     /* Make content scrollable */
   padding-top          :  24px;
   padding-bottom       :  16px;
   scrollbar-width      :  none;        /* Hides scrollbar */
   -ms-overflow-style   :  none;        /* IE 10+ */
}

.content::-webkit-scrollbar 
{
   display              : none;        /* Completely hides the scrollbar */
}

.content-photo
{
   flex                 :  1;          /* Grow to take up remaining space */
   overflow             :  hidden;
   overflow-y           :  none;    /*scroll;     /* Make content scrollable */
   display              :  flex;
   flex-direction       :  column;     /* Arrange children vertically */
   height               :  100vh;      /* Full viewport height */
   padding-top          :  24px;
   padding-bottom       :  16px;
   background-color     :  var(--background-color);
}

/*-----------------------------------------------------------------------------------------------*/
.logo-pgx 
{
   width                : auto;     /* Set width in pixels */
   height               : 24px;     /* Maintain aspect ratio */
}

.logo-skippies 
{
   width                : auto;     /* Set width in pixels */
   height               : 72px;     /* Maintain aspect ratio */
}

.title
{
   color                : var(--text-color);
   font-size            :  24px;   
   font-family          :  Georgia; 
   font-weight          :  normal;
   padding-bottom       :  8px;
}

@media (min-width: 1024px) 
{
   .title 
   {
      font-size         : 36px;
   }
 }

.subtitle
{
  /*width: 48px; /* Fixed width */
   /*background-color: lightblue; */
   color:         var(--text-color);
   font-size:     14px;   
   font-weight:   normal;
   padding:       0px 0px 8px 16px;  
   margin-bottom: 16px;   
}

.albumhead {
   display:          flex;          /* Use Flexbox for the container */
   justify-content:  space-between;  /* Distribute space between items */
   width:            100%;            /* Ensure container takes full width */
}

.path
{
   margin-top:4px;
   color: #999; /*lightblue;  */
   font-size: 18px;   
   font-weight: normal;
   padding: 0px 0px 8px 16px;  
   margin-bottom:16px;
}


.season 
{
   /*display: flex; /* Use Flexbox */
   width: 100%; /* Ensure the row spans the viewport */
   margin: 0px 0px 36px 0px;
}

.season-albums 
{
   /* Container div for thumb images of one season */
   flex:             1; /* Takes up the remaining space */
   justify-content: center;   /* Doesn't do anythin */
}

.thumb 
{
   position          :  relative;     /* Enables positioning of overlay */
   display           :  inline-block;  /* Prevents inline spacing issues */
   margin            :  4px;
   max-width         :  392px;       /* Otherwise the thumb will use the available width */
   aspect-ratio      :  16 / 9;   /* We want our thumbs to be 16/9 */   
   overflow          :  hidden;       /* Crop, not stretch, images not fitting the 16/9 (also: object-fit on the image) */

}
.thumb img 
{
   max-width         :  100%;           /* Images don't automatically follow their parents width! This fixes it. */
   object-fit        :  cover;      /* Ensures the image fills the box while maintaining aspect ratio */
}
.thumb-overlay 
{
   position          :      absolute;     /* Position relative to the container */
   bottom            :        0px;              /* Align text at the bottom */
   left              :          0;                /* Start from the left */
   width             :         100%; /* Full width of the container */
   background        :  var(--overlay-background);
   padding           :       8px 0px 8px 10px; /* Optional: Add padding for readability */
}
.thumb-overlay-title 
{
   color          :     #ccc; /* Text color */
   font-size      :     16px; /* Adjust font size */
   margin-bottom  :     4px;
}
@media (min-width : 1024px) 
{
   .thumb-overlay-title 
   {
     font-size    :    20px;
   }
 }

.thumb-overlay-extra 
{
   color: #aaa; /* Text color */
   font-size: 12px; /* Adjust font size */

}

.button-text 
{
   display           :  inline-block; /* Makes it behave like a button */
   padding           :  6px 12px; /* Adds spacing around the text */
   background-color  :  var(--accent-background); 
   color             :  var(--accent-foreground); 
   font-size         :  12px; /* Adjust font size */
   font-weight       :  bold; /* Make text bold */
   border-radius     :  5px; /* Rounded corners */
   cursor            :  pointer; /* Shows hand cursor to indicate clickability */
   text-align        :  center; /* Centers text */
   text-decoration   :  none; /* Removes underline */
   transition        :  background-color 0.3s ease; /* Smooth hover effect */
   margin-top        :  4px;
   margin-left       :  16px; 
 }

  /* Margin for widths larger than 1024px */
  @media (min-width: 1024px) {
   .button-text {
      font-size: 16px;
      padding           : 10px 20px; /* Adds spacing around the text */
      margin-top:6px;
      margin-left:16px; 
  
     }
 }

 .theme-toggle {
   background: none;
   border: none;
   font-size: 24px;
   cursor: pointer;
}