@font-face {
  font-family: Futura;
  src: url(Font/Futura-Condensed.ttf);
  src: local(url(Font/Futura-Condensed.ttf));
}
:root {
  font-size: 1em;

  --btn-bg-hover: var(#dbc18c);
  --btn-bg-focus: var(#b79860);
  --btn-bg-active: var(#ffecc0);
  /* Colour Variables */
  --cream-100: var(#fffcf2);
  --cream-200: var(#fff9e5);
  --cream-300: var(#fff5d9);
  --cream-400: var(#fff2cf);
  --cream-500: var(#ffecc0);
  --cream-600: var(#dbc18c);
  --cream-700: var(#b79860);
  --cream-800: var(#93713d);
  --cream-900: var(#7a5524);
  --sienna-100: var(#fbebd3);
  --sienna-200: var(#f8d2a8);
  --sienna-300: var(#eaad79);
  --sienna-400: var(#d68855);
  --sienna-500: var(#bb5725);
  --sienna-600: var(#a03f1b);
  --sienna-700: var(#862a12);
  --sienna-800: var(#6c190b);
  --sienna-900: var(#590d07);
  --DarkChoc-100: var(#f6f2e8);
  --DarkChoc-200: var(#eee4d3);
  --DarkChoc-300: var(#cebeab);
  --DarkChoc-400: var(#9e8d7c);
  --DarkChoc-500: var(#5e4f43);
  --DarkChoc-600: var(#503d30);
  --DarkChoc-700: var(#432d21);
  --DarkChoc-800: var(#361e15);
  --DarkChoc-900: var(#2d140c);
  --MilkChoc-100: var(#fdfbf5);
  --MilkChoc-200: var(#fcf6eb);
  --MilkChoc-300: var(#f6edde);
  --MilkChoc-400: var(#eee1d1);
  --MilkChoc-500: var(#e3d1be);
  --MilkChoc-600: var(#c3a58a);
  --MilkChoc-700: var(#a37b5f);
  --MilkChoc-800: var(#83563c);
  --MilkChoc-900: var(#6c3b24);
  --DarkerChoc-100: var(#f3e4d3);
  --DarkerChoc-200: var(#e8c6aa);
  --DarkerChoc-300: var(#bc8d71);
  --DarkerChoc-400: var(#794f3c);
  --DarkerChoc-500: var(#21100b);
  --DarkerChoc-600: var(#1c0b08);
  --DarkerChoc-700: var(#170705);
  --DarkerChoc-800: var(#130303);
  --DarkerChoc-900: var(#0f0202);
}

/* 
START
These selectors apply across all pages */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

body {
  background-color: #21100b;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  font-family: Futura;
  color: #ffecc0;
  scroll-behavior: smooth;
}
@media (max-width: 500px) {
  * {
    margin: 0;
    padding: 0;
  }
  .body {
    padding: 0%;
    margin: 0%;
  }
}
body::-webkit-scrollbar {
  width: 1rem;
}

body::-webkit-scrollbar-track {
  background: #21100b;
  width: 1rem;
}

body::-webkit-scrollbar-thumb {
  background: #ffecc0;
}

h1 {
  color: #ffecc0;
  letter-spacing: -0.3px;
}
p {
  color: #ffecc0;
  letter-spacing: 0.5px;
  font-size: 1em;
}
h2,
h3,
h4,
h5 {
  letter-spacing: 4%;
}
/* END
of all site selectors */

/* --Start of NavBar styling */
.Nav-Link {
  text-decoration: none;
}
.NavBar {
  /*NavBar nav div*/
  position: sticky;
  top: 0;
  height: 80px;
  width: 100%;
  background-color: #ffecc0;
  font-size: 32px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 3rem;
  margin: 0;
  opacity: 100;
  z-index: 10;
  overflow-x: hidden;
}

/* Logo ofc */
.logo {
  padding-left: 3rem;
  padding-top: 0.5rem;
  width: fit-content;
  overflow-x: visible;
  background-color: #ffecc0;
}
#logo > {
  height: 80px;
}
.NavBarNav {
  /*NavButtons container*/
  background-color: #ffecc0;
  display: flex;

  align-items: center;
  justify-content: center;
  list-style: none;
  position: sticky;
  width: 100%;
  gap: 1rem;
  z-index: 10;
}
.NavBtn {
  background-color: var(--cream-500);

  text-align: center;
  height: fit-content;
  width: max-content;
  font-size: 12px;
  padding: 10px;
  border-radius: 8px;
  color: #21100b;
  border: #ffecc0;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}
/* Open and close btn styling for navbar */
#open-sidebar-btn {
  display: none;
  background: #ffecc0;
  border: none;
  padding: 1em;
  margin-left: auto;
  cursor: pointer;
}
#close-sidebar-btn {
  display: none;
  background: #ffecc0;
  border: none;
  padding: 1em;
  cursor: pointer;
}

/* NavBar Button animations */

.NavBtn:hover {
  background-color: #b79860;
  color: #21100b;
}

.NavBtn:focus,
.NavBtn:focus-within {
  /*
  Focus=within stops C700 being applied to whole navbar. 
  ---TO DO
  =fix pressed state*/
  background-color: #93713d; /* Cream 700 */
  color: #21100b;

  border: #21100b;
  border-width: 2px;
}

.Nav-Link {
  padding: 10px;
  text-align: center;

  font-size: 1.5em;
  color: #21100b;
}

/* --END of NavBar styling */

@media (max-width: 700px) {
  #open-sidebar-btn,
  #close-sidebar-btn {
    display: block;
  }
  #open-sidebar-btn {
    position: absolute;
    right: 1rem;
    top: 0;
    margin: 0;
    z-index: 10;
    border-radius: 8px;
  }
  .NavBar {
    position: fixed;
    top: 0%;
    right: -100%;
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;

    z-index: 19;
    border-radius: 16px;
  }
  .NavBarNav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
    gap: 0.05rem;
    height: fit-content;
  }
  .NavItem {
    width: fit-content;
    margin: 0%;
  }
  .logo {
    display: none;
  }

  .NavBtn {
    font-size: 1em;
    padding: auto;
    height: fit-content;
    width: min-content;
    margin: 0%;
  }

  /* To change sizing of navbtn container when screen gets smaller */
  .Nav-Link {
    font-size: 0.5em;
    text-align: center;
    padding: 0;
  }
}

/* START of Index css */

.HeroSection {
  width: 100vw;
  height: fit-content;
  background-repeat: no-repeat;

  background-size: 100%;
  display: table; /*This is hacky but makes the title stay in the middle*/
  height: fit-content;
  margin: 0;

  padding: 0%;
  position: relative;
  isolation: isolate;
}

/* This is to get a semi transaparent img */
.HeroSection::after {
  content: "";
  position: absolute;
  background: #21100b;
  inset: 0;
  z-index: -3;
  opacity: 0.35;
  background-image: url(../Images/PhotoshootPics/PHOTO28.JPG);
  background-position: center;
  background-color: #21100b;
  background-size: cover;
}

.Wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.HeroHeading {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: center;
  padding-top: 2rem;
}
.HeroHeading > h1,
h2 {
  font-size: 64px;
}
.subhead {
  font-size: 56pt;
  display: flex;
  justify-content: center;
}

.HeroText {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}

.HeroCTAS {
  display: flex;
  justify-content: center;
  padding-top: 32px;
  gap: 8px;
  padding-bottom: 48px;
}
/* Hero CTAs */

/*anchor tags with CTA class selector
Use for page buttons*/
.CTA {
  text-decoration: none;
  color: var(--cream-200);
}
.ProcessCTA {
  background-color: #e3d1be;
  color: #5e4f43;
  font-size: 12px;
  padding: 10px;
  border-radius: 8px;
  outline: none;
  border: none;
  font-weight: bold;
}
.ShopCTA {
  background-color: #bb5725;
  color: var(--DarkChoc-500);
  font-size: 12px;
  padding: 10px;
  border-radius: 8px;
  outline: none;
  border: none;
  font-weight: bold;
}
/* Hero CTAs animation */
/* Variables arent applying here as
 they should so had to resort 
 to hex codes */
.ShopCTA:hover {
  background-color: #862a12;
}

.ShopCTA:focus-within {
  background-color: #590d07;
}

.ProcessCTA:hover {
  background-color: #a37b5f;
}
.ProcessCTA:focus {
  background-color: #6c3b24;
}

/* About Section -Home Page */
.AboutWrapper {
  display: flex;
  flex-direction: row;

  margin-top: 2rem;
  margin-left: 3rem;
  margin-bottom: 2rem;
  gap: 3rem;
}
.AboutTop {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Text + CTA container */
.AboutContainer1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: fit-content;
  width: 30rem;
  padding-bottom: 1rem;
}
.AboutContainer1::after {
  display: contents;
}
/* Image Grid container */
.AboutContainer2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Image Wrapper */
.AboutImgs {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: center;
  gap: 1rem;
}
/* Images */
.AboutImg {
  width: 262px;
  min-height: 175px;
  max-height: 262px;
  border-radius: 32px;
}

.AboutCTA {
  display: flex;
  border-radius: 8px;
  background-color: #fcf6eb;
  font-size: 12px;
  padding: 10px;
  text-decoration: none;
  border-radius: 8px;
  outline: none;
  transition: 0.2s;
}
/* About CTA transistions */
.AboutCTA:hover {
  transition: 0.2s;
  background-color: #c3a58a;
}

.AboutCTA:focus {
  background-color: #6c3b24;
}

.AboutLink {
  text-decoration: none;
  color: #590d07;
  font-weight: bold;
}
/* About Section MQs */

@media (max-width: 1200px) {
  /* Stacks images better on small screen */
  .AboutWrapper {
    flex-direction: column;
  }
}
@media (max-width: 700px) {
  .AboutContainer2 {
    flex-direction: column;
    flex-wrap: wrap;
  }
  .AboutImgs {
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
  }
}
@media (max-width: 550px) {
  .AboutWrapper {
    flex-direction: column;
    margin: 0%;
    max-width: 80%;
    max-height: fit-content;
  }
  .AboutTop {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
  }
  .AboutContainer1 {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    align-items: center;
    justify-content: center;
  }
  .AboutContainer2 {
    flex-direction: column;
    flex-wrap: wrap;
  }
  .AboutImgs {
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
  }
}
/* END - About Section */

/* START - breakfast section - HomePage */
.Breakfast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6rem;
  flex-wrap: wrap;
  padding: 3rem;
}

.BreakfastImg {
  border-radius: 32px;
  max-width: 500px;
}
.BreakfastText {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding-bottom: 2rem;
}

.BreakfastCTA {
  display: flex;
  justify-content: flex-start;
  padding-top: 1rem;
  gap: 8px;
}
/* Add in states for CTAs */
.GalleryCTA {
  background-color: #fcf6eb;
  border-radius: 8px;
  font-size: 12px;
  padding: 10px;
  border-radius: 8px;
  outline: none;
  transition: 0.2s;
  font-weight: bold;
  color: #21100b;
  text-decoration: none;
}
.GalleryCTA:hover {
  background-color: #c3a58a;
}
.GalleryCTA:focus {
  background-color: #6c3b24;
}
@media (max-width: 1200px) {
  /* Stacks images better on small screen */
  .Breakfast {
    flex-direction: column;
    text-align: center;
  }
  .BreakfastCTA {
    justify-content: center;
  }
}

@media (max-width: 550px) {
  .Breakfast {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .BreakfastImg {
    max-width: 260px;
    align-items: center;
  }
}

/* End Brekkie section */

/* Background image 1 - appears on about section */
.Back1 {
  width: 100vw;
  display: inline-flex;
  justify-content: center;
  background-image: url(../Assets/backgrndImg1.jpg);
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  height: fit-content;
  z-index: -1;
}
/* Background image 2 - appears on shop section */

.Back2 {
  width: 100vw;
  display: inline-flex;
  justify-content: center;
  background-image: url(../Assets/BackgrndImg3.jpg);
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
}

.Back3 {
  background-image: url(../Assets/backgrndImg1.jpg);

  background-repeat: no-repeat;
  background-size: 100vw 100vh;

  width: 100vw;
  display: inline-flex;
  justify-content: center;
}
@media (max-width: 700px) {
  .Back1 {
    height: fit-content;
    width: 100%;
  }
}
/* SHop Section Wrapper */
.ShopWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}
.ShopContainer1 {
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  padding-top: 3rem;
}
.ShopText {
  display: flex;
  flex-direction: column;
  max-width: 30rem;
}

.ShopSectionCTAS {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.ShopContainer2 {
  display: flex;
  flex-direction: column;
}
.ShopImgWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 1rem;
}
.ShopImg > img {
  max-width: 307px;
  max-height: 307px;
  border-radius: 32px;
}

.ShopImg {
  display: flex;
  gap: 1rem;
}
@media (max-width: 1200px) {
  /* Stacks images better on small screen */
  .ShopWrapper {
    flex-direction: column;
  }
}
@media (max-width: 700px) {
  .ShopImg {
    flex-wrap: wrap;
    flex-direction: column;
    max-width: 80%;
  }
}

@media (max-width: 600px) {
  .ShopText {
    max-width: 280px;
  }
  .ShopImg {
    max-width: 280px;
    align-items: center;
  }
  .ShopImg > img {
    max-width: 280px;
    border-radius: 32px;
  }
}
/* END - of shop styling */

/* Start Insta Section */
.Insta {
  margin-top: 3rem;
}
.InstaHeading {
  display: flex;
  justify-content: center;
  padding-left: 32.5rem;
  text-decoration: none;
}

.InstaBody {
  display: flex;
  justify-content: center;
}

.InstaPics {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 8px 0 0 48px;
}
/* Fix img sizes here so all are aligned
possible fix could be taller imgs for first row and landscape imgs for row 2
EDIT HTML 4 that, replace img */
.InstaImgDiv {
  max-width: 360px;
  max-height: 250px;
  overflow: hidden;
}
.InstaImg {
  border-radius: 32px;
  width: 360px;
  height: 250px;
  overflow: hidden;
}

.Sustainability {
  display: flex;

  flex-wrap: wrap;
  gap: 3rem;
  padding: 3rem;
}
.SustainBlock1 {
  width: fit-content;
  display: flex;
}
.SustainImg {
  border-radius: 32px;
  max-width: 500px;
}
.SustainBlock2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.SustainText {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 30rem;
  max-width: 50rem;
  justify-content: center;
}
@media (max-width: 1200px) {
  .InstaHeading {
    text-align: center;
    padding-left: 0;
  }
  .InstaBody {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }
  .InstaPics {
    align-items: center;
  }
  /* Stacks images better on small screen */
  .Sustainability {
    flex-direction: column;
    align-items: center;
  }
  .SustainText {
    padding-top: 1rem;
    text-align: center;
    line-gap-override: 0.1rem;
  }
  .SustainImg {
    max-width: 400px;
    max-height: fit-content;
    align-items: center;
  }

  .SustainImg {
    max-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 550px) {
  .Sustainability {
    align-items: center;
  }

  .SustainText {
    max-width: 375px;
  }
  .SustainImg {
    max-width: 280px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-left: 5%;
  }
  .Insta {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .InstaHeading,
  .InstaBody {
    max-width: 280px;
  }
  .InstaImg {
    max-width: 280px;
  }
}
@media (max-width: 400px) {
  .SustainText {
    max-width: 280px;
  }
}
/* End of sustainability */
.Contact {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
}

.InstaLink {
  text-decoration: none;
  color: var(--cream-500);
}

.ContactText {
  display: flex;
  flex-direction: column;
  max-width: 20rem;
  padding-top: 20%;
}
@media (max-width: 800px) {
  .ContactText {
    margin-left: 2rem;
  }
}
@media (max-width: 400px) {
  .Back3 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .Contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin: 1rem;
  }
  .ContactText {
    margin-left: 2rem;
    text-align: center;
    max-width: 280px;
  }
}
/* END of Index Body */

/* Footer Selectors - 
apply sitewide*/
.Footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  border-top: #ffecc0;
  border-width: 3.5px;
  border-style: solid none none none;
  background-color: #0f0202;
  padding-top: 2rem;
}

.FooterBody {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 3rem;
  justify-content: center;
  gap: 3rem;
  background-color: #0f0202;
}
.FooterBio {
  display: flex;
  flex-direction: column;
  max-width: 11rem;
  max-height: fit-content;
  column-gap: 8px;
}

.Browse {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.BrowseItems {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  color: #ffecc0;

  margin: 0%;
}

.BrowseList {
  list-style: none;
  color: #ffecc0;
  text-decoration: none;
  align-self: flex-start;
  gap: 8px;
  padding-inline-start: 0%;
  letter-spacing: 1px;
  font-size: 18px;
}

.BrowseLink {
  text-decoration: none;
  color: var(--cream-500);
}

.FooterContact {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.ContactInfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ConIcon {
  width: 20px;
  height: 20px;
}
.InfoDiv {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.ContactLinks {
  display: flex;
  gap: 4px;
  list-style: none;
  text-decoration: none;
  color: var(--cream-500);
}
.CreatedBy {
  margin: 100px 0 50px 0;
  display: flex;
  flex-direction: column;
  align-self: center;
  align-items: center;
}

.Copyright {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 2rem;
}

/* END of footer selectors
These are 
applied site-wide */
@media (max-width: 950) {
  .Contact {
    margin-bottom: 4rem;
  }
}
@media screen and (max-width: 900px) {
  .ShopContainer1 {
    align-items: center;
    text-align: center;
  }

  .ContactText {
    padding-top: 5%;
  }

  .Footer {
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    align-content: center;
  }
  .FooterBio {
    display: flex;
    justify-content: center;
    text-align: center;
  }
  .FooterBody {
    flex-direction: column;
    max-width: fit-content;
    align-content: center;
    align-items: center;
    margin-left: 0%;
  }
  .Browse {
    align-content: center;
    justify-content: center;
    text-align: center;
  }
  .BrowseItems {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
  }
  .FooterContact {
    text-align: center;
  }
  .ContactInfo {
    align-items: center;
  }
  .Wrapper {
    max-width: 100%;
    text-align: center;
    align-content: center;
  }
  .AboutCTAs {
    display: flex;
    justify-content: center;
  }
  .ShopImg {
    border: 36px;
  }
  .InstaPics {
    display: flex;
    flex-direction: column;
    margin: 0;
  }
}

/* Mobile MQs */

@media (max-width: 600px) {
  .body,
  .html {
    max-width: 100%;
    overflow-x: hidden;
  }
}
@media (max-width: 400px) {
  .InfoDiv {
    display: flex;
    flex-direction: column;
    max-width: 122px;

    align-items: center;
    justify-content: center;
  }
}

.AboutWrapper > img {
  scale: 0.5;
  opacity: 0;
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range-start: cover;
  animation-range-end: contain;
}
@keyframes fade-in {
  from {
    opacity: 0;
    scale: 0.3;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}