.base__background {
  z-index: -1;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #f7f1e7;
}
.left__margin,
.right__margin {
  opacity: 25%;
}
.left__margin {
  z-index: 1;
  position: absolute;
  background-color: red;
  width: 300px;
  height: 100%;
}
.right__margin {
  z-index: 1;
  position: absolute;
  background-color: red;
  width: 300px;
  height: 100%;
  right: 0;
}
.right__centerGuide {
  z-index: 1;
  position: absolute;
  background-color: blue;
  width: 653px;
  height: 100%;
  top: 0;
  right: 300px;
  opacity: 25%;
}
.left__centerGuide {
  z-index: 1;
  position: absolute;
  background-color: green;
  width: 653px;
  height: 100%;
  top: 0;
  left: 300px;
  opacity: 25%;
}
.background__frame {
  z-index: 0;
  position: absolute;
  width: 100%;
  height: 5000px;
  overflow: hidden;
  margin: 0;
}
/* ----------------------------------------------------------ELLIPSE DECOR */
.blurred__ellipse {
  z-index: 1;
  position: absolute;
  top: 179px;
  left: -280px;
  width: 804px;
  height: 804px;
  border-radius: 50%;
  opacity: 25%;
  background-color: #b5baa5;
  filter: blur(150px);
}
.blurred__ellipse2 {
  z-index: 1;
  position: absolute;
  top: 80px;
  right: 0px;
  width: 804px;
  height: 804px;
  border-radius: 50%;
  background-color: #eddfc8;
  filter: blur(150px);
}

/* ------------------------------------------------------STATIC NAV SECTION */
.nav__section {
  z-index: 2;
  position: relative;
  top: 0;
  right: 0;
  width: 100%;
  height: 150px;
  opacity: 100%;
  background-color: #9ba58d;
}

@font-face {
  font-family: "Italianno";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/italianno/v18/dg4n_p3sv6gCJkwzT6RXiJwo.woff2")
    format("woff2");
}
@font-face {
  font-family: "Han Nari";
  font-style: normal;
  font-weight: 400;
  src:
    local("Han Nari"),
    url("https://fonts.cdnfonts.com/s/112248/Han Nari.woff") format("woff");
}
@font-face {
  font-family: "Imprima";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/imprima/v19/VEMxRoN7sY3yuy-7yoKNyQ.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@import url("https://fonts.googleapis.com/css2?family=Italianno&display=swap");
@import url("https://fonts.cdnfonts.com/css/han-nari");
@import url("https://fonts.googleapis.com/css2?family=Imprima&display=swap");

/* -----------------------------------------------------------------HEADER */
.nav__headerText,
.nav__subHeader {
  z-index: 1000;
  position: relative;
  display: flex;
  font-family: "Italianno", cursive;
  font-weight: 400;
  font-style: normal;
  color: white;
}
.nav__headerText {
  font-size: 70px;
  letter-spacing: 7%;
  margin: 0;
}
.nav__subHeader {
  font-size: 35px;
  margin-top: -20px;
  letter-spacing: 10%;
}
.nav__textGroup {
  position: absolute;
  top: 32px;
  left: 300px;
}
/* -----------------------------------------------FLOATING NAV BAR SECTION */
.floating__navBar {
  position: sticky;
  display: flex;
  width: 100%;
  gap: 1px;
  top: 0px;
  margin: 0;
  /* background-color: red; */
  /* opacity: 50%; */
  background-color: #9ba58d;
  z-index: 1000;
}
.button__home,
.button__aboutUs,
.button__fav,
.button__contacts {
  position: absolute;
  margin: 0;
  left: 960px;
  font-family: "Imprima";
  font-size: 20px;
  position: relative;
  padding: 10px;
  padding-bottom: 25px;
  padding-left: 45px;
  padding-right: 45px;
  background-color: #9ba58d;
  color: white;
  border: 0;
  transition: 300ms;
}
.button__home:hover,
.button__aboutUs:hover,
.button__fav:hover,
.button__contacts:hover {
  background-color: #cbcfc0;
  color: rgb(124, 124, 124);
  height: 110%;
  transform: translateY(-7px);
}
.home__borderbox {
  position: relative;
}

/* -------------------------------------------------------------IMAGE CAFE */
.image__cafe {
  position: absolute;
  width: 590px;
  border: 5px solid #b5baa5;
  left: 300px;
  top: 80px;
}
.home__headerText,
.home__subHeader {
  position: relative;
  display: flex;
  font-size: 55px;
  font-family: "Italianno", cursive;
  font-weight: 400;
  font-style: normal;
  color: #2e241e;
  margin-top: 0;
}
.home__headerText {
  font-size: 120px;
  margin-bottom: -40px;
}
.home__textGroup {
  /* background-color: blue; */
  position: absolute;
  top: 40px;
  right: 300px;
  margin: 0;
  letter-spacing: 6%;
}
.home__subHeader {
  letter-spacing: 7px;
}
.paragraph__box {
  position: absolute;
  display: flex;
  text-align: right;
  /* background-color: white; */
  width: 610px;
  font-size: 40px;
  letter-spacing: 7%;
  right: 300px;
  top: 260px;
  margin: 0;
}
.paragraph__home {
  font-family: "Imprima";
  color: #635347;
  margin: 0;
  line-height: 150%;
}
/* -------------------------------------------------COLOR DECOR BACKGROUND */
.color__background {
  position: relative;
  background-color: #f6cdb6;
  width: 2200px;
  height: 1100px;
  top: 2000px;
  transform: rotate(-10deg);
}
.yellow__background {
  position: relative;
  background-color: #f8f4d9;
  width: 4000px;
  height: 1150px;
  top: 1250px;
  transform: rotate(-170deg);
}
.lightGreen__background {
  position: relative;
  background-color: #d7e0b7;
  width: 3000px;
  height: 500px;
  top: 600px;
  transform: rotate(-6deg);
}
.decor__background {
  position: relative;
  justify-items: center;
}
.button__box {
  display: flex;
  position: relative;
  justify-content: center;
  margin-top: 520px;
}

.button__showMenu {
  z-index: 100;
  font-family: "Imprima";
  align-items: center;
  font-size: 35px;
  padding: 10px 30px 10px 30px;
  background-color: #9ba58d;
  border: none;
  border-radius: 15px;
  color: white;
  filter: drop-shadow(6px 3px 5px #b8b8b8);
  transition: 300ms;
}
.button__showMenu:hover {
  transform: scale(1.1);
  background-color: #2e241e;
  color: #9ba58d;
}
.arrow__pointer {
  position: absolute;
  width: 80px;
  top: -80px;

  animation: pointdown 800ms infinite alternate-reverse;
}
@keyframes pointdown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}
#Layer_3 {
  position: absolute;
  width: 1500px;
  top: -550px;
}