* {
  box-sizing: border-box;
}
/* Keeps images within browser size */
img {
  max-width: 100%;
}
body {
  margin: 0;
  overflow-x: hidden;
  /* background-color: #fffff5; */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='16' height='16' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform=''%3E%3Crect width='100%25' height='100%25' fill='rgba(255, 255, 245,1)'/%3E%3Ccircle cx='23.09' cy='29.51' r='1' stroke-width='0' fill='rgba(255, 255, 245,1)' filter='url(%23filter-doodad-1)'/%3E%3Ccircle cx='11.91' cy='14.12' r='1' stroke-width='0' fill='rgba(255, 255, 245,1)' filter='url(%23filter-doodad-1)'/%3E%3Ccircle cx='30' cy='20' r='1' stroke-width='0' fill='rgba(255, 255, 245,1)' filter='url(%23filter-doodad-1)'/%3E%3Ccircle cx='30' cy='20' r='1' stroke-width='0' fill='rgba(45, 55, 72,1)' filter='url(%23filter-doodad-2)'/%3E%3Ccircle cx='11.91' cy='25.88' r='1' stroke-width='0' fill='rgba(45, 55, 72,1)' filter='url(%23filter-doodad-2)'/%3E%3Ccircle cx='23.09' cy='10.49' r='1' stroke-width='0' fill='rgba(45, 55, 72,1)' filter='url(%23filter-doodad-2)'/%3E%3C/pattern%3E%3Cfilter id='filter-doodad-1'%3E%3CfeTurbulence baseFrequency='2' numOctaves='2' type='fractalNoise' result='result1'/%3E%3CfeDisplacementMap in2='result1' scale='5' result='result2' xChannelSelector='R' in='SourceGraphic'/%3E%3CfeComposite in2='result2' in='SourceGraphic' operator='atop' result='fbSourceGraphic'/%3E%3C/filter%3E%3Cfilter id='filter-doodad-2'%3E%3CfeTurbulence baseFrequency='1.3' numOctaves='2' type='fractalNoise' result='result1'/%3E%3CfeDisplacementMap in2='result1' scale='12' result='result2' xChannelSelector='R' in='SourceGraphic'/%3E%3CfeComposite in2='result2' in='SourceGraphic' operator='atop' result='fbSourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
  background-size: cover;
}

html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: black;
}

/* Importing Comico Font */
@font-face {
  font-family: "Comico";
  src: url(media/new-media/new-fonts/Comico_Complete/Fonts/OTF/Comico-Regular.otf);
}

/* Importing Zodiak Font */
@font-face {
  font-family: "Zodiak";
  src: url(media/new-media/new-fonts/Zodiak_Complete/Fonts/TTF/Zodiak-Variable.ttf);
}

/* Applying Comico font to all headers */
h1,
h2,
h3,
h4 {
  font-family: "Comico";
}

p {
  font-family: "Zodiak";
}

/**** 
          HOME PAGE 
  ****/

/* NAME + LINKS */
.navigation-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 1rem;
  top: 0;
}

/* Intro blurb */
.navigation-container p {
  padding: 10px 15px;
  margin-top: -1rem;
  font-family: "Zodiak";
  width: 100%;
}

/* Nav Links Container */
.nav-general {
  width: 40%;
  margin-top: 1rem;
}

/* ONLY LINKS */
.nav-item {
  font-family: "Zodiak";
  text-decoration: none;
  font-weight: 400;
  color: black;
  padding: 10px 15px;
  font-size: 17px;
  width: 100%;
}

.nav-item:hover {
  font-weight: 600;
}

/* NAME ONLY */
.anna-rizvi {
  width: 200px;
  margin-left: -0.5rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

/* DEFAULT TREE */
.tree {
  height: 900px;
  width: auto;
  display: flex;
  /* Use a small, positive margin-top for a consistent start */
  margin: 3rem auto;
  object-fit: contain;
}

/* --- MOBILE NAVIGATION STYLES --- */

/* In-Place Mobile Menu Wrapper */
.mobile-menu-wrapper {
  /* Initially hide the menu */
  display: none;
  padding: 0 2rem 2rem;
  position: absolute;
  top: 6.9rem;
  left: 0;
  width: 100%;
  background-color: #fffff5;
  border-bottom: 1.5px solid black;
  z-index: 500;
}

/* This class is added by JavaScript to show the menu (In-Place Expansion) */
.mobile-menu-wrapper.is-open {
  display: block;
}

.mobile-nav-item:hover {
  font-weight: bold;
}

/* Remove the margin on window-container so it stays in place */
.tree-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Close Icon (Fixed at the top right) - Keep the position fixed */
.close-icon {
  position: fixed;
  right: 2rem;
  top: 2.2rem;
  font-size: 24px;
  color: black;
  z-index: 1000;
  cursor: pointer;
  display: none;
}

/* Main Navigation Items (Web, Social, 35mm, About) */
.mobile-nav-item {
  font-family: "Zodiak";
  font-size: 20px;
  display: block;
  text-decoration: none;
  color: black;
  line-height: 2;
}

/* Social Icons */
.social-icons {
  margin-top: 2rem;
  font-size: 22px;
}
.social-icons i {
  margin-right: 15px;
}

#main-icons {
  padding: 10px 15px;
  margin-top: 0.5rem;
}

