html {
scroll-behavior: smooth;
}
body {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
text-align: left;
height:100vh
}
#header {
background-image: url(cupcake_main.png);
font-size: 30px;
height: 70vh;
width: 100%;
color: white;
text-align: center;
display: grid;
background-position: center; 
background-repeat: no-repeat; 
background-size: cover;
}
#headercookies {
background-image: url(cookie34.png);
font-size: 30px;
height: 70vh;
width: 100%;
color: white;
text-align: center;
display: grid;
background-position: center; 
background-repeat: no-repeat; 
background-size: cover;
}
#cupcakesheader {
background-image: url(cupcakes_header.png);
font-size: 30px;
height: 70vh;
width: 100%;
color: white;
text-align: center;
display: grid;
background-position: center; 
background-repeat: no-repeat; 
background-size: cover;
}
#cakeheader {
background-image: url(the_main_cake.png);
font-size: 30px;
height: 70vh;
width: 100%;
color: white;
text-align: center;
display: grid;
background-position: center; 
background-repeat: no-repeat; 
background-size: cover;
}
#galleryheader {
background-image: url(Main_Gallery.png);
font-size: 30px;
height: 70vh;
width: 100%;
color: white;
text-align: center;
display: grid;
background-position: center; 
background-repeat: no-repeat; 
background-size: cover;
}
#inquiryheader {
background-image: url(Inquire_main.png);
font-size: 30px;
height: 70vh;
width: 100%;
color: white;
text-align: center;
display: grid;
background-position: center; 
background-repeat: no-repeat; 
background-size: cover;
}
#transparent {
background-color: rgba(255, 255, 255, .85);
}
p {
line-height: 1.5em;
}
#slogan, #work-with {
background-color: black;
color: white;
max-width: 20em;
margin-top: 1em;
transition: all .5s ease-in-out .2s;
}
#slogan-words, #work-with-words {
padding: .5em;
}
#slogan:hover, #work-with:hover {
color: white;
background-color: #183da2;
box-shadow: 30px 30px 5px gray;
}
#header h1 {
margin-top: -1em;
color: #84563C;
height: 5px;
font-size: 65px;
}
#header h5 {
margin-top: 25vh;
color: #D9BE91;
font-size: 35px; 
}
#header h4 {
padding-top: 1em;
font-family: Brush Script MT, Brush Script Std, cursive;
color: #D9BE91;
font-size: 30px;
font-weight: 700;
}
#headercookies h1 {
margin-top: 25vh;
color: #84563C;
height: 5px;
font-size: 65px;
}
#headercookies h4 {
padding-top: 1em;
font-family: Brush Script MT, Brush Script Std, cursive;
color: #D9BE91;
font-size: 30px;
font-weight: 700;
}
#cupcakesheader h1 {
margin-top: 25vh;
color: #84563C;
height: 5px;
font-size: 65px;
}
#cupcakesheader h4 {
padding-top: 1em;
font-family: Brush Script MT, Brush Script Std, cursive;
color: #D9BE91;
font-size: 30px;
font-weight: 700;
}
#cakeheader h1 {
margin-top: 25vh;
color: #84563C;
height: 5px;
font-size: 65px;
}
#cakeheader h4 {
padding-top: 1em;
font-family: Brush Script MT, Brush Script Std, cursive;
color: #D9BE91;
font-size: 30px;
font-weight: 700;
}
#galleryheader h1 {
margin-top: 25vh;
color: #84563C;
height: 5px;
font-size: 65px;
}
#galleryheader h4 {
padding-top: 1em;
font-family: Brush Script MT, Brush Script Std, cursive;
color: #D9BE91;
font-size: 30px;
font-weight: 700;
}
#inquiryheader h1 {
margin-top: 25vh;
color: #84563C;
height: 5px;
font-size: 65px;
}
#inquiryheader h4 {
padding-top: 1em;
font-family: Brush Script MT, Brush Script Std, cursive;
color: #D9BE91;
font-size: 30px;
font-weight: 700;
}
.center {
text-align: center;
}
#horiz-logo-home {
margin-top: 0em;
grid-row-start: 2;
align-items: center;
}
#horiz-logo-services {
margin-top: 0em;
grid-row-start: 2;
grid-column-start: center;
transition: all .9s ease-in-out .2s;
}
#horiz-logo-services:hover {
transform: rotate(360deg);
}
#horiz-logo-about {
margin-top: 0em;
grid-row-start: 2;
grid-column-start: center;
transition: all .5s ease-in-out .2s;
}
#horiz-logo-about:hover {
transform: scale(1.1);
}
#home-info {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
}
.logo-repeat {
background: url(Small_Logo.png) repeat-x left 100px;
}
.padded-area {
padding-top: calc(-5em + 7.5752vw);
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;
}
.logo {
width: 10em;
margin-top: 1em;
}
footer {
width: 100%;
background-color: rgb(238, 224, 177);
color: white;
}
#footertwo {
width: 100%;
background-color: #E7CE96;
margin-top: -1em;
color: white;
}
.hover {
transition: all .5s ease-in-out .2s;
}
.hover:hover {
transform: scale(1.05) translate(-5%);
}
a {
color: rgb(132, 86, 60);
transition: all .5s ease-in-out .2s;
text-decoration: none;
}
a:hover {
color: black;
}
#services-logo {
grid-column-start: center;
}
nav {
background-color: rgba(238, 224, 177, .0);
display: grid;
position: fixed;
width: 100%;
color: white;
transition: all .5s ease-in-out;
z-index: 1000;
}
nav:hover {
background-color: rgba(238, 224, 177, 0);
}
#large-screen-nav.scrolled {
  background-color: rgba(238, 224, 177, 1);
