/* ~ Add this font for the entire webpage */
* {
    font-family: "Handlee";
}

body {
    /* ~ Colors of my VS Code Theme -> Kawaii Gummy */
    background-color: #393a55;
    color: #ff9eb5;
    /*
        ~ Use background-image to make an image the background of the page
        ~ Use background-size:cover to make the backgroung image cover the entire webpage
    */
    /* ~ Adding an image for the background */
    /* background-image: url(img/1-cherry-blossom-umbrella.png); */
    /* ~ This will make the image cover the whole page */
    /* background-size: cover; */
    /* ~ This will prevent the image from repeating */
    /* background-repeat:repeat; */
    /* ~ This will center the image */
    /* background-position: center center; */
    margin: 20px;
    padding: 20px;
}

/* & Styling for the Heading */
/* ~ Making this a flex container for the heading of the webpage */
heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ~ This will style the first image within the <heading> element */
.header-img-1 {
    width: 160px;
    height: 150px;
    border: 4px solid #ff9eb5;
    /* border-radius: 20px; */
    border-radius: 100px;
    padding: 8px;
}

h1 {
    text-align: center;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-underline-offset: 5px;
    background-color: #ff9eb5;
    color: whitesmoke;
    width: 350px;
    height: 160px;
    border: 4px solid whitesmoke;
    border-radius: 55%;
    padding-top: 100px;
}

/* ~ This will stule the second image within the <heading> element */
.header-img-2 {
    width: 160px;
    height: 150px;
    border: 4px solid #ff9eb5;
    /* border-radius: 20px; */
    border-radius: 100px;
    padding: 8px;
}

/* & this will change the color of all the links on the webpage */
a {
    color: #ff9eb5;
}

/* ~ This will flex the ul list items in the nav bar */
.nav-bar {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    font-size: 17px;
}

.nav-list {
    border: 4px solid #ff9eb5;
    border-radius:25px;
    padding: 8px;
}

h2 {
    text-align: center;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-underline-offset: 8px;
}

/* & Change the color & width of the <hr> element */
hr {
    background-color: #ff9eb5;
    height: 10px;
    border: none;
    margin: auto;
}

/* & change the width of the <hr> element for the section titles */
.section-hr {
    width: 20%;
}

h3 {
    text-align: center;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-underline-offset: 8px;
}

/* & Styling for the Menu */
.menu-fig {
    width: 20%;
}

.menu-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin: 5px;
}

.menu-items {
    width: 75%;
    height: 275px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border: 4px solid #ff9eb5;
    /* border-radius: 20px; */
    border-radius: 30%;
    padding: 5px;
    margin: 5px;
    font-size: 17px;
}

.menu-list {
    list-style: none;
    text-align: center;
    margin: 5px;
    padding: 3px;
}

.menu-list-b {
    list-style: none;
    margin: 5px;
    padding: 3px;
}

/* ~ this will change the hr element to vertical instead of horizontal */
.menu-vertical-divider {
    background-color: #ff9eb5;
    border: none;
    width: 5px;
    height: 190px;
    margin: 20px;
}

/* ~ change the size of the cake images for each menu section */
.img-cake {
    width: 190px;
    height: 250px;
    border:4px solid #ff9eb5;
    border-radius: 200px;
    padding: 8px;
}


.img-cake-slices-tart {
    width: 190px;
    height: 250px;
    border: 4px solid #ff9eb5;
    border-radius: 200px;
    padding: 8px;
}

.img-sweets-pudding-jelly {
    width: 190px;
    height: 250px;
    border: 4px solid #ff9eb5;
    border-radius: 200px;
    padding: 8px;
}

.img-teas {
    width: 190px;
    height: 250px;
    border: 4px solid #ff9eb5;
    border-radius: 200px;
    padding: 8px;
}

.menu-details {
    list-style: circle;
}

/* & Styling for the order form */
.order-container {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    /* margin-right: 30px; */
    /* margin: 5px; */
}

