* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header {
  display: flex;
  justify-content: center;
  text-align: center;
}
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 10%;
  background-color: #030303;
}
.menu ul {
  display: flex;
  gap: 30px;
  list-style: none;
}
.menu ul li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}
.menu :hover {
  color: rgb(41, 144, 192);
}
.content {
  display: flex;
  min-height: 663px;
}
.content a {
  color: #577cb0;
  text-decoration: none;
  font-size: medium;
}
.leftbar h3 :hover {
  color: white;
}
.leftbar {
  width: 10%;
  background-color: #27405f;
  padding: 20px;
}
.konten {
  width: 80%;
  background-color: white;
  padding-top: 50px;
}
.rightbar {
  width: 10%;
  background-color: #27405f;
  padding: 20px;
  text-align: right;
}
.footer {
  background-color: #0984e3;
  text-align: center;
}