.heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.circle {
    border: 0.1rem solid rgb(210, 210, 210);
    border-radius: 100%;
    /* top right bottom left */
    padding: 0.25rem 0.5rem; 
    background-color: rgb(220,220,220);
}

button:hover {
    background-color: rgb(200, 200, 200);
}

#skills-body > ul {
    display: flex;
    gap: 0.5rem;
    list-style: none;
}

#skills-body > ul > li {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-radius: 0.5rem;
    background-color: rgb(228, 224, 224);
}

#personal-details-body {
    display: flex;
    flex-direction: column;
}

#personal-details-body > div {
    display: flex;
}

#personal-details-body > div > div {
    min-width: 5rem;
    padding: 0.2rem 0.2rem 0.2rem 0;
}

#education-body {
    display: table;
}

#education-body > div {
    display: table-row;
}

#education-body > div > div {
    display: table-cell;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
}

.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 5rem;
}

#form {
    width: 100%;
    max-width: 70rem;
    border-radius: 5rem;
    padding: 3rem;
    background-color: lightblue;
    box-shadow: rgba(0,0,0,0.45) 0 4px 8px 12px;
}

#form > h1 {
    text-align: center;
}

.form-section {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-bottom: 1rem;
}

.slide-in-left {
	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-10-27 16:3:27
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  
  .slide-out-right {
	-webkit-animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

  /* ----------------------------------------------
 * Generated by Animista on 2024-10-27 16:4:52
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-right
 * ----------------------------------------
 */
 @-webkit-keyframes slide-out-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
  }
  @keyframes slide-out-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
  }