body{
  margin: 0;
    height: 100vh;
    background-image: linear-gradient(to bottom right, orange, white, green);
}
.profilepic{
  display: flex;
  flex-direction: column;
  align-items: center;
  /* width: 250px; */
}

.bottomalign{
  bottom: 0;
    position: absolute;
    margin-bottom: 10px;

}
.vande{
  font-size: 40px;
  text-align: center;
  color: darkgreen;
}
.date{
  text-align: center;
}
.day {
  font-size: x-large;
  font-weight: bold;
  margin-left: 15px;
  background: -webkit-linear-gradient(#ef0c0c, #5e4caf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.imgbanner{
  display: flex;
  flex-direction: column;
}
.bgimage{
  background-image: url('bg.webp');
  height: 100vh;
    background-position: center;
    background-size: cover;
  }
.mainimage{
  background-image: url('mainbg.webp');
  height: 100vh;
      background-position: center;
      background-size: cover;
  }

  .congrats{
    display: flex;
    justify-content: center;
    font-size: 40px;
    color: #dff601;
    font-family: 'Arial', sans-serif;
    position: relative;
    animation: fire 1s ease-in-out infinite;
  }
  .message{
    font-size: 15px;
    margin: 4px;
  }
  .msg{
    border: 1px dotted white;
    margin-right: 2px;
    height: 300px;
  }
  .default{
    text-align: center;
    background: cyan;
    margin-bottom: 1px !important;
  }


 

  @keyframes fire {
    0% {
        text-shadow: 0 0 10px rgb(255, 165, 0), 0 0 20px rgb(255, 255, 255), 0 0 30px rgb(0, 128, 0);
        transform: translateY(0);
    }
    50% {
        text-shadow: 0 0 20px #f00, 0 0 30px #f00, 0 0 40px #f00;
        transform: translateY(-5px);
    }
    100% {
        text-shadow: 0 0 10px rgb(255, 165, 0), 0 0 20px rgb(255, 255, 255), 0 0 30px rgb(0, 128, 0);
        transform: translateY(0);
    }
}



  @keyframes congratulation {
      0%   {color:orange; font-size: 50px; }
      50%  {color:white; font-size: 30px;}
      100% {color:rgb(247, 247, 12); font-size: 50px;}
    }
    .profile-container img{
      border-radius: 50%;
      border: 6px dashed #fbe60f;
    }

    .profile-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 200px;
  }
  
  .profile-name {
    font-size: 25px;
    color: #fff;
    margin-left: 10px;
    text-align: center;
    margin-bottom: 0 !important;
  }
  .maintext{
    text-align: center;
  width: 230px;
  }
  #copyButton{
    height: 40px;
    margin-bottom: 10px;
    background: #3e2bb7;
    color: white;
    font-size: 17px;
    border: 1px solid black;
    border-radius: 8px;
  }

  #copyButton::before{
    content: "\f0c1";
      font-family: fontawesome;
      font-size: 15px;
  }

    .whatsapp{
      height: 40px;
      margin-bottom: 10px;
      background: #2BB741;
      color: white;
      font-size: 17px;
      border: 1px solid black;
      border-radius: 8px;
    }
    .whatsapp::before {
      content: "\f232";
      font-family: fontawesome;
      font-size: 20px;
  }
  .edit{
    height: 40px;
    margin-bottom: 10px;
    background: #FF5722;
    color: white;
    font-size: 17px;
    border: 1px solid black;
    border-radius: 8px;
  }
  .edit::before {
    content: "\f044";
    font-family: fontawesome;
    font-size: 20px;
}
  .homeBtn a{
    color: white;
    text-decoration: none;
  }
  #submit-message {
    display: none;
    color: green;
    font-weight: bold;
    text-align: center;
}
.d{
  display: none !important;
}
.b{
  display: block;
}
.editBtn{
  position: absolute;
margin-top: 20px;
background: azure;
text-decoration: none !important;
width: 16%;
text-align: center;
border-radius: 10px;
}

 /* Define the spinner container */
 .spinner {
  border: 8px solid white;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 1s linear infinite;
    margin: auto;
}

/* Define the keyframe animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.yourname {
  position: fixed;
  bottom: 75px;
  left: 10px;
  right: 10px;
  width: 95%;
  padding: 10px;
  background-color: #a3ecad;
  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  place-content: center;
}

#sticky-form-container {
  position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: 95%;
    padding: 10px;
    background-color: #f0f0f0;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#name-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-right: 10px;
  width: 95%;
}

#submit-button {
  width: 80px;
    font-size: larger;
    padding: 10px;
    background-color: #4caf50;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    animation: moveLeftRight 1s linear infinite;
}

@keyframes moveLeftRight {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}