/*
 *  Global Resets & Styling
 *  Defines reusable custom properties (variables) and smooth-scrolling baseline.
 */
: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 */
  --nav-bg-pink-darker: rgb(225, 181, 199); /* Nav background color */
  --link-color-default: #af4466; /* Improved, darker link color for better contrast */
  --text-color-paragraph: #723440; /* Improved, darker paragraph text color for better contrast */
  --dropdown-bg: rgb(247, 198, 210); /* Dropdown background */
  --dropdown-link-color: #8B0000; /* Dropdown link color (reusing existing dark red) */
}

/*
 *  Font Imports (Assuming these files are locally available)
 */
@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('opentype');
  font-weight: normal;
}
@font-face {
  font-family: CIN;
  src: url('cinema sunday demo font.otf') format('opentype');
  font-weight: normal;
}
@font-face {
  font-family: bold;
  src: url('theboldfont.ttf') format('opentype');
  font-weight: normal;
}

html, body {
  overflow-x: hidden; /* Prevents horizontal scroll */
}

body {
  margin: 0;
  padding-top: 60px; /* Provides space for the fixed navigation */
  scroll-behavior: smooth;

  /* Use shorthand for background properties for cleaner code */
  background: #ecf0d7 url(mockupBG.jpg) no-repeat fixed center;
  background-size: 90%;
  background-position: center 50px;
}

/*
 *  General list and navigation styling
 */
ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0px;
  font-family: bold;
}
/*
 *  Nav bar styling
 */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  
  padding: 0px;
  margin-top: 0;
  border-radius: 10px;
  
  background-color: var(--nav-bg-pink-darker);
  font-family: bold, sans-serif;
}

/*
 *  Styling for all main navigation links (Improved Contrast)
 */
nav > ul > li > a {
  display: block;
  padding: 10px;
  font-family: bold, sans-serif;
  text-decoration: none; /* Removed 'wavy' for cleaner look, can re-add if needed */
  
  /* Use improved link color variable */
  color: var(--link-color-default); 
  text-shadow: 1px 1px 2px rgb(255, 255, 255);
}

/*
 *  Hover effect for specific links ("About me!" and "Projects")
 */
.about a,
.projects > a {
  transition: color 0.4s ease; /* Add transition for smooth color change */
  font-family: bold, sans-serif;
}

.about a:hover,
.projects > a:hover {
  color: rgb(255, 255, 255); /* Apply hover color */
  background-color: transparent; /* Ensure no background color on hover */
}

/*
 *  Dropdown parent container
 */
.dropdown {
  position: relative;
}

/*
 *  Dropdown menu content initially hidden
 */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(255, 255, 255, 0.2);
  z-index: 1;
  border-radius: 10px;
  font-family: bold, sans-serif;

  background-color: var(--dropdown-bg); /* Use variable */
}

/*
 *  Dropdown link styling (Improved Contrast)
 */
.dropdown-content a {
  display: block; /* Ensure the link fills its container horizontally */
  padding: 12px 16px; /* Use padding for internal spacing and consistent hover size */
  margin: 5px 10px; /* Add margin to create space for the hover effect */
  text-align: left;
  text-shadow: none; /* Remove text shadow for dropdown links */
  transition: background-color 0.3s, padding 0.3s; /* Smooth transition */
  font-family: bold, sans-serif;

  color: var(--dropdown-link-color); /* Use improved link color variable */
}

/*
 *  Dropdown link hover effect
 */
.dropdown-content a:hover {
  background-color: #943d57;
  color: white;
  border-radius: 10px;
  /* Keep padding consistent on hover */
  padding: 12px 16px;
}

/*
 *  Show the dropdown menu on hover
 */
.dropdown:hover .dropdown-content {
  display: block;
}

/*
 *  Styling for h4 elements
 */
h4 {
  color: white;
  transition: color 0.4s ease;
}
h4:hover{
color: rgb(186, 63, 113);
}

/*
 *  New CSS for positioning specific list items
 */
.about a,
.projects a {
  padding-top: 20px; /* Adjust this value as needed to push the links down */
  font-family: bold;
}

.email {
  display: flex;
  align-items: center;
}

