*{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Mocha';
    src: url(font/CSMocha-Regular.otf) format(opentype);
}

body{
        background: linear-gradient(236deg,#fc9cb2,#cb5349,#dbaa58,#dce19e);
        background-size: 240% 240%;
        animation: gradient-animation 40s ease infinite;
      
      
      @keyframes gradient-animation {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
    
      
}
}

@media(max-width: 768px) {
  nav{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
  
  }    
  }


.navbar{
    padding: auto;
    background-color: #edc0389e !important;
}

h5{
  font-family: 'Mocha';
  color: #f0b28c !important;
  -webkit-text-stroke: #700d26 1px !important;
  text-transform: uppercase;
  font-size: 2rem;


}

h1{
    font-family: 'Mocha';
    font-size: 5rem;
    color: #e5c961;
    -webkit-text-stroke: #cb5349 2px;
    text-shadow: #c24b14  5px 4px;
}

#imgLogo {
    width: 5.5rem;
    outline: groove 4px rgb(218, 143, 68);
}

/* button */
.btn {
  position: relative;
  color: #c24b14;
  border: none;
  text-transform: uppercase;
  z-index: 2;
}
.btn:before,
.btn:after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  border: 1px solid;
  
  z-index: -1;
  transition: all 0.3s ease;
}
.btn:before{
   top: 0;
   left: 0;
   border-bottom-color: transparent;
   border-right-color: transparent;
   border-top-color: orangered;
   border-left-color: orangered;
}
.btn:after{
   bottom: 0;
   right: 0;
   border-top-color: transparent;
   border-left-color: transparent;
   border-bottom-color: orangered;
   border-right-color: orangered;
}
.btn:hover:before,
.btn:hover:after {

  border-color: orangered;
  height: 100%;
  width: 100%;
  box-shadow: 0 0 5px orangered, 0 0 5px orangered inset;
}

.btn:hover{
    color: #ebe0cf !important;
    background-color: #e5ae39;
}

/* submit button */

#submitBtn:hover{
  border-color: orangered 1px !important;
  background-color: #f58a58 !important;
  color: #ebe0cf !important;
  /* height: 100%;
  width: 100%; */
  box-shadow: 0 0 5px orangered, 0 0 5px orangered inset !important;
}





/* card */
.card {
  height: 40rem;
  object-fit: co;
}

#cardPet{
  object-fit: cover;
  height:50% ;

}



#imgProfile {
 height: 4rem;
 outline: dotted 4px rgb(229, 102, 63);
}


input, textarea {
  background-color: rgba(216, 180, 48, 0.582) !important;
  color: #700d26 !important;
}



/* login iframe img*/

.cat{
  mix-blend-mode: color-burn;
  position: absolute;
  z-index: 2;
  margin-top: -31px;
  margin-left: 74px;
}

.dog{
  margin-top: -200px;
  margin-right: -1400px;
 /* mix-blend-mode: color-burn; */
}


/* register section */

#reg-info{
  height: 50%;
  margin-top: 80px;
  color: #d35c52;
  padding: 5rem 3rem;
  /* width: 50%; */
  font-weight: 500;
 
}

.reg-welc{
  font-family: 'Mocha';
  color: #f4c663 !important;
  -webkit-text-stroke: #953a32 1px !important;
  /* text-transform: uppercase; */
  font-size: 2.5rem;
  text-shadow: #cb5349 3px 5px;

}

#start{
  font-weight: 600;
  -webkit-text-stroke: #6f3c18 0.3px !important;
  font-size: 1.6rem;
  letter-spacing: 2px;
  text-shadow: #6f2c26 0 0 3px;
  color: #f7db60 !important;

}

#dog2{
  position: absolute;
 margin-top: -34px;
 margin-right: 150px;
 
}

/*responsiveness register form */

/* Small screens  */
@media (max-width: 576px) {
  #registration-form {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
  }

  .row{
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  #reg-info{
 
    color: #ead360;
    
  }

#dog2{
  margin-left: -99px;
  margin-bottom: 5px;
}
}

/* Medium screens  */
@media (max-width: 768px) {
  #registration-form {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
  }

  .row{
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  #dog2{
    margin-left: -99px;
    margin-bottom: 35px;
  }
}

/*responsiveness login form */

/* Medium screens  */

@media (max-width: 768px) {
  .cat{
    margin-top: -52px;
    margin-left: -61px;
  }

  #login-title{
    margin-right: 250px;
    margin-bottom: -150px;

  }
  
  .dog{
    margin-top: -200px;
    margin-right: -590px;
   /* mix-blend-mode: color-burn; */
  }
}



/* Small screens  */
@media (max-width: 576px) {
  .cat{
  
    margin-top: -67px;
    margin-left: 14px;
    
  }
  
  .dog{
    margin-top: -200px;
    margin-right: -410px;
    height: 70% !important;
    width: 70% !important;

  }

  #login-title{
    margin-right: 60px;
    margin-bottom: -150px;

  }
}