body{
    background-color: rgba(255, 249, 240, 1);
    margin-top: -3rem;
    margin-left: 7.5rem;
    margin-right: 4rem;
    padding: 0;
}


/*body moblie*/
@media (max-width: 50em){
    body{
        margin: 0;
    }
}


html, body {
  height: 100%;
}


/*logo*/
h1{
    font-family: luckiest guy;
    font-size: 5rem;
    color: rgba(155, 111, 226, 1);
}

h1{
    display:flex;
    justify-content: center;  
    grid-template-rows: 1fr;
}

.bakery{
    font-family: Koulen ;
    color: rgb(200, 188, 226) ;
    font-size: 3rem;
}

.bakery{
    display:flex;
    justify-content: center;
    margin-top: -5rem;
    text-align: center;
}


/*Navigation*/
.nav-list{
    list-style: none;
    display: grid;
    /*grid-template-columns: repeat(5, 1fr);*/
    grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
    gap: 1.5rem; 
    margin-top: -16rem;
    align-items: center;
    justify-items: center;
    text-align: center;
}

.nav-list a{
    text-decoration: none;
    color: rgba(255, 142, 190, 1);
    font-family: Koulen ;
    font-size: 3rem;
}

.nav-list :hover{
    background: -webkit-linear-gradient(#FF8EBE,#D8C7FC);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
  
.nav-list :nth-child(2){
    grid-column: 2;
}

.nav-list :nth-child(3){
    grid-column: 4 ;
}

/*nav mobile*/
@media (max-width: 1300px){
    .nav-list{
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-top: -7rem;
        gap: 0.5rem;
    }
}


/*paragraph*/
p{
    font-size: 1.3rem;
    font-family: Kumbh Sans;
}

.discription{
    color: rgba(155, 111, 226, 1);
    inline-size: 47rem;
    padding-left: 3rem;
    line-height: 2rem ;
    text-indent: 2rem ;
    padding-top: 5rem;
    padding-bottom: 3rem;
}

.discription{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    margin-left: 7.5rem;
}

/*paragraph mobile*/
@media (max-width: 100em){
    .discription{
       inline-size: 45%;
       
    }
}

@media (max-width: 100em){
    .second-p{
       inline-size: 35%;
    }
}

@media (max-width: 50em){
    .discription{
        display: flex;
        align-items: center;
        inline-size: 50%;
    }
}


/*cartoon-photos*/
.cartoon-div{
    margin-top: -50rem;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    text-align: end;
}

.cartoon_img{
    border-radius: 5rem;
    width: 23rem;
    height: 23rem;
}

.cartoon_cap{
    color: rgba(231, 92, 150, 1);
    font-size: 2rem;
    font-family: luckiest guy;
}

/*photo mobile*/
@media (max-width: 75em){
    .cartoon-div{
        display: flex;
        align-items: center;
        margin: 0;
    }
}

/*roll-photos*/
.roll_img{
    border-radius:7rem;
    width: 21rem;
    height: 21rem;
}

.roll_cap{
    color:rgba(222, 177, 117, 1) ;
    font-size: 2rem ;
    font-family: luckiest guy ;
}

.roll-fig{
    margin-right: 10rem;
}

h2{
    font-family: luckiest guy;
    font-size: 5rem;
    color: rgba(155, 111, 226, 1);
}

.cart{
    border: 0;
    background-color:  rgba(255, 249, 240, 1);
    cursor: pointer;
}

.pink{
    color: hsl(216, 69%, 58%);
}

.header-shop{
    margin-left: 8rem;
    display: flex;
    gap: 1rem;
}

figcaption{
    font-size: 2rem;
    font-family: luckiest guy;
    color: rgba(231, 92, 150, 1);
}

.shop-cart{
    background-color: rgb(240, 182, 210);
    border-radius: 2rem;
    color:  rgba(155, 111, 226, 1) ;
    border: 0;
    font-size: 1.5rem;
    text-align: center;
    padding: 1rem 2rem ;
    cursor: pointer;
    font-family: Koulen;
}

.shop-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    justify-items: center;
    text-align: center;
    margin-bottom: 20rem;
}

.shop-container img{
    border-radius: 3rem;
    height: 14rem;
    width: 14rem;
}

/*shopping mobile*/
@media (max-width: 70em){
    .shop-container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 50em){
    .shop-container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}

/*cake form*/
.cust-cake-head{
    color:rgba(231, 92, 150, 1);
    font-size: 8rem;
}

.cust-cake-head{
    display: flex;
    justify-content: center;

}

/*cake photos*/
.div-cake img{
    border-radius: 3rem;
    height: 18rem;
    width: 18rem;
}

.div-cake{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
}


.order-form{
    color:  hsl(216, 69%, 58%) ;
    font-size: 6rem ;
    font-family: luckiest guy;
    margin-bottom: -0.2rem;
}

.name-label {
    display: flex;
    flex-direction: column;
    color: rgba(155, 111, 226, 1);
    font-size: 2.5rem;
    font-family: Koulen;
    
}

.name-label input{
    border: 3px solid rgba(231, 92, 150, 1); 
    height: 2rem;
    width: 12rem;
    border-radius: 2rem;
}

.date{
    color: rgb(201, 171, 250);
    font-family: Koulen;
    font-size: 1.5rem;
    text-align: center;
}

.del-question{
    color: rgba(155, 111, 226, 1);
    font-family: luckiest guy;
    font-size: 2.5rem;
    margin-bottom: 0rem;
}

.del-radio label{
    font-family: Koulen;
    color: hsl(216, 69%, 58%);
}

.del-text ::placeholder{
    color: hsl(216, 69%, 58%);
    font-family: Koulen;
    font-size: 1.5rem;
    text-align: center;
}

.del-text input{
    border: 3px solid rgba(231, 92, 150, 1); 
    border-radius: 2rem;
    height: 2rem;
    width: 12rem;
}

.design-p{
    color: rgba(231, 92, 150, 1);
    font-family: luckiest guy;
    font-size: 2.5rem;
    margin-bottom: 0rem;
}

textarea{
    background-color: rgb(201, 171, 250) ;
    border: 0;
    width: 20rem;
    height: 10rem;
    border: none;
    resize: none;
}

.design-p-2{
    color: hsl(216, 69%, 58%);
    font-family: luckiest guy;
    font-size: 2.5rem;
    margin-bottom: 0rem;
}

.design-p-3{
    color: rgba(231, 92, 150, 1);
    font-family: luckiest guy;
    font-size: 2.5rem;
    margin-bottom: 0rem;
}

.design-p-4{
    color: rgba(155, 111, 226, 1);
    font-family: luckiest guy;
    font-size: 2.5rem;
    margin-bottom: 0rem;
}

.del-radio{
    font-family: Koulen;
    color: hsl(216, 69%, 58%);
    font-size: 2rem;
}

.del-text ::placeholder{
    color: hsl(216, 69%, 58%);
    font-family: Koulen;
    font-size: 1.3rem;
}

.del-text input{
    border: 3px solid rgba(231, 92, 150, 1); 
    border-radius: 2rem;
    height: 2rem;
    width: 12rem;
}

.submit-form{
    border: none;
    background-color: rgba(231, 92, 150, 1);
    color: rgba(222, 177, 117, 1);
    font-family: Koulen;
    font-size: 1rem;
    border-radius: 1rem;
    cursor: pointer;
}

.text-con  {
    color: hsl(216, 69%, 58%);
    font-family: Koulen;
    font-size: 1rem;
}
   

/*form positioning*/

.survey-form{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -110rem;
}


/*.div-customer{
    display: flex;
    flex-direction: column;
   
}*/

/*.div-cake-radio{
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    
}*/


/*form moblie*/

@media (max-width: 100em ){
    .survey-form{
        margin-left: 45rem;
    }
}

@media (max-width: 50em ){
    .survey-form{
        display: flex;
        justify-content: center;
        margin-top: 0rem;
        margin-left: 0rem;
    }
}

.sub-button{
    display: flex;
    margin-top: 1rem;
}

/*cake moblie*/
.div-cake img{
display: inline-block;
}

@media (max-width: 50em){
    .div-cake {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-content: center;
      
    }
}

@media (max-width: 50em ){
    .cake-5{
     display: none;
   }
}

/*contact information*/


/*header*/
.contact-p{
    font-family: luckiest guy;
    font-size: 4rem;
    color: rgba(155, 111, 226, 1);
}

.contact-p{
    inline-size: 43rem;

}

/*contact message*/
.form-contact{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.div-contact{
    display: flex;
    justify-content: flex-end;
    align-content: flex-end;
    margin-top: -25rem;
}


/*contact message mobile*/
@media (max-width: 80em){
    .div-contact {
      display: flex;
      justify-content: center;
      margin: 0;
    }
}


.contact{
    font-family: Kumbh Sans ;
    font-size: 2.6rem;
    border-radius: 5px;
    border: none;
    background-color: rgb(201, 171, 250) ;
}

.contact-text{
    background-color: rgb(201, 171, 250) ;
    border-radius: 5px;
    border: 0;
    border: none;
    resize: none;
    font-family: Kumbh Sans ;
    font-size: 2.6rem;
    width: 100%;
}


.comment-textarea{
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    width: 30%;
    font-size: 2rem;
}

/*contact hours/number*/
.contact-p-2{
    font-size: 2.5rem;
    font-family:Koulen ;
    text-transform: uppercase;
    color: rgba(255, 249, 240, 1);
}

.contact-p-3{
    font-size: 2rem;
    font-family:Kumbh Sans;
    color: rgba(255, 249, 240, 1);
}

.div-hours{
    background-color: rgba(231, 92, 150, 1) ;
    text-align: center;
    width: 30%;
    border-radius: 2rem;
    padding: 0.1rem;
}

.ul-hours{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ul-hours{
    list-style: none;
}

.div-hours{
    margin-top: 2rem;
    float: right;
}

/*@media (max-width: 80em){
    .div-hours {
        float: none;
        display: flex;
        justify-content: center;
        align-content: center;
    }
}*/

/*map*/
.form-map-2{
 width: 40%;
 margin-bottom: 4rem;
}

.map-cap{
    font-size: 4rem;  
    font-family: Koulen;
}

@media (max-width: 80em){
    .map-cap {
        font-size: 2rem;
    }
}

/*footer*/
footer{
background-color: rgba(253, 199, 225, 1);
}

.footer-info{
    display: flex;
    gap: 1.5rem;
    width: 85%;
    height: 4rem;
    align-items: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    margin-left: 4rem;
}

.footer-info{
    background-color: rgb(201, 171, 250);
    color: rgba(255, 249, 240, 1);
    font-family: Kumbh Sans;
    font-size:1.8rem;
    text-transform: uppercase;

}

.footer-info-li{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    
}

.footer-info{
    list-style: none; /* Remove default bullets */
  }
  
.footer-info .footer-info-li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: rgba(255, 249, 240, 1); /* Change the color */
    width: 1em; /* Also needed for space (tweak if needed) */
    font-size: 4rem;
  }

  .footer-info{
    margin-bottom: -2.5rem;
  }


@media (max-width: 50em){
    .footer-info {
        font-size: 1.2rem;
    }
}

/*social media*/
.foot-social{
    font-family: luckiest guy;
    color: rgba(155, 111, 226, 1);
    font-size: 2.5rem;
}

.social-media{
    border: none;
    background-color: rgba(253, 199, 225, 1);
    cursor: pointer;
}

/*footer copy*/
.copyright{
    font-size: 1.3rem;
    font-family: Koulen;
    color:rgba(231, 92, 150, 1) ;
}
.copyright{
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
}