#app {
  background-color: rgb(13, 13, 59);
}

.pembuka {
  display: flex;
  align-items: center;
  height: 100vh;
}
.pembuka .header {
  padding: 2rem;
}
.pembuka .header p {
  color: rgb(129, 183, 255);
  font-weight: 600;
}
.pembuka .header h1 {
  color: white;
  margin-top: -18px;
}
.pembuka .header hr {
  height: 0.5px;
  color: white;
}
.pembuka .header .bio {
  color: rgb(177, 177, 177);
  font-weight: 400;
  font-size: 16px;
}
.pembuka .swipe {
  animation: swipeFly 2s infinite;
  transition: ease-in-out;
}
.pembuka .swipe a {
  text-decoration: none;
  color: rgb(149, 161, 201);
  font-size: 14px;
}
.pembuka .swipe a p {
  margin-top: 5px;
}
.pembuka .swipe a:hover {
  color: yellow;
  transition: 0.3s;
}
@keyframes swipeFly {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.kotak-animasi {
  height: 5px;
  width: 100%;
  border-radius: 5px;
  animation: kotakWarna 6s infinite;
  transition: ease-in-out;
}

@keyframes kotakWarna {
  0% {
    background-color: rgb(73, 143, 235);
  }
  20% {
    background-color: rgb(250, 203, 74);
  }
  40% {
    background-color: rgb(114, 9, 233);
  }
  60% {
    background-color: rgb(41, 212, 235);
  }
  80% {
    background-color: rgb(0, 117, 226);
  }
  100% {
    background-color: rgb(101, 168, 255);
  }
}
.about h1 {
  color: rgb(120, 145, 226);
  font-size: 22px;
}
.about .card {
  background-color: rgb(45, 44, 92);
}
.about .card .card-body {
  margin: 10px;
}
.about .card .card-body img {
  border: 3px solid rgb(140, 139, 179);
}
.about .card .card-body p {
  color: rgb(207, 207, 207);
  font-weight: 400;
  font-size: 16px;
}
.about .card .card-body p span {
  color: rgb(255, 244, 85);
  font-weight: 600;
}
.about .skills {
  margin-bottom: 100px;
}
.about .skills .card .card-body .icon-circle {
  width: 40px;
  height: 40px;
  background-color: rgb(153, 153, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin-top: -45px;
  margin-left: -10px;
  border-radius: 50%;
}
.about .skills .card .card-body h1 {
  color: rgb(228, 230, 255);
  font-size: 20px;
  margin-top: 5px;
}
.about .skills .card .card-body .card-item {
  display: flex;
  justify-content: end;
  align-items: center;
  color: rgb(187, 187, 187);
  margin-left: 20px;
  margin-top: 5px;
  font-size: 15px;
  float: left;
}
.about .experience .card {
  max-width: 350px;
  margin-left: 20px;
  margin-right: 20px;
}
.about .experience .card .card-body {
  margin: 0;
}
.about .experience .card .card-body .exp-detail h1 {
  font-size: 18px;
  margin-bottom: 2px;
  color: rgb(241, 241, 241);
}
.about .experience .card .card-body .exp-detail .tempat {
  font-weight: 600;
  font-size: 15px;
  color: rgb(157, 191, 255);
}
.about .experience .card .card-body .exp-detail .waktu {
  font-weight: 300;
  font-size: 14px;
}
.about .edu .circle-edu {
  background-color: rgb(153, 153, 255);
  width: 50px;
  height: 50px;
}
.about .edu .items-edu h1 {
  font-size: 18px;
  color: rgb(225, 229, 255);
}
.about .edu .items-edu .jurusan {
  font-size: 16px;
  margin-top: -5px;
  font-weight: 500;
  color: rgb(160, 169, 211);
}
.about .edu .items-edu .waktu {
  margin-top: -12px;
  margin-bottom: 0px;
  font-size: 15px;
  color: rgb(230, 230, 230);
}
.about .competition .circle-competition {
  background-color: rgb(153, 153, 255);
  width: 50px;
  height: 50px;
}
.about .competition .items-competition h1 {
  font-size: 18px;
  color: rgb(225, 229, 255);
}
.about .competition .items-competition .tempat {
  font-size: 16px;
  margin-top: -5px;
  font-weight: 500;
  color: rgb(160, 169, 211);
}
.about .competition .items-competition .waktu {
  margin-top: -12px;
  margin-bottom: 0px;
  font-size: 15px;
  color: rgb(230, 230, 230);
}

.contact h1 {
  color: rgb(240, 240, 240);
}
.contact p {
  color: rgb(175, 175, 175);
  margin-top: 20px;
}
.contact .sosial .sosial-media a {
  color: rgb(144, 155, 190);
  transition: 0.4s;
}
.contact .sosial .sosial-media a:hover {
  color: rgb(56, 59, 255);
}

.footer i {
  color: rgb(204, 36, 36);
}

.btn-biru {
  background-color: rgb(255, 244, 85);
  font-weight: 500;
  color: rgb(43, 43, 43);
}
.btn-biru:hover {
  background-color: rgb(245, 245, 245);
  color: black;
}

.btn-kuning {
  background: none;
  border: 1px solid rgb(255, 230, 0);
  font-weight: 500;
  color: rgb(255, 230, 0);
}
.btn-kuning:hover {
  background-color: rgb(245, 245, 245);
  border: 1px solid rgb(245, 245, 245);
  color: black;
}

.kotak-skill {
  background-color: rgb(29, 29, 255);
  padding: 5px 10px;
  margin: 3px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  border-radius: 8px;
}

.green-circle {
  width: 5px;
  height: 5px;
  background-color: rgb(0, 255, 213);
  border-radius: 50%;
  border: none;
  margin-right: 10px;
  margin-top: 2px;
}/*# sourceMappingURL=app.css.map */