*{margin:0;padding:0;}
html{
background:white;
font-size:1em;
}
body{
  color:rgb(131 27 63);
}
#header h1{
font-family:'Comforter', cursive;
font-size:4.5rem;
color:rgb(234, 184, 157);
text-shadow:2px 2px rgb(0,0,0);
margin: 2.5rem 0 0;
}
#header h1 a{text-decoration:none;color:rgb(234, 184, 157);}
#header{
display:flex;
background:rgb(248,211,224);
}
#logo{
flex-grow:4;
}
#header_text{
flex-grow:7;
}
#logo img{
width:12rem;
height:auto;
margin:0 1rem;
}
.columns{
text-align:center;
padding:1rem 0;
}
nav{
display:flex;
justify-content: space-evenly;
background:rgb(248,211,224);
border-bottom:1px solid rgb(234,184,157);
}
#menu{width:700px;margin:auto;}
.nav-link{text-decoration: none;rgb(131 27 63);font-size:1.3em;}
a.nav-link{
color:rgb(131 27 63);
}

.carousel {position: relative;
			width: 100%;
            max-width:40vw;
            overflow: hidden;
            border:rgb(248, 211, 224) 20px solid;
           	margin:auto;
           }
.carousel-images {display: flex;
			transition: transform 0.5s ease;
            }
        .carousel-image {
            width: 100%;
            height:auto;
            max-height:1000px;
            flex: 0 0 auto; /* Prevent flex items from shrinking */
        }
        .carousel-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.8);
            border: none;
            padding: 10px;
            cursor: pointer;
            z-index: 10;
        }
        .prev {
            left: 10px;
        }
        .next {
            right: 10px;
        }
.table table{margin: auto;
}
.cake_step{
margin:1.5rem 0;
}
#main ul{width:inherit;overflow:hidden;}
#main ul li{width:33.3%;float:left;padding: 5px 0;}
#page{
display:flex;
flex-direction: column;
width:80vw;
margin:1rem auto;
background:white;
font-size:1.2rem;
}
#sub ul li{width:100%;}
figure{width:100%;float:left;}
figure{    box-sizing: border-box;
    /* Set a limit on entry widths? */
    padding:0.5rem;
    /* padding to make sections more distinct from each other*/
}
figure img{width: inherit;height: auto;}
figure h3{margin-top: 10px;position: relative;top: 40px;left: 10px;color: white;}
#home_text{text-align:center;font-size:1.2em;}
#footer{
width:100vw;
padding:1rem 0;
}
#cookie_header{
width:10vw;
padding:2.7rem 0;
}
#footer, #cookie_header,#cookie_consent{text-align:center;border-top: 1px solid rgb(234,184,157);color:rgb(0,0,0);background-color:rgb(248,211,224);}
#cookie_header{position:fixed;bottom:0;}
#cookie_consent{width:100%; overflow:hidden; position:fixed; bottom:-10px; color:rgb(0,0,0);}
#cookie_header,#cookie_options{z-index: 100; opacity:0.95;}
#cookie_options{display:none;padding:50px; width:100%; height:90%; bottom:-10px;}
#gallery_images{display: grid;
    grid-template-columns: 1fr 1fr;
    /* using fr (fractional Unit) allows for the free space to be divided equally between the number of columns*/
    grid-gap: 1rem;}
        #socials {
            display: flex;
            gap: 15px; /* Spacing between icons */
            justify-content: center;
        }
        #socials img {
            width: 50px; /* Width of the icons */
            height: 50px; /* Height of the icons */
            transition: transform 0.3s; /* Adding a hover effect */
        }
        #socials img:hover {
            transform: scale(1.1); /* Slightly enlarge the icon on hover */
        }
@media (max-width: 768px)
{
#header h1{width:100vw;font-size:3rem;
}
#header{display:block;text-align:center;
}
.nav-link{font-size:1rem;
}
    #cookie_header
    {
    width:100vw;
    padding:0;
    margin:0;
    }
    #cookie_options{
    width:unset;
    }
#page{
display:flex;
flex-direction: column;
width:95vw;
margin:1rem auto;
background:white;
font-size:1.2rem;
}
.carousel {position: relative;
			width: 100%;
            max-width:90vw;
            overflow: hidden;
            border:rgb(248, 211, 224) 5px solid;
           	margin:auto;
           }
}