transition: all 200ms ease-in-out;
}
#nav-logo-div {
justify-content: left;
margin-top: 1em;
grid-column-start: 1;
grid-column-end: 2;
display: flex;
margin-bottom: 0;
}
ul {
list-style-type: none;
}
nav ul {
display: flex;
grid-column-start: 2;
grid-column-end: 3;
justify-content: left;
}
.nav-logo {
height: 2.5em;
padding-left: 2em;
}
#small-screen-nav {
padding: 0;
z-index: 1000;
}
nav ul li {
margin-top: .5em;
padding-right: 2em;
font-weight: 500;
}
nav ul li a {
background: linear-gradient(#E7CE96 0 0) no-repeat calc(200% - var(--p, 0%))
100% / 200% var(--p, 0.08em);
transition: 0.3s var(--t, 0s),
background-position 0.3s calc(0.3s - var(--t, 0s));
display: block;
padding: .5em;
margin: 0 1em;
text-decoration: none;
color: rgb(132, 86, 60);
}
nav ul li a:hover {
--p: 100%;
--t: 0.3s;
color: rgb(132,  86, 60);
}

.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #EEE0B1;
  color: white;
  padding-top: 1.5em;
  padding-right: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  position: fixed;
  width: 100%;
height: 70px;
}

.menu { 
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
color: white;
font-size: 16px;
}
.menu > li {
  margin: 0 1em;
  overflow: hidden;
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#menu-toggle {
margin-right: 5em;
display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #84563C;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
margin-right: 5em;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

@media (max-width: 970px) {
  .menu-button-container {
    display: flex;
  }
  .menu {
    position: absolute;
    top: 0;
    margin-top: 70px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
color: white;
  }
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #menu-toggle:checked ~ .menu li {
    border: 2px solid #D9BE91;
    height: 1.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 1.5em 0;
    width: 100%;
    color: #84563C;
    background-color: #E7CE96;
font-size: 1em;
  }
  .menu > li:not(:last-child) {
    border-bottom: 1px solid #E7CE96;
  }
}
.menu {
font-size: 14px;
}
.menu li {
margin-top: 2em;
}
.responsive {
  padding-top: calc(2.8em + 1.5625vw);
  max-width: 100%;
  height: auto;
}
.bannerlogo {
height: auto;
width: calc(200px + 2.5625vw);
}
#main-content {
padding: calc(16px + 1.5625vw);
}
.basic-3 {
  background:
      linear-gradient(currentColor 0 0)
      bottom /var(--d, 0) 3px
      no-repeat;
  transition:0.5s;
}
.basic-3:hover {
  --d: 100%;
}
@media (min-width: 970px) {
#small-screen-nav {
display: none;
}
body {
display: grid;
}
.flex-area {
display: flex;
}
.flex {
display: flex;
justify-content: space-between;
}
#slogan, #work-with {
background-image: url(Slogan_Pic.png);
max-width: 35em;
margin-top: 1em;
}
#slogan {
margin-right: 1em; 
}
#work-with {
margin-left: 1em;
}
#slogan-words, #work-with-words {
background-color: rgba(255, 255, 255, .8);
padding: .5em;
color: black;
transition: all .5s ease-in-out .2s;
}
#slogan-words:hover, #work-with-words:hover {
color: white;
background-color: #183da2;
}
}
@media (max-width: 970px) {
#large-screen-nav {
display: none;
}
body {
text-align: jusify;
}
#slogan, #work-with {
margin-right: 5em;
margin-left: 5em;
}
}
@media (max-width: 599px) {
.not-less-600 {
display: none;
}
}
@media (max-width: 199px) {
.not-less-400 {
display: none;
}
#slogan, #work-with {
display: none;
}
.nav-logo {
display: none;
}
}
@media (min-height: 1200px) {
.padded-area {
font-size: 1.7em;
}
.menu > li {
font-size: 1.5em;
}
}
@media (max-width: 499px) {
.not-less-500 {
display: none;
}
}
@media (max-width: 699px) {
#slogan, #work-with {
display: none;
}
}
.divider {
  border-style: solid;
  border-width: 1.2px;
  border-image: linear-gradient(to left, transparent, #ff5151, transparent) 
                100% 0 100% 0/3px 0 3px 0 stretch;
margin-top: 20px;
  
 
}
#contact-window { 
position: fixed;
bottom: 0;
right: 0;
left: 0;
top: 0;
height: 90%;
}
.close {
display: none;
}
#email-icon {
width: 1em;
}
button {
background-color: #ff5151; 
color: black;
transition: all .5s ease-in-out 0s;
border-radius: 15px 15px;
border: none;
width: 50px;
height: 47px;
text-align: center;
padding: .1em;
}
button, a {
cursor: pointer;
}
#close-contact {
margin: .2em;
transition: all .5s ease-in-out .2s;
background-color: rgba(255, 255, 255, 0);
}
#open-contact {
position: fixed;
bottom: 0;
right: 0;
width: auto;
margin: .5em;
transition: all .5s ease-in-out .2s;
}
#open-contact:hover {
transform: translate(-35%) rotate(360deg);
 }
