*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: "Jua", sans-serif;
    background-color: #ffb6c8;
    color: #FF7782;
}

#arrow {
    position: absolute;
    width: 15%;
    height: auto;
    top: 1%;
    left: 3%;
    z-index: 5;
    transition: transform 0.2s linear;
}

#bow-img {
    position: absolute;
    width: 15%;
    height: auto;
    top: 13.5%;
    left: 10%;
    transform: translate(-50% , -50%);
    z-index: 1;
}

header {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

nav{
    position: absolute;
    top: 3%;
    left: 50%;
    display: flex;
    transform: translateX(-50%);
    gap: 2rem;
}

nav a {
    font-size: 2rem;
    color: #FB6F92;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.4rem 0.8rem;
    background-color: #FFB3C6;
    border-radius: 1rem;
    transition: all 0.3s ease;
}

nav a:hover {
    color: #FFE5EC;
    background-color: #FB6F92;
}

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    font-size: 7rem;
    white-space: nowrap;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 0 0.5rem #ff527d, 0 0 1rem #ff527d;
    z-index: 3;
}


#tagline {
    position: absolute;
    top: 57%;
    left: 49%;
    transform: translateX(-50%);
    font-size: 2rem;
    font-weight: 300;
    color: #FB6F92;
    text-align: center;
    z-index: 1;
}
.cloud {
    position: absolute;
    width: 20%;
    height: auto;
}

#cloud2{
    top: 75%;
    right: 5%;
}

#cloud3{
    top: 55%;
    left: 10%;
}

#cloud4 {
    top: 25%;
    left: 55%;
}

#cloud5 {
    top: 15%;
    left: 25%;
}

#cloud6 {
    top: 1%;
    left: 80%;
}

.heart {
    position: absolute;
    width: 7%;
    height: auto;
}

.heart:hover {
    transform: scale(1.2);
    transition: transform 0.3s ease-in;
}

#heart1 {
    top:55%;
    right: 5%;
}
#heart2 {
    top: 45%;
    left: 8%;
}

#heart3 {
    top: 35%;
    left: 47%;
}

#heart4 {
    top: 80%;
    left: 25%;
}

#heart5 {
    top: 20%;
    left: 70%;
}

#heart6 {
    top: 75%;
    left: 65%;
}

#heart7 {
    top: 5%;
    right: 70%;
}

main {
    position: relative;
}

.main-cloud {
    position: absolute;
    width: 15%;
    height: auto;
    z-index: -1;
    pointer-events: none;
}

#main_cloud1 {
    top: 25%;
    left: 10%;
}

#main_cloud2 {
    top: 35%;
    left: 80%;
}

#main_cloud3 {
    top: 45%;
    left: 1%;
}

#main-cloud4 {
    top: 55%;
    left: 82%;
}

#main_cloud5 {
    top: 65%;
    left: 2%;
}

#main_cloud6 {
    top:75%;
    left: 75%;
}

#main_cloud7 {
    top: 85%;
    left: 5%;
}

#guide {
    position: absolute;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 400;
    text-align: center;
    padding-top: 10rem;
    z-index: 4;
}

#how-it-works {
    width: 90%;
    height: auto;
}

.steps {
    display: flex;
    font-size: 2rem;
    flex-direction: row;
    gap: 18rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
}

.food-section {
    padding-top: 10rem;
}

#menu {
    position: relative;
    padding-top: 7em;
    padding-bottom: 2rem;
    text-align: center;
    z-index: 2;
    font-size: 5rem;
}

.food-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;         /* Adjusted gap for better spacing -- */
    justify-content: center;
    padding-top: 1rem;
}

.food-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #FFE4EC;
    padding: 1rem;
    border-radius: 1.5rem;
    width: 90%;
    max-width: 20rem;
    height: auto;
    transition: transform 0.3s  , background-color 0.3s , border 0.3s;
}

.food-item:hover {
    background-color: #FFD9DF;
    border: .5rem solid #FE84A2;
}

.food {
    width: 90%;
    height: auto;
    margin-bottom: 1rem;
}

.food-item h3 {
    font-size: 2rem;
    color: #FB6F92;
    margin: 0.5rem 0 0.2rem 0;
}

.food-item p {
    padding-top: 2rem;
    font-size: 1.3rem;
    color: #FB6F92;
}

.food-item em {
    display: block;
    padding-top: 2rem;
}

#order-section {
    padding-top: 5rem;
    position: relative;
    text-align: center;
    z-index: 2;
}

