:root {
  --main-color-light: #de9eb5; /* Light slightly dark pink */
  --main-color-dark: #8B0000; /* Dark red */
  --main-color-hover: #D2B48C; /* Light tan */
  --nav-bg: #FFFFFF; /* White */
  --nav-bg-hover: #8B0000; /* Dark red */
  --vintage-text-shadow-color: rgba(139, 0, 0, 0.4); /* Dark red with transparency for shadow */
}

/*
 *  Font Imports
 */
@font-face {
  font-family: CUR;
  src: url('cur.ttf') format('truetype');
  font-weight: lighter;
}
@font-face {
  font-family: SUB;
  src: url('MAIN.otf') format('opentype');
  font-weight: normal;
}
@font-face {
  font-family: MAIN;
  src: url('birds.ttf') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: AMIGH;
  src: url('amigh.ttf') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: CIN;
  src: url('cinema\ sunday\ demo\ font\ copy.otf') format('opentype');
  font-weight: normal;
}
@font-face {
  font-family: bold;
  src: url('theboldfont.ttf') format('truetype');
  font-weight: normal;
}

/*
 *  Global Base Styles (Unified Body Block)
 */
html, body {
  overflow-x: hidden;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-image: url(mockupBG.jpg); /* Sets the primary background image for all screen sizes */
  background-color: #f0f0ef; /* Fallback color */
  padding-top: 100px; /* Provides enough space for the fixed navigation and reveals the background */
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-position: center top;
  scroll-behavior: smooth;
  background-size: cover; /* Ensures the image covers the entire viewport */
}

/*
 *  Typography and Effects
 */
p {
  font-family: CIN;
  background-color: #FFFFFF;
  font-size: larger;
  width: 95%;
  max-width: 400px;
  border-radius: 10px;
  color: #b77786;
  font-weight: 300;
  text-align: center;
  margin: auto;
  display: inline-block;
  transition: transform 0.3s ease-in-out;
  border: 2px double white;
  margin-bottom: 2%;
}

p:hover {
  transform: scale(1.2);
}

img:hover {
  transform: scale(1.03);
}

img {
  transition: transform 0.3s ease-in-out;
  /* Fix the border property by adding a style, e.g., solid or double */
  border: 5px solid #FFFFFF;
  border-radius: 10px;
  
}

h1 {
  text-align: center;
  color: #d7768d;
  background-color: #FFFFFF; /* Add a background to prevent the border from showing on the background image */
  width: 12%;
  border: 2px double #8B0000;
  margin: 0 auto;
  border-radius: 10px;

  font-family: CIN;
}

h4 {
  color: white;
  transition: color 0.4s ease;
}

h4:hover {
  color: rgb(186, 63, 113);
}

/*
 *  Navigation Styling
 */
ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  
}

nav {
  background-color: rgb(225, 181, 199);
  padding: 0;
  border-radius: 0 0 10px 10px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  box-shadow: none;
  
}

nav > ul > li > a {
  color: rgb(146, 37, 75);
  text-decoration: none;
  display: block;
  text-shadow: 1px 1px 2px rgb(255, 255, 255);
  padding: 10px;
  transition: color 0.4s ease;
  font-family: bold;
}

.about a,
.projects > a {
  font-family: bold;
}

.about a:hover,
.projects > a:hover {
  color: rgb(255, 255, 255);
  background-color: transparent;
}

.email {
  font-family: AMIGH;
}

/*
 *  Dropdown Menu
 */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background-color: rgb(236, 203, 203);
  box-shadow: 0 8px 16px 0 rgba(255, 255, 255, 0.2);
  z-index: 1;
  border-radius: 10px;
  font-family: SUB, sans-serif;
}

.dropdown-content a {
  color: rgb(133, 54, 54);
  padding: 12px 16px;
  text-align: left;
  display: block;
  margin: 5px 10px;
  text-shadow: none;
  transition: background-color 0.3s, padding 0.3s;
}

.dropdown-content a:hover {
  background-color: #975363;
  color: white;
  border-radius: 10px;
  padding: 12px 16px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/*
 *  Layout and Structure
 */
.center-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  max-width: 1500px;
  margin: 50px auto 0;
  padding: 0 20px 100px; /* Merged padding properties for conciseness */
  padding-top: 200px; /* Reduced to avoid large gaps, adjusted body padding instead */
}

.flyers {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.mocks {
  display: flex;
  flex-direction: column-reverse;
  gap: 40px;
}

.mocks .mock-one {
  order: 3;
}

.mocks .mock-three {
  order: 1;
}

.mocks .mock-two {
  order: 2;
}

.title {
  background-color: #c9a0aa;
}

/* --- Image Columns --- */
.two-column-image-wrapper {
  display: flex;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 50px auto 0;
  position: relative;
}

.Ceramics, .Clay {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.two-column-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/*
 *  Responsive adjustments for smaller screens
 */
@media (max-width: 768px) {
  .two-column-image-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .two-column-image-wrapper::after {
    display: none;
  }
  
  .Ceramics, .Clay {
    width: 90%;
  }

  nav > ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
  }

  nav > ul > li > a {
    font-size: 1.1rem;
    padding: 12px 20px;
    font-family: AMIGH;
  }

  .dropdown-content {
    position: static;
    width: 90%;
    margin: 5px 0;
  }

  .flex-wrapper {
    flex-direction: column;
    gap: 40px;
    padding-top: 150px;
  }

  .flyers, .mocks {
    gap: 30px;
  }

  /* Reset body styles in mobile to avoid conflicts */
  body {
    background-image: url(cerbg.jpg);
    background-color: #ecf0d7;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    padding-top: 70px;
  }

  .title, h1, h2, h3 {
    font-size: 1.5rem; 
  }
  
  h1 {
    text-align: center;
  }
}