@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");

body {
  background-color: #747474;
  font-family: "Poppins", sans-serif;
  /* font-family: sans-serif; */
}
h1,
h3,
p {
  margin: 0;
}
.rangkuman {
  padding-top: 40px;
}
.rangkuman h3 {
  margin-top: 5px;
  margin-bottom: 20px;
}
.rangkuman div {
  padding-block: 10px;
}
.rangkuman a {
  margin-inline: 5px;
  margin-top: 10px;
  color: black;
}
.table td {
  width: 50%;
  vertical-align: top;
}
.container {
  margin-block: 65px;
  margin-left: 75px;
  margin-right: 75px;
  background-color: white;
  border-radius: 10px;
}
.header {
  padding: 20px;
}
.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}
.header h1 {
  margin-bottom: 10px;
}
.table {
  padding-top: 100px;
  padding-bottom: 50px;
  padding-inline: 50px;
}
.img {
  text-align: center;
  /* margin-left: 100px; */
}
.img img {
  width: 256px;
  padding: 20px;
  background-color: #cecece;
  border-radius: 50%;
  transition: 0.5s;
}
.img img:hover {
  transition: 0.5s;
  background-color: #747474;
}
.link-group {
  width: 100%;
  text-align: center;
}
.link-group i {
  width: 20px;
}
.link-group a {
  width: 29%;
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
  color: black;
  border: 4px solid #747474;
  border-radius: 10px;
  margin-block: 5px;
  margin-inline: 5px;
  padding: 10px;
  transition: 0.3s;
}
.link-group a:hover {
  background-color: #747474;
  color: white;
  transition: 0.3s;
}
iframe {
  width: 45%;
  height: 16%;
  border: none;
  border-radius: 25px;
  margin-inline: 10px;
  margin-block: 10px;
}
.bar {
  width: 95%;
  height: 20px;
  background-color: #747474;
  border-radius: 10px;
  margin-block: 5px;
  padding: 10px;
  display: inline-block;
}
.percentage-60,
.percentage-70 {
  width: 0%;
  height: 100%;
  background-color: white;
  border-radius: 5px;
  transition: 2s;
}
.bar:hover > .percentage-60 {
  width: 60%;
  transition: 0.5s;
}
.bar:hover > .percentage-70 {
  width: 70%;
  transition: 0.5s;
}
