*{
    margin: 0px;
    padding: 0px;
    font-family: 'Courgette';
}

/**** carousel ***/
.carousel-item {
  justify-content: center;
  text-align: center;
  padding-top: 10px;
}
  
/* navbar  **/
.navbar-brand {
  font-size: 50px;
  font-family: 'Pinyon Script', cursive;
}

.navbar-toggler{
  background-color: #fa38d0;
}

 /***********  BUTTON  *********/
.btn{
  background-color: #ffc3f3;
  color: black;
}
  
  /**** H1 ****/
h1{
    font-family: 'Pinyon Script';
}
  
  /**** font awsom no line under the trolley ****/
.fa-regular{
    text-decoration: none;
}

.bgi{
  background: rgb(128,43,120);
  background: linear-gradient(180deg, rgba(128,43,120,1) 0%, rgba(148,77,142,1) 2%, rgba(158,94,153,1) 4%, rgba(169,113,165,1) 7%, rgba(181,132,177,1) 10%, rgba(189,145,185,1) 13%, rgba(255,255,255,1) 100%);
}
   
/**** transparent log in ****/
.content{
    border-radius: 10px;
    padding: 20px 15px;
    margin-top: 50px;
    margin-bottom: 45px;
    box-shadow: -3px -3px 9px #3f3f3fa2,
    3px 3px 7px rgba(58, 58, 58, 0.671);
}
  
.content .text1{
    font-size: 50px;
    color: black;
    font-family: 'Pinyon Script';
    text-align: center;
}
  
.content .field{
    height: 50px;
    width: 100%;
    display: flex;
    position: relative;
    margin-bottom: 10px;
}
  
.field input{
    height: 100%;
    width: 100%;
    padding-left: 20px;
    font-size: 18px;
    outline: none;
    border: none;
    color:black;
    border: 2px solid rgba(255, 40, 191, 0.438);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
}
  
.field input::placeholder{
    color: black;
    font-weight: none;
}
  
/** ERROR MESSAGE OF THE FORM */
.error{
  color: red;
}


/**button identifier*****/
.button{
    margin: 25px 0 0 0;
    width: 50%;
    height: 50px;
    color: black;
    font-family: 'Pinyon Script';
    font-size: 30px;
    border: 2px solid rgba(255, 40, 191, 0.438);
    border-radius: 8px;
    background: rgba(105, 105, 105, 0);
    margin-top: 2px;
    margin-bottom: 15px;
    border-radius: 8px;
    background-color: rgba(253, 193, 240,0.5);
}
   
.icon-button{
    margin-top: 15px;
}

.icon-button span{
    padding-left: 17px;
    padding-right: 17px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: rgba(244, 247, 250, 0.795);
    border-radius: 5px;
    line-height: 30px;
    background: rgba(252, 143, 216, 0.164);
    backdrop-filter: blur(10px);
}
  
button:hover,
.icon-button span:hover{
    background-color: #fc77da8c;
}