body {
    background-color:#e4dfdd;
    margin:0px;
    font-family: Georgia, serif;
}



/* START OF BUTTON STYLING */
.buttonStyle {
  align-items: center;
  background-color: #fee6e3;
  border: 2px solid #111;
  border-radius: 8px;
  box-sizing: border-box;
  color: #111;
  cursor: pointer;
  display: flex;
  font-family: Georgia, serif;
  font-size: 16px;
  height: 48px;
  justify-content: center;
  line-height: 24px;
  max-width: 100%;
  padding: 0 25px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.buttonStyle:after {
  background-color: #111;
  border-radius: 8px;
  content: "";
  display: block;
  height: 48px;
  left: 0;
  width: 100%;
  position: absolute;
  top: -2px;
  transform: translate(8px, 8px);
  transition: transform .2s ease-out;
  z-index: -1;
}

.buttonStyle:hover:after {
  transform: translate(0, 0);
}

.buttonStyle:active {
  background-color: #ffdeda;
  outline: 0;
}

.buttonStyle:hover {
  outline: 0;
}

@media (min-width: 768px) {
  .buttonStyle {
    padding: 0 40px;
  }
}

/* END OF BUTTON STYLING */ 

#headDD{
color:#fee6e3;
display:flex; 
align-items:center;
}
#headDDaID{
    display:flex; 
    align-items:center;
}
#leftSideNav{
    display:flex; 
align-items:center;

}

#nav{
    background-color: #d384a6 !important; 
    z-index: 2;
    
}
.dropdown-menu{
    z-index: 10;

}


#home-click-logo{
    /* This is the logo icon that navigates/returns you to the top of the home page when clicked. */
    height:180px;
    width:auto;
}

#homeButton{
    background-color: transparent;
    border:none;

}