#order-form {
    padding-top: 3rem;
    font-size: 4rem;
}

form {
    display: flex;
    flex-direction:column;
    gap: 2rem;
    padding: 2rem;
    width: 90%;
    max-width: 55rem;
    margin: 3rem auto 0;
    border-radius: 1.5rem;
    background-color: #ffd6e3;
}

#name-input {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 2.5rem;
    padding-bottom: 1rem;
    width: 100%;
    max-width: 60rem;
}

#name-input input {
    flex: 1;
    font-size: 1.5rem;
    font-family: "Jua", sans-serif;
    outline: none;
    text-align: center;
    background-color: #FFE5EC;
    color: #7f132e;
    border: .5rem solid #FFE5EC;
    border-radius: 25px;
    min-width: 20rem;
    padding: .5rem 1rem;
}

#name-input input::placeholder {
    color: #FB6F92;
    font-display: center;
    opacity: 0.5;
    text-align: center;
}

#name-input input:focus {
    background-color: #FFF0F5;
    border: 0.5rem solid #FB6F92;
}

#name-input h3 ,
#dishes-input h3 , #drinks-input h3 ,
#love-level-input  h3 , #special-requests-input h3 
{
    font-size: 3rem;
}

#dishes-input p ,  #drinks-input p ,
#love-level-input p
{
    font-size: 2rem;
}

#dishes-input label , #drinks-input label {
    font-size: 2rem;
}

.food-inputs-row {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 2rem;
    font-size: 1rem;
}

#dishes-input input[type="number"] {
    width: 7rem;
    border: .2rem solid #FFE5EC;
    border-radius: 2rem;
    background-color: #FFE5EC;
    font-size: 1rem;
    text-align: center;
    color: #7f132e;
    font-family: "Jua", sans-serif;
    outline: none;
    padding: 0.5rem 0.5rem;
}

#dishes-input input[type="number"]:focus {
    border: 0.3rem solid #FB6F92;
    background-color: #FFF0F5;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}


.drinks-input-row {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding-top: 2rem;
}

.drinks-input-row label {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

input[type="radio"] {
    appearance: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.2rem solid #FFE5EC;
    background-color: #FFE5EC;
}

input[type="radio"]:focus {
    border: 0.2rem solid #FB6F92;
    background-color:#FB6F92 ;
}

#love-level-labels {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
    margin-top: .5rem;
}

.heart-slider {
    -webkit-appearance: none;
    width: 85%;
    height: 2rem;
    background: linear-gradient(
    to right,
  #f7b1c4,
  #ff385c,
  #590d22
    );
    border-radius: 1rem;
    outline: none;
    margin: 1rem 0;
}

.heart-slider::-webkit-slider-runnable-track {
    height: 1rem;
    border-radius: 1rem;
}

.heart-slider::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
    width: 3rem;
    height: 3rem;
    background: url(heart.png) no-repeat center;
    background-size: contain;
    margin-top: -1rem;
    cursor: pointer;
    border: none;
}

#special-requests-input textarea {
    width: 90%;
    min-height: 5rem;
    border: .5rem solid #FFE5EC;
    border-radius: 2rem;
    background-color: #FFE5EC;
    padding: 1rem;
    color: #7f132e;
    font-size: 1.2rem;
    font-family: "Jua", sans-serif;
    outline: none;
}

#special-requests-input textarea::placeholder {
    font-display: left;
    opacity: 0.5;
    color: #FB6F92;
    text-align: left;
}

#special-requests-input textarea:focus {
    background-color: #FFF0F5;
    border: 0.5rem solid #FB6F92;
}

#text-area-padding {
    padding-top: 2rem;
}

#checkout-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1rem;
}

form input[type="button"] {
    font-size: 1.2rem;
    width: 15rem;
    margin-top: 2rem;
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-family: "Jua", sans-serif;
    cursor: pointer;
    background-color: #FB6F92;
    color: #FFE5EC;
    border: .2rem solid #FB6F92;
    transition: all 0.3s ease;
}

form input[type="button"]:hover {
    transform: scale(1.1);
}

.input-padding {
    padding: 1.5rem;
}

footer {
    display: flex;
    align-items: center;
    padding-top: 3rem;
    flex-direction: column;
    font-size: 1.5rem;
}

footer p {
    text-align: center ;
    padding-bottom: 1rem;
    font-family: "Jua", sans-serif;
    color: #FB6F92;
}

#github-logo {
    width: 3rem;
    height: auto;
}