* {
    margin: 0;
}

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body {
  flex: 1;
}

main {
  flex: 1;    
}

p {
    color: black;
    font-family: 'Arial';
    padding:15px;
    margin:0px;
    font-size: 1em;
}

header {
    display:flex;
    background: #000000;
    padding-top:18px;
    align-items: center;
    flex-flow: row wrap;
    flex-direction:column;
    box-sizing:border-box;
    width: 100%;
}

h1 {
    color: gold; /* Sets the text color to gold */
}

ul, li {
    font-family: 'Arial', sans-serif; /* Apply Arial font to unordered lists and list items */
}


@media (max-width: 768px) {
    header {
        padding: 10px;
    }
}

footer {
  display:flex;
  flex-flow: column;
  justify-content: center;
  background: #4d4b4b;
  padding-top:18px;
}

footer p {
    text-align: center;
    font-size: small;
    color: white;
}

nav a:visited,
nav a:link {
    color: #fff;
    text-decoration: none;
    font-family: 'Montserrat';
    font-size: 20px;
}

nav > ul {
    display: inline;
}

nav > ul > li {
    display: inline-block;
    list-style: none;
    margin: 0 15px 10px 15px;
}

aside,
article {
    padding: 1em;
}

aside { 
    font-family: 'Codystar'; 
    font-size: 45px;
    color: #fff;
}

article {
    font-family: 'Montserrat';
    width: 100%;
}

.full-width-image {
  width: 70%;
  height: auto;
  display: block;
  margin: 20px auto 0;
  border: 3px solid #000;
  border-radius: 5px;
}

.two-column {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2rem; /* spacing between text and image */
    max-width: 1000px; /* optional: keeps layout neat */
    margin: 2rem auto; /* center horizontally */
    padding: 0 1rem;   /* add horizontal breathing room */
}

.content-left {
  flex: 2; /*makes the container flexible */
  min-width: 300px;
}

.content-left h2 {
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 1rem;
}

.content-right {
  flex: 1; /*makes the container flexible */
  display: flex;
  flex-direction: column; /*stacks images vertically*/
  gap: 1rem; /*space between images */
  justify-content: flex-end; /* aligns image to the right */
}

.content-right img {
    width: 100%; /* make the image take up the full width of its container */
    max-width: 100%; /* prevents img from growing too large */
    height: auto; /*maintains aspect ratio */
    object-fit: contain; /*ensures image maintains its original ratio*/
    flex-shrink: 0;
    margin-left: 0;
}

/* Cards */

.cards {
    list-style-type: none;
    display: flex;
    flex-flow: wrap;
    align-items:unset;
    justify-content: center;
    gap: 1.5rem;
    margin: 2em;
    padding: 0;
  }
  .card {
    display: flex;
    flex-direction: column; /*stack child elements vertically */
    justify-content: space-between;
    flex: 0 0 200px; /* card width stays the same */
    border: 1px solid #ccc;
    margin: 10px;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    padding: 1rem;
    min-height: 300px; /*optional: to give enough space for layout */
  } 

  @media (max-width: 768px) {
    .card {
        flex: 1 1 100%; /*Cards will take up full width on smaller screens */
    }
  }

  .card img {
    max-height: 60%;
    max-width: 75%;
    padding: 25px;
  }
  
  .card h3 {
    margin: 0;
    font-size: 18px;
    text-align: center;
  }
  
  .card .text {
    padding: 0;
    margin: 0;
    font-size: 15px;
  }

  .card .text a {
    margin-top: auto;
    align-self: center;
    background:grey;
    color: white;
    font-size: 13px;
    text-decoration: none;
    padding: 8px 12px;
    margin: 35%;
    border-radius: 3px;
  }

  /* Media Object */

  .media-card {
    list-style-type: none;
    display: flex;
    max-width: 75%;
    align-items: center;
    flex: 20%;
    border: 1px solid #ccc;
    margin: 10px;
    box-shadow:1px 1px 3px 0px rgba(0,0,0,0.3);
  }

  .media:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  .media {
    list-style-type: none;
    display: flex;
    align-items: flex-start;
    flex: 0 0 25%;
    border: 1px solid #ccc;
    margin: 10px;
    box-shadow: 2px 2px 4px 0px  rgba(0,0,0,0.3);
  }

  .media img {
    max-width: 100%;
    height: auto; /* better aspect ratio*/
    padding: 0;
    margin: 0;
    border-radius: 0;
  }

  .media text {
    font-size: 1em;
  }