/* Styling the dot menu container */
.open-icon {
  /* Use flexbox to center and align the dots vertically */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 24px; /* Total height of the icon */
  width: 24px; /* Total width of the icon */
  line-height: 1.5;

  /* Position */
  position: fixed;
  right: 2rem;
  top: 2.2rem;
  z-index: 999;
  display: none; /* Default: Hide on desktop */
}

/* Styling each individual dot */
.dot-line {
  display: block;
  width: 5px; /* Size of the dot */
  height: 5px;
  background-color: #000;
  border-radius: 50%; /* Makes it a circle (dot) */
}
/* Handwritten Note */
.handwritten-note {
  position: fixed;
  bottom: 5rem;
  right: 2rem;
  text-align: justify;
  width: 20%;
  line-height: 1.4;
}

.about-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 2rem;
}

/* ABOUT PAGE */
#about-graphic {
  height: 750px;
}

/****
          MEDIA QUERIES
  *****/

/* Styles for screens LARGER than 1250px (Enlarged Desktop View) */
@media (min-width: 1250px) {
  .tree {
    margin: -2rem auto;
    /* background-color: lightblue; */
  }
}

/* Styles below 1250px */
@media (max-width: 1250px) {
  .tree {
    margin: -3rem auto;
    /* background-color: rgb(173, 230, 177); */
  }
}

/* Styles below 1000px */
@media (max-width: 1000px) {
  /* body {
    background-color: lightblue;
  } */
  .tree {
    height: 800px;
    margin: 0rem auto;
  }
}

/* Styles below 950px */
@media (max-width: 950px) {
  /* body {
    background-color: lightblue;
  } */
  .tree {
    height: 790px;
    margin: 1rem 6rem;
  }
  .nav-general {
    /* background-color: lightblue; */
    margin-top: 3rem;
    width: 45%;
  }
}

/* Styles below 950px */
@media (max-width: 850px) {
  /* body {
      background-color: lightblue;
    } */
  .tree {
    height: 740px;
    margin: 3rem 6rem;
    /* background-color: rgb(184, 230, 173); */
  }
  .handwritten-note {
    display: none;
  }
}
@media (max-width: 750px) {
  .tree {
    height: 720px;
    margin: 8rem auto;
    /* background-color: rgb(230, 173, 207); */
  }
}

/* Styles for screens LARGER than 650px (Desktop View) */
@media (min-width: 651px) {
  /* Ensure all mobile elements are HIDDEN on desktop */
  .mobile-menu-wrapper,
  .open-icon,
  .close-icon {
    display: none !important;
  }

  /* Ensure desktop navigation links are VISIBLE */
  .nav-item {
    display: block;
  }
}

/* Styles for screens smaller than 650px (Mobile View) */
@media (max-width: 651px) {
  body {
    background: #fffff5;
  }
  /* Hides desktop navigation links */
  .nav-item {
    display: none;
  }
  .intro {
    display: none;
  }
  #main-icons {
    display: none;
  }
  /* Shows the dot menu icon (overrides the default 'display: none') */
  .open-icon {
    display: flex;
  }
  .navigation-container {
    flex-direction: column;
    /* width: auto; */

    justify-content: flex-start;
    /* Ensure the fixed name is always on top */
    z-index: 1001;
  }
  /* Places Mobile Nav Menu above intro text & everything else */
  .mobile-menu-wrapper {
    z-index: 2000;
  }
  .anna-rizvi {
    width: 250px;
    margin-left: -1.5rem;
  }

  .navigation-container p {
    font-size: larger;
  }
  .tree {
    height: 700px;
    max-width: 100%;
    margin: 10rem auto;
    /* background-color: lightgreen; */
  }
}

@media (max-width: 450px) {
  .tree {
    top: 55%;
    height: 500px;
    width: auto;
  }
}