.head-float {
display: flex;
justify-content: center;
font-size: 24px;
height:200px;
width:100%;
background-image: linear-gradient(180deg, #5d001d, #9b1750);
/* Line 19-21 fixes this nav-bar div to hover over everthing else on the site while user is scrolling */ 
z-index: 1030;
}

.parent-header{
    position: sticky;
    top: 0;
    height:auto; 
    width:100%; 
    z-index: 1000;
}



.leftSideNav{
    width:25%;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
}

.home-icon-holder{

    width:50%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;


}

.login-sect{
    width:25%;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    

}

#quickScrollButtons{
height: 75px;
width: 100%;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center; 
text-align:center;
font-size: 24px;
color:#201812;
background-image: linear-gradient(180deg, #e3afbc, #db98aa); 
border-bottom: solid #e4dfdd 5px;

transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
#quickScrollButtons:hover {

    background-image: linear-gradient(180deg, #689775, #8fbf9d);
    color:#ebeced;
    
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;


}

/* .main-cont-parent{
    margin-top:200px;
    IMPORTANT FOR EDIT: top margin has to be the same px amount as the head-float height.
} */

#intro-extro-cont{
    display: flex;
    justify-content: center;
    font-size: 24px;
    color:#201812;
    /*height:200px;*/
    width:auto;
    background-image: linear-gradient(180deg, #e3afbc, #db98aa); 
    /* Line 38-40 this is to seperate the two child divs within the parent container div into two rows */
    display:flex;
    flex-direction:row; 
    flex-wrap:wrap;
    text-align:center;
    align-items:center;
    border-bottom: solid #e4dfdd 5px;

    /* Lines 74-77 transition the bg and font colors */
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
       
    
}

#intro-extro-cont:hover {
    background-image: linear-gradient(180deg, #689775, #8fbf9d);
    color:#ebeced;
    /* Lines 86-89 transition the bg and font colors */
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    
    
}

.extro-desc{
    width:50%;
    display:flex; 
    flex-wrap:wrap;
    justify-content:flex-start;
    text-align:center;
    align-items:center;
    flex-direction:column;
}


.intro-desc{
    width:50%;
    display:flex; 
    flex-wrap:wrap;
    justify-content:flex-end; 
    text-align:center; 
    align-items:center;
    flex-direction:column; 
    
}

#drinks-cont{
    display: flex;
    justify-content: center;
    flex-direction:column;
    text-align:center;
    align-items:center;
    font-size: 24px;
    width:100%;
    height:auto; 
    background-image: linear-gradient(180deg, #e3afbc, #db98aa); 
    color:#7c5884;
    border-bottom: solid #e4dfdd 5px;   
    transition: background-color 3s 2s;
     /* Lines 138-141 transition the bg and font colors */
     transition: 0.5s;
     -moz-transition: 0.5s;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
}
#drinks-cont:hover{
    background-image: linear-gradient(180deg, #689775, #8fbf9d);
    /*background-image: linear-gradient(180deg, #e3afbc, #db98aa);*/ 
    color:#ebeced;
    background-color: #e8f5fa;
    transition: background-color 0s;
     /* Lines 86-89 transition the bg and font colors */
     transition: 0.5s;
     -moz-transition: 0.5s;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
}
#twobuttons{
display: flex;
justify-content: center;
flex-direction:column;
text-align:center;
align-items:center;
font-size: 24px;
width:100%;
height:auto; 
background-image: linear-gradient(180deg, #e3afbc, #db98aa); 
color:#7c5884;
border-bottom: solid #e4dfdd 5px;   
transition: background-color 3s 2s;
 /* Lines 138-141 transition the bg and font colors */
 transition: 0.5s;
 -moz-transition: 0.5s;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
}

#twobuttons:hover{
    background-image: linear-gradient(180deg, #689775, #8fbf9d);
    /*background-image: linear-gradient(180deg, #e3afbc, #db98aa);*/ 
    color:#ebeced;
    background-color: #e8f5fa;
    transition: background-color 0s;
     /* Lines 86-89 transition the bg and font colors */
     transition: 0.5s;
     -moz-transition: 0.5s;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
}
/* WTM SECTION CSS STARTS HERE */
.wtm-cont{
    display: flex;
    justify-content: center;
    flex-direction:column;
    text-align:center;
    align-items:center;
    font-size: 24px;
    width:100%;
    height:auto; 
    background-image: linear-gradient(180deg, #e3afbc, #db98aa); 
    color:#7c5884;
    border-bottom: solid #e4dfdd 5px;   
    transition: background-color 3s 2s;
     /* Lines 138-141 transition the bg and font colors */
     transition: 0.5s;
     -moz-transition: 0.5s;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
}
.wtm-cont:hover {
    background-image: linear-gradient(180deg, #689775, #8fbf9d);
    /* background-image: linear-gradient(180deg, #e3afbc, #db98aa);  */
    color:#ebeced;
    background-color: #e8f5fa;
    transition: background-color 0s;
     /* Lines 86-89 transition the bg and font colors */
     transition: 0.5s;
     -moz-transition: 0.5s;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
}

#wtmTitle{
    height:auto;
    width:100%;
    display:flex;
    align-items:flex-start;
    text-align:center;
    justify-content:center;
    align-items:center;
    align-items:flex-start;
    
    
}
#wtmHeader{
    display: flex;
    justify-content: center;
    font-size: 24px;
    width:100%;
     display:flex;
     flex-direction:row; 
     flex-wrap:wrap;
     align-items:flex-start;
     text-align:center;
     margin-bottom:50px;
}

.genHolder{
    display: flex;
    justify-content: center;
    font-size: 24px;
    width:100%;
     /* Line 74-76 this is to seperate the two child divs within the parent container div into two rows */
     display:flex;
     flex-direction:center; 
     flex-wrap:wrap;
     align-items:center;
     text-align:center;
   
}

.introGEN {
    width: 50%;
    display:flex; 
    text-align:center;
    justify-content:center;
    flex-wrap:wrap;
}

.extroGEN {
    width: 50%;
    display:flex; 
    text-align:center;
    justify-content:center;
    flex-wrap:wrap;
}
/* WTM SECTION CSS ENDS HERE */

#vibe-check-cont{
    width:100%;
    height:auto; 
    display: flex;
    justify-content: center;
    font-size: 24px;
    width:auto;
    font-size: 24px;
    background-image: linear-gradient(180deg, #e3afbc, #db98aa); 
    color:#7c5884;
    border-bottom: solid #111412 5px;   
    transition: background-color 3s 2s;
     /* Lines 138-141 transition the bg and font colors */
     transition: 0.5s;
     -moz-transition: 0.5s;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
     
}

#vibe-check-cont:hover{
background-image: linear-gradient(180deg, #689775, #8fbf9d);
color:#ebeced;
background-color: #e8f5fa;
transition: background-color 0s;
 /* Lines 86-89 transition the bg and font colors */
 transition: 0.5s;
 -moz-transition: 0.5s;
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
}


.footer{
    display: flex;
    justify-content: center;
    font-size: 12px;
    height: 100px;
    width:auto;
    background-color:#e4dfdd;
    align-items: center;
}

#footerimg{
    height: 75px;
    width: 75px;
}

#video{
 height: auto;
width: 100%;

}


.recipe-box {
    
    padding: 10px;
    width: 100vw; /* Adjust the width as needed */
    margin: 20px auto;
    text-align: center;
}

.recipe-box img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
}

.recipe-box h2 {
    font-size: 1.5em;
    margin-bottom: 5px;
}

.recipe-box p {
    text-align: left;
}


#buttonWrapper {
    text-align: center;
    margin: 20px;
}

#buttonwrapper{
    display: flex;
 }  

 #twobuttons {
    display: flex; /* Use flexbox to align items horizontally
}

.buttonStyle {
    /* Add any styling you want for the buttons */
    margin-right: 15px; /* Add spacing between buttons */
}

/*.recipe-box {
     Add any styling you want for the recipe boxes 
} */

#homeVideo{
    padding:0;
    border-bottom: solid #111412 5px;
}