* {
  margin: 0;
  padding: 0;
}

body {
  font-family: poppins, sans-serif;
  background-color: whitesmoke;
}

p,
h1,
h3,
h2,
h4 {
  color: rgb(16, 16, 16);
}

/* navbar  */
nav {
  display: flex;
  width: 100%;
  align-items: center;
  height: 80px;
  padding: 30px;
  box-sizing: border-box;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 9999;
  box-shadow: 1px 1px 3px;
  background-color: #2d3250;
}

nav ul {
  display: flex;
  list-style: none;
  justify-content: space-between;
  width: 50%;
}

nav ul li a {
  text-decoration: none;
  color: white;
  font-size: 1.1em;
  font-weight: bold;
  transition: .2s;
}

.nav-logo-title {
  display: flex;
  align-items: center;
}

.nav-logo-title img {
  background-image: url(https://img.freepik.com/free-vector/letter-s-box-logo-design-template_474888-3345.jpg?t=st=1713316871~exp=1713320471~hmac=5911365ad16f4bacc0e4ab228f12935e58f2e09d7503365684d61aaf311c9d99&w=1060);
  background-size: cover;
  width: 40px;
  height: 40px;
  border-radius: 100%;
}

.nav-logo-title a {
  margin-left: 20px;
  text-decoration: none;
  color: #bfd7ed;
  font-weight: 600;
  font-size: 2em;
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.681);
}
nav ul li a:hover {
  background-color: rgba(245, 245, 245, 0.655);
  padding: 5px;
  border-radius: 4px;
}
/* header */
#header {
  padding: 30px;
  display: flex;
  box-sizing: border-box;
  height: 70vh;
  background-image: url(https://img.freepik.com/free-vector/realistic-galaxy-background_23-2148991322.jpg?t=st=1713188922~exp=1713192522~hmac=13ae06bf3a5cdb639ef2667e2d1c5224fd85a320cb85ac522c9840c2598ed4e1&w=1800);
  border-bottom: 5px solid #9290c3;
  position: relative;
}
.header-texts {
  width: 80%;
  padding-right: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-texts h1,
.header-texts h3,
.header-texts p {
  margin-bottom: 40px;
  color: whitesmoke;
}
.header-texts h1 {
  font-size: 2.5em;
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.681);
}

.header-texts h3 {
  font-size: 1.7em;
}
.header-filler {
  background-color: #535c91;
  width: 200px;
  margin-left: 30px;
  height: 200px;
  border-radius: 100%;
}

.header-filler div {
  background-image: linear-gradient(red, yellow);
  width: 170px;
  height: 170px;
  border-radius: 100%;
  position: relative;
  top: 50px;
  left: -20px;
}

/* main content */
.content-aside {
  display: flex;
  padding: 30px;
  list-style: none;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 90px;
}

.content-first {
  margin-bottom: 20px;
}

.content-first p,
.content-second p,
.content-second h4 {
  margin-top: 10px;
}

#content {
  width: 80%;
  box-sizing: border-box;
}

/* aside main content */
aside {
  width: 20%;
  margin-left: 20px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 20px;
  height: 500px;
  background-color: #2d3250;
}

aside ul {
  list-style: none;
}

aside ul li a {
  text-decoration: none;
  margin: 10px;
  background-color: #fff;
  display: block;
  color: black;
  width: 50%;
  padding: 3px;
  border-radius: 5px;
  transition: .2s;
}
aside ul li a:hover {
  background-color: #ffffff6c;
}
aside h2 {
  margin-bottom: 10px;
  margin-top: 20px;
  color: whitesmoke;
}

/* content table */
.articles table {
  background-color: #2d3250;
}
.row-first {
  display: table;
  box-sizing: border-box;
  border-spacing: 30px;
}