/* Workshop Object */

.workshop-container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    height: 30vh; /* Makes sure it's centered within the full viewport height */
    padding: 20px;
    margin-top: 40px;
}

.media-card {
    width: 90%; /* Adjust to your desired card width */
    max-width: 700px; /* Limit the card's max width */
    border: 2px solid #ccc; /* Add a border for a "card" look */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for the card */
    padding: 20px;
    background-color: #fff; /* Card background color */
}

.media-card .media img {
    width: 100%; /* Make the image responsive to card size */
    border-radius: 8px; /* Optional: rounded image corners */
}

.media-card .text {
    padding-top: 15px;
}

.media-card .text p {
    margin: 0 0 0.5em 0;
    padding: 0;
    line-height: 1.4;
}

.media-card .text h3 {
    margin: 0 0 0.5em 0;
    padding: 0;
    line-height: 1.4;
}

.media-card .text a {
    color: #007bff; /* Link color */
    text-decoration: none;
    font-weight: bold;
}

.media-card .text a:hover {
    text-decoration: underline;
}

.workshop-list {
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  color: black;
  padding: 0 1em;
  margin: 1em auto;
  list-style-type: disc; /* or 'none' if you want no bullets */
  max-width: 700px; /* Optional: match width of other content cards */
}

.workshop-list li {
  margin-bottom: 0.5em; /* Add spacing between items */
  line-height: 1.5;     /* Improve readability */
}

/*About Page*/

.social-media {
    display: flex;
    justify-content: center; /* Centers the buttons horizontally */
    gap: 1rem; /* Adds space between the buttons */
    margin-top: 40px; /* Adds space above the buttons */
}

.social-button {
    padding: 10px 15px;
    text-decoration: none;
    color: white;
    font-size: 16px;
    border-radius: 50px; /* Circular buttons */
    display: inline-block;
    transition: all 0.3s ease;
}

.social-button:hover {
    transform: scale(1.1); /* Slightly enlarges the buttons when hovered */
}

/* Specific colors for each social media button */
.instagram {
    background-color: #C13584; /* Instagram purple */
}

.shoppingcart {
    background-color: #3b5998; /* Facebook blue */
}

.bluesky {
    background-color: #1DA1F2; /* Twitter blue */
}

/*Contact Page*/

/* Contact Page Styles */
body.contact main {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}

h2 {
    font-size: 24px;
    margin-bottom: 15px;    
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}

.form-container {
    margin-bottom: 40px;
    padding: 30px; /*padding inside the form container*/
    box-sizing: border-box; /*ensures padding is included in the elements total width*/
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

label {
    font-size: 1.1rem;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}

input, textarea {
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box; /* Ensure width includes padding */
}

textarea {
    resize: vertical;
}

button {
    padding: 12px;
    background-color: #0073e6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}

button:hover {
    background-color: #005bb5;
}

/* Footer (specific to the contact page) */
footer {
    background-color: #333;
    color: white;
    padding: 20px 0;
    text-align: center;
    margin-top: 40px;
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}

footer p {
    margin: 0;
}

/* Basic header styles */
header {
    text-align: center;
    margin-top: 20px; /* Adds space below the banner */
}

/* Gallery styles - adding a gallery page */

.gallery-section {
    display: flex;
    justify-content: center; /* Center the grid horizontally */
    align-items: center; /* Center the grid vertically */
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-gap: 15px; /* Space between the images */
    padding: 20px;
    width: 80%; /* Adjust the width of the gallery */
    max-width: 900px; /* Optional: to limit the width on large screens */
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps image proportions intact */
    transition: transform 0.3s ease;
}

.gallery-item img:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Responsive: Adjust grid layout for smaller screens */
@media (max-width: 768px) {
    .gallery-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
    }
}

@media (max-width: 480px) {
    .gallery-container {
        grid-template-columns: 1fr; /* 1 column on small screens */
    }
}