#close-contact:hover {
background-color: rgba(255, 255, 255, .4);
}
#floating-contact {
width: 300px; 
height: 100%;
}
form input, textarea, select {
padding: .5em;
border-radius: 0.75em;
border: 2px solid rgb(132, 86, 60);
color: #84563C;
transition: .5s all ease-in-out .2s;
width: 250px;
height: 2.5em;
}
input:focus, textarea:focus {
  background-color: #fcefd6;
  color: #84563C;
}
textarea {
width: 250px;
height: 2.25em;
}
.submit-button {
background-color: rgb(238, 224, 177); 
border-color: rgb(238, 224, 177);
color: white;
transition: all .5s ease-in-out 0s;
}
.submit-button:hover {
background-color: rgb(132, 86, 60);
border-color: rgb(132, 86, 60);
}
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.image-container {
    width: 100%;
    max-width: 300px; /* Adjust as needed */
    text-align: center;
    margin: 10px; /* Add spacing between images */
}

.image-container img {
    width: 300px;
    height: 300px;
    border-radius: 50%; /* Circular border */
transition: .3s;
}

.image-container h2 {
    font-size: 1.2rem;
    margin: 5px 0;
}

.image-container p {
    font-size: 0.9rem;
    color: #777;
}
.container {
            display: flex;
            flex-wrap: wrap;
            background-color: #D9BE91;
            color: white;
            width: 98.5vw;
        }
        .left {
            flex: 1;
            padding: 20px;
        }
        .right {
            flex: 1;
            background-image: url(Bees.png);
            background-size: cover;
            background-position: center;
            min-height: 500px;
        }
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            .right {
                display: none;
            }
        }
button {
  border-radius: 4px;
  background-color: #E7CE96;
  border: none;
  color: #fff;
  text-align: center;
  font-size: 32px;
  padding: 16px;
  width: 220px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 36px;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0,.7);
}