.email a {
  font-family: AMIGH, sans-serif; /* Apply the AMIGH font to the link */
  color: white;
  text-decoration: none;
  transition: color 0.4s ease;
}


/*
 *  Video background (Note: Video file "video.mp4" must exist)
 */
#myVideo {
  position: fixed;
  right: 3;
  bottom: 25;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  object-fit: cover;
  transform: scale(1.05);
}

/*
 *  Wrapper for centered content
 */
.center-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*
 *  Flexbox wrappers for content
 */
.flex-wrapper {
  display: flex;
  justify-content: space-around; /* Use space-around for balanced spacing */
  align-items: center; /* Vertically align items in the center */
  width: 100%;
  max-width: 1500px; /* Increase max-width to allow space for three columns */
  margin: 50px auto 0; /* Add top margin and center */
  padding: 0 20px;
  padding-bottom: 100px;
  padding-top: 400px;
}

.flyers {
  display: flex;
  flex-direction: column;
 
}

.flyer-descriptions {
  display: flex;
  flex-direction: column;
  gap: 600px; /* Adjust this value to align paragraphs with images */
  align-items:flex-start;
  opacity: 0.8;
}

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

/* Update the p styles to fit the new layout (Improved Contrast) */
p {
  width: 95%; /* Adjust width to fit within the column */
  max-width: 400px; /* Limit the max width for better readability */
  margin: auto;
  gap: 100px;

  /* Typography */
  font-family: CIN;
  font-size: larger;
  font-weight: 300;
  text-align: center;
  color: var(--text-color-paragraph); /* Use improved color variable */

  /* Box model & Visuals */
  background-color: #FFFFFF;
  border-radius: 10px;
  border: 2px double white; /* Corrected line */
  display: inline-block; /* Ensure transform works correctly on all screens */
  transition: transform 0.3s ease-in-out; /* Add transition for a smooth animation */
}

/* Move the p:hover rule out of the mobile media query so it applies globally */
p:hover{
  transform: scale(1.2);
}

.mocks {
    display: flex; /* Required for the 'order' property to function */
    /* You may also want to add flex-wrap: wrap; and a gap property for better layout control */
    gap: 10px; 
    border-radius: 60px;
}

.mocks .mock-one {
    order: 6; /* This will make the first mock appear third */
    border-radius: 60px;
}

.mocks .mock-three {
    order: 4; /* This will make the third mock appear first */
    border-radius: 60px;
}

.mocks .mock-two {
    order: 5; /* This will make the second mock appear second */
     background-color: #c3ffc6;
    border-radius: 60px;
}

.mocks .mock-4 {
    order: 3; /* This will make the fourth mock appear fourth */
       border-radius: 60px;
}

/* Added CSS for the fifth image using the correct class name */
.mocks .mock-5 { 
    order: 2; /* This will make the fifth mock appear fifth */
    border-radius: 60px;
}
.mocks .mock-four { 
    order: 2; /* This will make the fifth mock appear fifth */
    border-radius: 60px;
}


h1 {
  text-align: center;
  margin: 0 auto;
  margin-top: 10%;
  width: 15%;

  font-family: CIN, sans-serif; /* Use CIN font */
  color: rgb(77, 103, 75);
  background-color: rgb(162, 185, 166);
  border-radius: 10px;
  border:7px, white, double;
}

.title {
  background-color: #c9a0aa;
}

/*
 *  Mobile-specific adjustments
 */
@media (max-width: 768px) {
  body {
    padding-top: 120px; /* Adjusted padding to prevent content overlap */
    background-size: cover; /* Ensures the background covers the whole screen on mobile */
    background-position: center; /* Centers the background image */
  }

  /* Adjust navigation for small screens */
  nav {
    border-radius: 0; /* Remove border-radius on mobile for full-width nav */
  }
  nav > ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }
  nav > ul > li {
    flex-grow: 1;
    text-align: center;
    width: 50%; /* Arrange links into two columns */
  }
  nav > ul > li > a {
    padding: 10px 5px;
    font-size: 0.9rem;
  }
  .dropdown {
    width: 100%;
  }
  .dropdown-content {
    min-width: 100%;
    left: 0;
    text-align: center;
  }
  .email a {
      color: white; /* Added missing closing style from original code */
  }
}