.row-first td {
  box-sizing: border-box;
  border: 2px solid black;
  padding: 15px;
  border-radius: 10px;
  background-color: #fff;
  transition: 0.3s;
}
.row-second {
  display: flex;
  flex-direction: column;
}
.row-first td img {
  display: block;
  height: 220px;
  width: 100%;
  margin-bottom: 15px;
}
.row-first td a {
  text-decoration: none;
  color: gray;
}
.row-first td:nth-child(1) img {
  background-size: cover;
  background-image: url(https://img.freepik.com/free-photo/closeup-developer-hands-typing-code-keyboard-while-looking-computer-screens-with-programming-interface-software-programmer-sitting-desk-with-clipboard-writing-algorithm_482257-33551.jpg?t=st=1713189075~exp=1713192675~hmac=72ec36ed76984a342b5eefbf9f7e72e12bd3e2c0b9e5b21d077d9879a9293d6b&w=2000);
}

.row-first td:nth-child(2) img {
  background-size: cover;
  background-image: url(https://img.freepik.com/free-photo/coding-man_1098-18084.jpg?t=st=1713189204~exp=1713192804~hmac=2d8ef0f3b327caf86e762e54ada5a9d7d07cab366a4e1454ba2d6efbba9ee6c3&w=1800);
}
.row-first td:nth-child(3) img {
  background-size: cover;
  background-image: url(https://img.freepik.com/free-photo/professional-programmer-working-late-dark-office_1098-18705.jpg?t=st=1713189289~exp=1713192889~hmac=8ac0ec965487a76da1e2bf80a0cf6ad95bd9205358d9d6d81c7abe19ef0abf89&w=1800);
}
.row-second td {
  padding: 30px;
}
.article-long {
  text-align: center;
}
.article-long h3 {
  margin-bottom: 10px;
  font-size: 1.5em;
}
.article-long h3,
.article-long p {
  color: whitesmoke;
}
.row-second td:nth-child(2) {
  display: flex;
  justify-content: center;
}
.row-second td:nth-child(2) img {
  display: none;
}

.row-first td:hover {
  transform: translateY(-10px);
  box-shadow: 2px 2px 5px rgba(245, 245, 245, 0.535);
}
/* content 2 */

.creativity {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
}

.mini-one img,
.mini-two img,
.mini-three img,
.mini-four img {
  width: 200px;
  max-height: 200px;
  border-radius: 15px;
  box-shadow: 3px 5px 3px 3px rgba(0, 0, 0, 0.7);
  transition: 0.3s;
}
.mini-one img {
  background-image: url(https://img.freepik.com/free-psd/web-pages-mock-up_1307-360.jpg?t=st=1713197091~exp=1713200691~hmac=2d715d209a90f0d10ff9bce352a2226adcbda98c0fa59931873fa8d2855a29fe&w=1060);
  background-size: cover;
}
.mini-two img {
  background-image: url(https://img.freepik.com/free-photo/rear-view-programmer-working-all-night-long_1098-18697.jpg?t=st=1713316369~exp=1713319969~hmac=347d14ef7466915ed621733fff340fcf43bd357435c379e5f964202b93a27c14&w=1800);
  background-size: cover;
}
.mini-three img {
  background-image: url(https://img.freepik.com/free-photo/caucasian-software-developer-signaling-screen-data-breach-deactivated-security-system-tech-engineer-observing-multiple-system-security-breaches-caused-by-overloaded-storage-servers_482257-40529.jpg?t=st=1713316469~exp=1713320069~hmac=4b4cf16f1a9b615b313bb2e8b0af67003cde37fa4497a9ae6786086171c834b1&w=1800);
  background-size: cover;
}

.mini-four img {
  background-image: url(https://img.freepik.com/free-photo/side-view-boy-using-laptop_23-2147782837.jpg?t=st=1713316564~exp=1713320164~hmac=0d9964922c9d9090deaa62afad5b6586bed341eb610532aea42d3804d2dda7f3&w=1800);
  background-size: cover;
}
.mini-content {
  width: 80%;
  border: 2px solid black;
  padding: 20px;
  margin-left: 10px;
  margin-right: 10px;
  height: 320px;
  box-sizing: border-box;
  border-radius: 20px;
  height: 200px;
  overflow-x: auto;
  transition: .3s;
}


.mini-content p {
  margin-top: 10px;
}
.mini-one {
  display: flex;
  margin-bottom: 40px;
  justify-content: space-between;
  transition: 0.3s;
}

.mini-two {
  display: flex;
  margin-bottom: 40px;
  justify-content: space-between;
  flex-direction: row-reverse;
  transition: 0.3s;
}

.mini-three {
  display: flex;
  margin-bottom: 40px;
  justify-content: space-between;
  transition: 0.3s;
}

.mini-four {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 40px;
  transition: 0.3s;
}

.mini-four:hover .mini-content,
.mini-three:hover .mini-content,
.mini-two:hover .mini-content,
.mini-one:hover .mini-content {
  transform: scale(1.02);
  box-shadow: 3px 5px 3px 3px rgba(0, 0, 0, 0.7);
}

/* footer */
footer {
  display: flex;
  background-color: #2d3250;
  box-sizing: border-box;
  justify-content: space-between;
  padding: 10px;
  border-top: 5px solid #9290c3;
}
footer h3,
footer p {
  color: whitesmoke;
}
.footer-logo {
  width: 30%;
  display: flex;
  padding: 30px;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.footer-form {
  width: 40%;
  box-sizing: border-box;
  border-left: 3px solid#D4F1F4;
  border-right: 3px solid#D4F1F4;
  padding: 20px;
}

.footer-form p {
  margin-bottom: 10px;
  color: white;
  font-size: 1.1em;
  font-weight: bold;
}

.footer-form label {
  color: white;
}

#name {
  width: 98%;
  height: 20px;
  padding: 5px;
  margin-bottom: 15px;
  font-size: 1.1em;
  border-radius: 6px;
}

#gender {
  width: 100%;
  height: 35px;
  font-size: 1.1em;
  margin-bottom: 15px;
  padding: 5px;
  border-radius: 6px;
  box-shadow: none;
}

button {
  margin-top: 10px;
  height: 30px;
  width: 30%;
  border-radius: 6px;
  background-color: white;
  font-size: 1.1em;
  padding: 3px;
}

.footer-credit {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  box-sizing: border-box;
}
/* Menghilangkan teks alternatif dengan display: none */


/* Menambahkan lapisan tambahan untuk menyembunyikan teks alternatif */
img {
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


@media screen and (max-width: 768px) {
  #header {
    width: 100%;
  }

  nav {
    display: block;
    height: 120px;
    padding: 15px;
  }

  nav ul {
    width: 100%;
    margin-top: 20px;
  }

  .content-aside {
    display: flex;
    flex-direction: column;
  }

  .header-texts {
    width: 100%;
  }

  .header-filler {
    display: none;
  }

  aside {
    padding-top: 0px;
    width: 100%;
    margin-top: 30px;
    margin-left: 0px;
    height: 30%;
  }

  #content {
    width: 100%;
  }

  .mini-one img,
  .mini-two img,
  .mini-three img,
  .mini-four img {
    display: none;
  }

  .mini-content {
    width: 100%;
    height: 250px;
    overflow-x: auto;
  }

  td {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    max-height: 20%;
    overflow-y: auto;
  }
  td img {
    display: flex;
  }
  footer {
    flex-direction: column;
  }

  .footer-form {
    width: 100%;
    margin-bottom: 20px;
    background-color: #070f2b;
    border: 3px solid #d4f1f4;
    border-radius: 10px;
  }

  .footer-logo {
    width: 100%;
    margin-bottom: 20px;
  }

  .footer-credit {
    width: 100%;
    text-align: center;
  }
}