.order-fig {
    width: 20%;
}

.order-items {
    display: flex;
    width: 75%;
    height: 400px;
    justify-content: space-evenly;
    align-items: center;
    border: 4px solid #ff9eb5;
    border-radius: 30%;
    padding:40px;
    margin: 5px;
    font-size: 17px;
}

.order-list {
    list-style: none;
    text-align: center;
    margin: 1px;
    padding: 5px;
}

form {
    text-align: center;
    /* width: 55%; */
    padding-right: 25px;
}

input {
    background-color: #ff9eb5;
}

/* ~ Change the color of the placeholder */
::placeholder {
    color: whitesmoke;
    font-size: 17px;
}

/* ~ Styling for the order form img sections */
.img-cake-form {
    width: 190px;
    height: 250px;
    border: 4px solid #ff9eb5;
    border-radius: 200px;
    padding: 6px;
}

.img-cake-slices-tart-form {
    width: 190px;
    height: 250px;
    border: 4px solid #ff9eb5;
    border-radius: 200px;
    padding: 6px;
}

.img-sweets-pudding-jelly-form {
    width: 190px;
    height: 250px;
    border: 4px solid #ff9eb5;
    border-radius: 200px;
    padding: 6px;
}

.img-tea-form {
    width: 190px;
    height: 250px;
    border: 4px solid #ff9eb5;
    border-radius: 200px;
    padding: 6px;
}

/* ~ Change the color of the radio input */
input[type="radio"] {
    accent-color: #9ddbd6;
}

/* ~ Change the color of the checlbox input */
input[type="checkbox"] {
    accent-color: #9ddbd6;
    background-color: #ff9eb5;
}

/* ~ Styling the number input */
input[type="number"] {
    color: whitesmoke;
    padding: 5px;
    text-align: center;
    width: 60px;
    border: 4px solid #ff9eb5;
    border-radius: 200px;
}

/* ~ Styling for the text input */
input[type="text"] {
    color: whitesmoke;
    width: 80%;
    padding: 5px;
    text-align: center;
    border: 4px solid #ff9eb5;
    border-radius: 250px;
}

/* ~ Styling for the textarea elements for the order forms */
.order-details {
    height: 100px;
    width: 350px;
    background-color: #ff9eb5;
    color: whitesmoke;
    font-size: 17px;
    padding: 15px;
    text-align: center;
    border: 4px solid #ff9eb5;
    border-radius: 70px;
}

input[type="submit"] {
    color: whitesmoke;
    border: 4px solid whitesmoke;
    border-radius: 250px;
    width: 60%;
    padding: 10px;
    font-size: 18px;
}


/* & Styling for the Contact Us Section */
.contact-container {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}

.contact-fig {
    width: 20%;
}

/* ~ Styling the Contact Us img */
.contact-fig-img {
    width: 190px;
    height: 250px;
    border: 4px solid #ff9eb5;
    border-radius: 200px;
    padding: 8px;
}

/* ~ Styling the contact form */
.contact-form {
    width:75%;
    border: 4px solid #ff9eb5;
    border-radius: 30%;
    padding: 25px;
    font-size: 17px;
}


/* ~ Stling the Contact email */
input[type="email"] {
    color: whitesmoke;
    width: 85%;
    padding: 5px;
    text-align: center;
    border: 4px solid #ff9eb5;
    border-radius: 250px;
}


/* ~ Styling the Contact details */
.contact-details {
    height: 100px;
    width: 450px;
    background-color: #ff9eb5;
    color: whitesmoke;
    font-size: 17px;
    padding: 15px;
    text-align: center;
    border: 4px solid #ff9eb5;
    border-radius: 350px;
}

/* & Styling for the Footer section of the webpage*/
/* ~ Create a footer container */
.footer-container {
    text-align: center;
    width: 100%;
    font-size: 17px;
}

/* ~ Style footer list for links to external resources or to sections of the page */
.footer-list {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
}