/* Fonts here */
@font-face {
    font-family: 'Wild_Words_Bold_Italics';
    src: url(wild_words_bold_italics.ttf);
}

@font-face {
    font-family: 'Wild_Words_Regular';
    src: url(wild_words_regular.ttf);
}

@font-face {
    font-family: 'Wild_Words_Italics';
    src: url(wild_words_italics.ttf);
}

:root {
  --black: #000;
  --white: #fff;
  --red: #b21414;
  --dark-grey: #262626;
  --yuuko-kanoe: #F23F4F;
  --ashley-graves: #EC83C3;
  --victorique-de-blois: #E7DBB8;
}

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.uniform_page {
  background-color: var(--white);
}

.theme_uniform_styles {

    header {
      background-color: var(--black);
      background-image: linear-gradient(180deg, black, #262626);
      position: sticky;
      top: 0;
      left: 0;
      z-index: 100;
      
    };

    li {
      list-style: none;
    };

    a {
      color: var(--white);
      text-decoration: none;
    };

    .navbar {
      min-height: 85px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 24px;
    }

    .nav-menu {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 60px;
    }

    .logo {
      max-width: 180px;
    }

    .nav-link {
      transition: 0.2s ease;
    }

    .nav-link:hover {
      color: var(--red);
    }

    .hamburger {
      display: none;
      cursor: pointer;
    }

    .bar {
      display: block;
      width: 25px;
      height: 3px;
      margin: 5px auto;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      background-color: var(--white);
    }

    .nav-item {
      font-family: "Wild_Words_Regular";
    };

    .page_hero {
      background-repeat: no-repeat;
      background-size: cover;
      background-blend-mode: darken;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      background-position: center;
    };

    #footer {
      /* background-color: #161616; */
      background-image: linear-gradient(0deg, black, #262626);
      max-width: 100%;
  
      .grid_container {
        max-width: 1300px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        justify-content: center;

      };

      .footer_item_container {
        text-align: center;
      }

      .footer_item_heading {
        font-family: "Wild_Words_Bold_Italics";
        padding-bottom: 35px;
    };

    .footer_item_link {
      font-family: "Wild_Words_Regular";
      padding-bottom: 25px;
    };
      
    };


    .hero_heading {
        font-family: "Wild_Words_Bold_Italics";
        color: var(--black);
        padding: 20px;
        text-align: center;
        display: block;
    };

    .preheading {
      font-family: "Wild_Words_Bold_Italics";
    }

    .heading {
      font-family: "Wild_Words_Bold_Italics";
    }

    .paragraph {
      font-family: "Wild_Words_Regular";
      padding-bottom: 18px;
      line-height: 21px;
    }

    .subheading {
      font-family: "Wild_Words_Bold_Italics";
      padding-bottom: 28px;
      font-size: 18px;
      padding-top: 10px;
    }


    .section_content {
      padding: 70px 50px;
      max-width: 1300px;
      margin: 0 auto;
    }

    button {
      border: none;
      background-image: linear-gradient(0deg, black, #262626);
      letter-spacing: 2px;
      font-family: "Wild_Words_Bold_Italics";
      cursor: pointer;
      padding: 15px;
      color: var(--white);
      border-radius: 5px;
    }

    button:hover {
      color: var(--red);
    }

    .last_item {
      padding-bottom: 0;
    };

    .yuuko_kanoe {
        color: var(--yuuko-kanoe);
    };

    .ashley_graves {
        color: var(--ashley-graves);
    };

    .victorique_de_blois {
        color: var(--victorique-de-blois);
    };

    .yuuko-kanoe-button:hover {
      color: var(--yuuko-kanoe);
    };

    .ashley-graves-button:hover {
      color: var(--ashley-graves);
    };

    .victorique-de-blois-button:hover {
      color: var(--victorique-de-blois);
    };  

    /* Screen size adjustments here */

  @media screen and (min-width: 320px) {

    .page_hero {
      height: 400px;
    };

    button {
      font-size: 12px;
    };

    .hero_heading {
        font-size: 20px;
    };

    .heading {
      font-size: 20px;
      line-height: 30px;
      padding-bottom: 35px;
    };

    .paragraph {
      font-size: 14px;
    };

    .nav-link {
      font-size: 14px;
    };

    .footer_paragraph {
      font-size: 14px;
    };

    .preheading {
      font-size: 12px;
      padding-bottom: 15px;
    }

    #footer {
      .grid_container {
        gap: 35px;
        flex-direction: column;

        .last_footer_item {
          padding-bottom: 0;
        };

      };
    };

    .image_normal {
      max-width: 100%;
    };

};


@media screen and (min-width: 375px) {

    .hero_heading {
        font-size: 24px;
    }

    .heading {
        font-size: 20px;
    }

};

@media screen and (min-width: 425px) {

    .hero_heading {
        font-size: 28px;
    }

    .heading {
        font-size: 20px;
    }

    .image_normal {
      max-width: 370px;
    }

    button {
      font-size: 14px;
    };

};

@media screen and (min-width: 500px) {

  .image_normal {
      max-width: 420px;
    }
}

@media screen and (max-width: 766px) {
  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 85px;
    gap: 0;
    /* Remove align items if you'd prefer to center the menu nav */
    align-items: flex-start;
    flex-direction: column;
    background-color: var(--black);
    width: 100%;
    transition: 0.3s;
  }

  .nav-item {
    margin: 16px 24px;
  }

  .nav-menu.active {
    left: 0;
    background-image: linear-gradient(0deg, var(--black), var(--dark-grey));
    z-index: 21;
  }

}

@media screen and (min-width: 767px) {

    .page_hero {
        height: 500px;
    };

    .hero_heading {
        font-size: 32px;
    }

    .heading {
        font-size: 30px;
        padding-bottom: 45px;
    }

    .preheading {
      font-size: 14px;
      padding-bottom: 20px;
    }

    .paragraph {
      font-size: 16px;
    };

    .nav-link {
      font-size: 16px;
    };

    .footer_paragraph {
      font-size: 16px;
    };

    .image_normal {
      max-width: 440px;
    }

};

@media screen and (min-width: 935px) {
  #footer {
      .grid_container {

        .last_footer_item_middle {
          padding-bottom: 0;
        };
      };
    }
};


@media screen and (min-width: 1024px) {

    .page_hero {
        height: 600px;
    };

    .hero_heading {
        font-size: 42px;
    };

    .heading {
        font-size: 32px;
    };

    .image_normal {
      max-width: 490px;
    }
};

@media screen and (min-width: 1050px) {
  #footer {
      .grid_container {
        gap: 70px;

      };
    }
}


@media screen and (min-width: 1200px) {

    .page_hero {
        height: 730px;
    };

    .hero_heading {
        font-size: 46px;
    }

    .heading {
        font-size: 34px;
    }
};

@media screen and (min-width: 1600px) {

    .page_hero {
        height: 844px;
    };

    .hero_heading {
        font-size: 48px;
    }

    .heading {
        font-size: 40px;
    }
};

}