:root {
  --maincolor: rgba(94, 13, 197, 1);
  --secondaryColor: rgba(41, 2, 90, 1);
  --acsentColor: #de1abe;
}
body {
  background-color: var(--maincolor);
  min-height: 900px;
}
/* Navbar */
.nav-link.active {
  color: var(--acsentColor) !important;
  font-weight: 700;
}
.nav-dark {
  background-color: var(--secondaryColor) !important;
  z-index: 100;
  transition: 0.5s;
}
@font-face {
  font-family: 'poppins-regular';
  src: url('font/Poppins-Regular.ttf');
}
#navbarNav {
  font-family: 'poppins-regular';
}
/* akhir nav */
section h1 {
  color: #fff;
}

/* akhir slider */
/* Hero _jumbo */
.vektor {
  box-shadow: 30px;
  position: relative;
  animation: bounce 1s infinite alternate; /* Animasi dengan nama 'bounce' */
}
.card {
  position: relative;
  animation: bounce 1s infinite alternate; /* Animasi dengan nama 'bounce' */
}
@keyframes bounce {
  from {
    top: 0; /* Mulai dari posisi atas */
  }
  to {
    top: 10px; /* Pindah ke bawah sebanyak 10 piksel */
  }
}

#hero {
  color: #fff;
  min-height: 100vh;
  padding-top: 75px;
}
#hero h1 {
  font-size: 2rem;
}
#hero h2 {
  font-weight: 300;
}
#hero p {
  font-size: 1.1rem;
  font-weight: 300;
}
.color-acsent {
  color: var(--acsentColor);
}
.cv {
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
}
.sosmed-icon1 {
  margin-right: 7rem;
  margin-bottom: 10px;
}
/* akhir Hero */
/* CTA */
.btn-custom1 {
  background-color: var(--acsentColor);
  text-align: center;
  color: #fff;
  min-width: 150px;
  height: 45px;
  font-weight: 700;
  font-size: 1.2rem;
}
.btn-custom1 :hover {
  box-shadow: 0 0 5px rgb(255, 166, 0, 0.8);
}

/* AKhir CTA */
/* About */
hr {
  width: 35%;
  height: 10px;
  color: var(--acsentColor);
  margin: auto;
  border: 30px var(--acsentColor);
  opacity: 100%;
}
#About {
  min-height: 300px;
  width: 100%;
  background-color: var(--secondaryColor);
  color: #fff;
  padding-top: 150px;
  padding-bottom: 200px;
  margin-bottom: 80px;
}
/* Akhir About */
/* Skill */
#skill {
  min-height: 600px;
  width: 100%;
  color: #fff;
}
#skill img {
  width: 12%;
  margin: 10px;
}
#skill .card {
  background-color: #6807e2;
  height: 340px;
  border-radius: 5px;
}
#skill .card:hover {
  background-color: var(--acsentColor);
}
.skill-konten {
  margin-top: 120px;
}
/* Akhir SKill */
/* Certfikat */
#Certifikat {
  margin-top: -170px;
  padding-top: 270px;
  padding-bottom: 80px;
  background-color: var(--secondaryColor);
}
#Certifikat p,
a {
  color: #fff !important;
}
#Certifikat img {
  width: 49%;
  padding: 10px;
}
/* AKhir Certifikat */
@font-face {
  font-family: 'poppins-bold';
  src: url('font/Poppins-Bold.ttf');
  margin: auto;
  opacity: 100%;
}
#title2 {
  font-family: 'poppins-bold';
  font-size: xx-large;
}
@font-face {
  font-family: 'poppins-extrabold';
  src: url('font/Poppins-ExtraBold.ttf');
}
#title1 {
  font-family: 'poppins-extrabold';
}
@font-face {
  font-family: 'poppins-regular';
  src: url('font/Poppins-Regular.ttf');
}
@media (max-width: 360px) {
  p {
    font-size: 1%;
  }
}

@font-face {
  font-family: 'poppins-medium';
  src: url('font/Poppins-Medium.ttf');
}
/* Portofolio */
#Portofolio {
  padding: 80px 10px;
  color: #fff;
}
/* Akhir Portofolio */
/* footer */
#footer {
  margin-top: -150px;
  background-color: var(--secondaryColor);
  padding-top: 50rem;
}
.sosmed-icon2 {
  margin-right: 7rem;
  margin-bottom: 10px;
  padding-bottom: 2rem;
}
/* Akhir Footer */