button {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
button:after {
  content: '»';
  position: absolute;
  opacity: 0;  
  top: 14px;
  right: -20px;
  transition: 0.5s;
}

button:hover {
  padding-right: 24px;
  padding-left:8px;
}
button:hover a{
color: white;
}

button:hover:after {
  opacity: 1;
  right: 10px;
}
.cookie-box {
  width: 25%; /* Adjust as needed */
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  margin: 10px;
  display: inline-block;
  font-size: 20px;
  color: white;
  vertical-align: top; /* Ensures boxes align correctly */
}

/* Background colors for each flavor */
.lemon {
  background-color: #FFD700; /* Lemon yellow */
}

.sugar {
  background-color: #D9BE91; /* Classic sugar cookie beige */
}

.chocolate {
  background-color: #84563C; /* Chocolate brown */
}

/* Responsive layout */
@media (max-width: 1024px) {
  .cookie-box {
      width: 45%; /* Two flavors on top, one on the bottom */
  }
}

@media (max-width: 768px) {
  .cookie-box {
      width: 80%; /* Single column layout */
  }
}

                .cookie-circle {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            text-align: center;
            line-height: 150px;
            font-size: 16px;
            margin: 20px;
            display: inline-block;
            padding: 10px; /* Add padding */
        }

        /* Background colors for each circle */
        .mini-cookies {
            background-color: #FFD700; /* Lemon yellow */
        }

        .regular-cookies {
            background-color: #F5DEB3; /* Classic sugar cookie beige */
        }
.containercupcake {
            display: flex;
            flex-wrap: wrap;
            background-color: #D9BE91;
            color: white;
            width: 98.5vw;
        }
        .leftcupcake {
            flex: 1;
            padding: 20px;
        }
        .rightcupcake {
            flex: 1;
            background-image: url(cupcake13.png);
            background-size: cover;
            background-position: center;
            min-height: 300px;
        }
        @media (max-width: 768px) {
            .containercupcake {
                flex-direction: column;
            }
            .rightcupcake {
                display: none;
            }
        }
.cupcakegallery {
    column-count: 3;      /* number of columns */
    column-gap: 15px;
}
.cupcake-image-container {
    break-inside: avoid;
    margin-bottom: 15px;
}

.cupcake-image-container img {
    width: 100%;
    height: auto;
    border-radius: 20%;
}
.star {
color: rgb(132, 86, 60);
font-size: small;
}
.cookiescontainer {
            display: flex;
            flex-wrap: wrap;
            background-color: #D9BE91;
            color: white;
            width: 98.5vw;
        }
        .cookiesleft {
            flex: 1;
            padding: 20px;
        }
        .cookiesright {
            flex: 1;
            background-image: url(cookie39.png);
            background-size: cover;
            background-position: center;
            min-height: 400px;
        }
        @media (max-width: 768px) {
            .cookiescontainer {
                flex-direction: column;
            }
            .cookiesright {
                display: none;
            }
        }
.cookiegallery {
    column-count: 3;      /* number of columns */
    column-gap: 15px;
}

.cookie-image-container {
    break-inside: avoid;
    margin-bottom: 15px;
}

.cookie-image-container img {
    width: 100%;
    height: auto;
    border-radius: 20%;
}
.cakecontainer {
            display: flex;
            flex-wrap: wrap;
            background-color: #D9BE91;
            color: white;
            width: 98.5vw;
        }
        .cakeleft {
            flex: 1;
            padding: 20px;
        }
        .cakeright {
            flex: 1;
            background-image: url(maincake.jpg);
            background-size: cover;
            background-position: center;
            min-height: 500px;
        }
        @media (max-width: 768px) {
            .cakecontainer {
                flex-direction: column;
            }
            .cakeright {
                display: none;
            }
        }
.cakegallery {
    column-count: 3;      /* number of columns */
    column-gap: 15px;
}

.cake-image-container {
    break-inside: avoid;
    margin-bottom: 15px;
}

.cake-image-container img {
    width: 100%;
    height: auto;
    border-radius: 20%;
}

 .forms-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Style each form */
        .inquiry-form {
            width: 30%; /* Initially, three forms side by side */
            margin: 10px;
            padding: 20px;
            border: 2px solid rgb(132, 86, 60);
            border-radius: 10px;
            text-align: center;
        }
        .inquiry-form {
            display: none; /* Initially hide all forms */
            width: 80%;
            background-color: #fcefd6;
        }
#cookie-button, #cupcake-button, #cake-button, #special-button {
margin: 0.2em;
}
.float-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    width: 50px; /* Set the button size */
    height: 50px;
    background-color: #E7CE96;
    border-radius: 50%; /* Make it circular */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.float-button a {
    display: block;
    color: #84563C;
    text-decoration: none;
}

.float-button a i {
    font-size: 30px; /* Adjust the icon size */
}

.float-button:hover {
    background-color: #D9BE91;
}

.divider {
  border-style: solid;
  border-width: 1.7px;
  border-image: linear-gradient(to left, transparent, #D9BE91, transparent) 
                100% 0 100% 0/3px 0 3px 0 stretch;
margin-top: 20px;
  
 
}
.cake-table-container {
  display: flex;
  justify-content: center;
}
.cake-prices { 
  width: 100%; 
  border-collapse: collapse;
   font-size: 1rem; 
  } 
  .cake-prices th { 
    background: #f5e9dd; 
    color: #5a3e2b; 
    padding: 10px;
     font-weight: bold; 
     text-align: center;
    } 
    .cake-prices td { 
      padding: 10px; 
      text-align: center; 
      border-bottom: 1px solid #ddd; 
    }