.footer {
    background-color: #201b1b; /* Dark background color */
    color: #e8dab9; /* Light text color for contrast */
    text-align: center; /* Centers the text inside the footer */
    padding: 20px 0; /* Padding above and below the text */
    position: relative; /* Relative positioning */
    bottom: 0; /* Anchors the footer to the bottom */
    font-family: 'MyCustomFont', sans-serif; /* Use the custom font */
    padding-bottom: 10vh;
    text-decoration: none;
  }
  
  .footer ul {
    list-style-type: none; /* Removes bullet points from the list */
    padding: 0; /* Removes padding from the list */
    margin: 0 auto; /* Centers the list horizontally */
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers the items horizontally */
    max-width: 100vw;
  }
  
  .footer li {
    display: inline; /* Places links in a single line */
    margin: 0 6vw; /* Adds space between the links, adjust as needed */
    max-width: 100vw;
  }
  
  .footer a {
    color: #e8dab9; /* Sets the link color to match the text */
    text-decoration: none; /* Removes underline from links */
    max-width: 100vw;
  }
  
  .footer a:hover {
    filter: brightness(2);
    text-decoration: none;
    font-weight: bold;
    max-width: 100vw;
  }

/* Styles for all scrollbars */
::-webkit-scrollbar {
    width: 12px; /* Wider scrollbar */
    height: 12px; /* Height for horizontal scrollbars if needed */
  }
  
  /* Styles for the scrollbar track (part the thumb slides within) */
  ::-webkit-scrollbar-track {
    background: #f4f4f4; /* Light grey track */
    border-radius: 10px; /* Rounded corners on the track */
  }
  
  /* Styles for the draggable part of the scrollbar (thumb) */
  ::-webkit-scrollbar-thumb {
    background-color: #5b4b49; /* Darker brown, matching one of your darker squares */
    border-radius: 10px; /* Rounded corners on the thumb */
    border: 2px solid #f4f4f4; /* Optional: Adds a border around the thumb */
  }
  
  /* Optional: Styles for when the thumb is hovered */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #2d2525; /* Even darker shade for hover effect */
  }


  .no-scroll {
    overflow: hidden;
    height: 100%; /* Ensure the body takes the full height of the viewport */
    width: 100%;  /* Ensure the body takes the full width of the viewport */
  }

  .work-experience-banner {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    background-color: white;
  }
  
  .work-experience-banner .work-img-container {
    width: 16.6vw; /* Adjust width as needed */
    height: auto; /* Ensure a consistent height */
    overflow: hidden; /* Hide overflow to keep images within the container */
    display: flex;
    justify-content: center; /* Center images horizontally */
    align-items: center; /* Center images vertically */
  }
  
  .work-experience-banner .work-img {
    width: 100%; /* Ensure the image fills the container's width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure image covers the entire container */
  } 

/* Existing footer styles... */

@media (max-width: 768px) {
  .footer {
    font-size: 0.8rem; /* Adjust the font size as needed */
    padding: 40px 0px; /* Adjust padding for smaller screens */
  }

  .footer p {
    margin: 0 5%; /* Add some margin to keep text away from edges */
  }

  .footer ul {
    flex-direction: column; /* Stack links vertically on smaller screens */
    align-items: center; /* Center the links */
  }

  .footer li {
    margin: 5px 0; /* Add margin between the links */
  }
}



/* 
//////////////COLOUR STANDARDS//////////////

CREAM
#e8dab9

LIGHTER #f5efdd
DARKER #d2c5a6


MID BROWN
#5b4b49

LIGHTER #937a77
DARKER #4c3f3d

DARK BROWN
#2d2525

LIGHTER #382e2e
DARKER #161212

//////////////Font Standards//////////////

Title font: Title.otf
Title Size: 8.5vw

Subtitle font: subTitle.otf
Subtitle size: 5vw
Smaller: 3.5vw

Text font: playfiar display
Text size: 1.5vw


*/