body {
  background-color: #ddd;
}

.profile-area {
  padding: 80px 0;
  margin: auto;
}

.card {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border-radius: 15px;
}
.img1 img {
  height: 200px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  width: 100%;
}

.img2 img {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  /* border: 7px solid #fff; */
  margin-top: -80px;
}
.card:hover .img2 img {
  border-color: #0d6efd;
  transition: 0.7s;
}
.main-text {
  padding: 30px 0;
  text-align: center;
}
.main-text h2 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 20px;
  margin: 0 0 20px;
}
.main-text p {
  font-size: 16px;
  padding-bottom: 20px;
}

.vote {
  margin: auto;
  margin-bottom: 18px;
}

.bg {
  background-image: url("background.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* animasi */

h1 {
  font-size: 1.5em;
  text-align: center;
  padding: 70px 0 0 0;
  color: #EF8354;
  font-weight: 300;
  letter-spacing: 1px;
}

span {
  /* border: 2px solid #4F5D75; */
  padding: 10px;
}


/* Layout Styling */

#container {
  width: 100%;
  margin: 0 auto;
  padding: 50px 0 150px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}


/* Button Styles */

.button1 {
  display: inline-flex;
  height: 40px;
  width: 150px;
  border: 2px solid #0d6efd;
  margin: 20px 20px 20px 20px;
  color: #0d6efd;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

a {
  color: #0d6efd;
  text-decoration: none;
  letter-spacing: 1px;
}


#button-7 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-7 a {
  position: relative;
  left: 0;
  transition: all .35s ease-Out;
}

#dub-arrow {
  width: 100%;
  height: 100%;
  background: #0d6efd;
  left: -200px;
  position: absolute;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s ease-Out;
  bottom: 0;
}

#button-7 img {
  width: 20px;
  height: auto;
}

#button-7:hover #dub-arrow {
  left: 0;
}

#button-7:hover a {
  left: 150px;
}

@media screen and (min-width:1000px) {
  h1 {
    font-size: 2.2em;
  }
  #container {
    width: 50%;
  }
}

/* ------------------------------------------------------ */

/* Typewriter effect 1 */
@keyframes typing {
  0.0000%, 27.3488% { content: ""; }
  1.1395%, 26.2093% { content: "K"; }
  2.2791%, 25.0698% { content: "Ke"; }
  3.4186%, 23.9302% { content: "Ket"; }
  4.5581%, 22.7907% { content: "Ketu"; }
  5.6977%, 21.6512% { content: "Ketua"; }

  30.7674%, 51.2791% { content: ""; }
  31.9070%, 50.1395% { content: "P"; }
  33.0465%, 49.0000% { content: "Pr"; }
  34.1860%, 47.8605% { content: "Pre"; }
  35.3256%, 46.7209% { content: "Presi"; }
  36.4651%, 45.5814% { content: "Presid"; }
   37.6047%, 44.4419% { content: "Preside"; }
  38.7047%, 43.3419% { content: "Presiden"; }
  /*39.8047%, 42.2419% { content: "wakil ke"; }*/
  /*40.8074%, 41.3419% { content: "wakil ket"; }*/
  /*41.9047%, 40.2419% { content: "wakil ketu"; }*/
  /*42.9074%, 39.1419% { content: "wakil ketua"; } */*/
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typewriter {
  --caret: currentcolor;
}

.typewriter::before {
  content: "";
  animation: typing 10.5s infinite;
}

.typewriter::after {
  content: "";
  border-right: 1px solid var(--caret);
  animation: blink 0.5s linear infinite;
}

.typewriter.thick::after {
  border-right: 1ch solid var(--caret);
}

.typewriter.nocaret::after {
  border-right: 0;
}


@media (prefers-reduced-motion) {
  .typewriter::after {
    animation: none;
  }
  
  @keyframes sequencePopup {
    0%, 100% { content: "Ketua"; }
    25% { content: "Presiden"; }
  }

  .typewriter::before {
    content: "Ketua";
    animation: sequencePopup 12s linear infinite;
  }
}

/**/