/* EASY-TO-ADJUST SETTINGS */
:root {
    --max-page-width:      1000px;
    --leftbar-width:       240px;
    --rightbar-width:      190px;
    --content-gap:         20px;
    --topbar-bottom-space: 20px;
    --wrapper-side-padding: 20px;
    --bborder-width:  5px;

    --body-bg:             #47545D;
    --panel-bg:            #828776;
    --content-bg:          #BABBAE;
    --text-color:          #000000;
    --link-color:          #000000;
    --heading-color:       #000000;
    --topbar-text:         #000000;
}

/* Headings – serif */
h1, h2, h3 {
    font-family: Times, serif;
    font-weight: 700;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
}

#topbar h1 {
    font-family: Times, serif;
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Base */
html { font-size: 90%; }

body {
    margin: 0;
    padding-top: 80px;
    background-color: var(--body-bg);
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text-color);
}

.main-wrapper {
    max-width: var(--max-page-width);
    margin: 0 auto;
    padding: 0 var(--wrapper-side-padding);
}

#topbar {
    width: 100%;
    background: #828776;
    color: black;
    padding: 10px;
    padding-top: 10px;
    text-align: center;
    margin-bottom: var(--topbar-bottom-space);
    box-sizing: border-box;
    box-shadow: 0 var(--bborder-width) 12px rgba(0,0,0,0.4);  /* Optional: subtle lift */
    border: 4px solid;
    border-color: #c5cbbd #2b2d27 #2b2d27 #c5cbbd;
   /* border-radius: 4px; */
}

/* THREE-COLUMN LAYOUT – must be row */
.columns-wrapper {
    display: flex;
    flex-direction: row;          /* ← this is critical – horizontal columns */
    width: 100%;
    gap: var(--content-gap);
}

/* Sidebars – fixed width, internal stacking */
#leftbar,
#rightbar {
    flex: 0 0 var(--leftbar-width);     /* rightbar uses its own var below */
    background: transparent;            /* ← important: parent transparent so child backgrounds show clearly */
    padding: 0;                         /* remove parent padding – let children handle it */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;                          /* bigger gap = clearer separation between blocks */
    overflow: visible !important;
    overflow-x: visible;
    overflow-y: auto;               /* keep vertical scrolling if needed */
}

#rightbar {
    flex: 0 0 var(--rightbar-width);
    background: transparent;
    padding: 0;
    max-width: 190px;
}

#leftbarmenu,
#rightbartop {
    background: #828776;
    border: var(--bborder-width) solid;
    border-color: #c5cbbd #2b2d27 #2b2d27 #c5cbbd;
    padding-top: 80px;              /* ← makes space for the overhanging GIF */
    position: relative;             /* ← crucial: becomes containing block for absolute GIF */
    overflow: visible;              /* allows the GIF to overflow upward */
}

/* Blocks inside sidebars get the same look */
#leftbarmenu,
#rightbartop,
.socials-section {
    background: #828776;
    border: var(--bborder-width) solid;
    border-color:
        #c5cbbd    /* top */
        #2b2d27    /* right */
        #2b2d27    /* bottom */
        #c5cbbd;   /* left */
    padding: 10px;                     /* ← this creates space inside so content doesn't touch border */
  /*  border-radius: 4px;  */
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);  /* Optional: subtle lift */
    
}

/* Socials tweaks */
.socials-section {
    text-align: left;
    padding: 24px 20px; 
}

.socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Main content */
#content {
    flex: 1 1 auto;
    background: var(--content-bg);
    padding: 20px;
    min-width: 0;
    border-style: solid;
    border-width: var(--bborder-width);
    border-color: white #2b2d27 #2b2d27 white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);  /* Optional: subtle lift */
}


.top-gif {
  display: block;
  margin: -55px auto 35px;          /* ← increased bottom from 20px to 60px (or more) */
  width: 400px;
  max-width: 100%;
  height: 100px;
}

.foxgif {
  display: block;
  margin: -140px auto 60px;        /* ← increased bottom to 100px – tune this */
  width: 500px;
  max-width: 100%;
  height: 250px;
}

/* Lists & links */
#leftbar ul,
#rightbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Make sure the menu list doesn't hug the top */
#leftbarmenu ul {
    margin-top: 16px;                  /* space after the GIF */
}


#leftbar a,
#rightbar a {
    color: #0c0e10;
    text-decoration: none;
    display: block;
    padding: 8px;
    padding-left: 20px;
}

/* Make the menu list look like nice buttons */
#leftbarmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#leftbarmenu li {
  display: flex;
  align-items: center;              /* vertical center GIF + text */
  gap: 2px;                        /* space between gif and text */
  margin-bottom: 35px;              /* space between buttons */
  padding: 4px 8px;               /* inner padding */
  
  background: #828776;              /* same as panels */
  transition: all 0.12s ease;       /* tiny hover effect */
}

#leftbarmenu li:hover {             /* lighter on hover – optional */
  transform: translateY(-2px);      /* subtle lift */
}

/* Style the small GIFs inside buttons */
#leftbarmenu li img {
  width: 50px;
  height: 50px;
  object-fit: contain;              /* keeps aspect ratio, no stretching */
  flex-shrink: 0;                   /* don't let it shrink */
}

/* Make links fill the button nicely */
#leftbarmenu li a {
  color: #000;
  text-decoration: underline;
  flex: 1;                          /* text takes remaining space */
  display: block;
}


/* Hover: white text + underline + optional bold */
#leftbarmenu li:hover a {
  color: white;
  text-decoration: underline; 
  font-weight: bold;/* classic hover underline */
  /* font-weight: bold; */              /* uncomment if you want bold too */
}

/* Optional: center h2 text inside button if you want */
#leftbarmenu li h2 {
  margin: 0;
  font-size: 1.6rem;                /* adjust size */
}


/* Loose images inside sidebars get shadow */
#leftbar > img,
#rightbar > img {
  display: block;              
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);   /* stronger/lifted retro feel */
}

.socials img {
    border: 3px solid #000;
    image-rendering: pixelated;
    margin: 0 2px 10px 0;
    vertical-align: middle;
}

.floating-gif {
  position: fixed;             /* Stays in viewport, ignores scroll */
  bottom: 20px;                /* Distance from bottom edge */
  right: 20px;                 /* Distance from right edge – this is your padding */
  z-index: 999;                /* Stays on top of other content */
  pointer-events: none;        /* Optional: clicks go through to content behind it */
}

.floating-gif img {
  /* width: 120px;                /* Adjust size to taste – keep small for corner feel */
  height: auto;
  max-width: 100%;
  display: block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);  /* Optional: subtle lift */
}

.footer-spacer {
  height: 120px;                 /* empty space size – adjust freely */
  /* or min-height: 120px; if you might put content there later */
}