*,
*::before,
*::after {
      box-sizing: border-box;
      scroll-behavior: smooth;
}

body {
      font-family: 'Quicksand', sans-serif;
      height: 100vh;
      margin: 0;
      background-color: #4d2b53;
}

h2,
h3 {
      color: #73c1fd;
}

header.navbar-container {
      width: 100%;
      height: 100vh;
      padding-block: 1rem;
      display: flex;
      flex-direction: column;
      z-index: 9999;
      align-items: center;
}

header.navbar-container .nav-list ul {
      padding: 5px;
      top: 0;
      display: flex;
      gap: 2rem 1rem;
}

header.navbar-container .nav-list li {
      list-style-type: none;
}

header.navbar-container .nav-list li a {
      padding: 0.5rem 1.5rem;
      border-radius: 999px;
      text-decoration: none;
      font-size: 1.05rem;
      font-weight: 500;
      color: white;
      transition: all 0.2s ease-in-out;
      box-shadow: inset 0 0px 2px 2px rgba(0, 0, 0, 0.17);
}

#kontak {
      background-color: #ba4dcbbc;
}

header.navbar-container .nav-list li:hover a {
      background-color: #ba4dcbbc;
      color: #312f2f;
      box-shadow: 0 0px 2px 2px rgba(0, 0, 0, 0.17);
}

.jumbotron {
      display: flex;
      margin: 1rem 4rem;
      color: whitesmoke;
      background-color: #4d2b53;
      box-shadow: 1px 1px 8px 4px rgba(23, 23, 23, 0.284);
      border-radius: 10px;
}

.jumbotron .jumbotron-content {
      padding-right: 3rem;
}

.jumbotron .jumbotron-content .title {
      font-size: 4.5rem;
      text-shadow: 4px 8px 4px rgb(55, 14, 73);

}

.jumbotron .jumbotron-content p {
      text-align: justify;
}

.jumbotron .jumbotron-image {
      display: flex;
      margin: 2.5px;
}

.jumbotron .jumbotron-image img {
      width: 450px;
      height: fit-content;
}

.card {
      box-shadow: -2px 4px 8px 4px rgba(0, 0, 0, 0.354);
      border-radius: 10px;
      padding: 15px;
}

main {
      display: flex;
      padding: 15px;
      gap: 1rem;
}

#content {
      flex: 5;
      display: flex;
      flex-flow: column nowrap;
      gap: 1rem 2rem;
}

#member {
      background-color: #4d2b53;
}

.biodata {
      display: flex;
      flex-direction: column;
      color: white;
}

.biodata figure {
      display: flex;
      margin: 1.5rem;
}

.biodata figure img {
      width: 220px;
      height: fit-content;
}

.biodata figure p {
      text-align: justify;
}

main.content {
      background-color: #4d2b53;
}

#awards {
      color: whitesmoke;
      background-color: #4d2b53;
}

.awards {
      display: flex;
      flex-wrap: wrap;
      gap: 1.2rem;
      justify-content: center;
}

#american-music-awards,
#grammy-awards,
#billiboard-music-awards,
#golden-disc-awards,
#mam-awards,
#tm-awards {
      position: relative;
      display: flex;
      justify-content: center;
      width: 350px;
      height: 250px;
      overflow: hidden;
      box-shadow: inset 1px 0px 2px 3px rgba(0, 0, 0, 0.353);
      border-radius: 10px;
      background-color: #34153a;
}

#american-music-awards img,
#grammy-awards img,
#billiboard-music-awards img,
#golden-disc-awards img,
#mam-awards img,
#tm-awards img {
      position: absolute;
      width: 100%;
      height: 100%;
      padding: 20px 20px 20px 20px;
      border-radius: 25px;
      top: 0;
      left: 0;
      transition: transform 0.5s ease;
}

.current {
      z-index: 2;
}

.next {
      transform: translateX(100%);
      z-index: 1;
}

.awards figcaption {
      position: absolute;
      top: 0;
      color: whitesmoke;
      font-weight: bold;
      justify-content: center;
}

aside {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1rem;
}

header {
      display: inline;
}

.profile-card {
      background-color: #4d2b53;
      box-shadow: inset 0 4px 8px 4px rgba(0, 0, 0, 0.231);
      border-radius: 10px;
      padding: 10px;
      color: white;
}

.profile-card img {
      width: 300px;
      border-radius: 5px;
      box-shadow: -2px 4px 8px 6px rgba(0, 0, 0, 0.28);
}

.profile-card header {
      text-align: center;
}

figcaption {
      text-align: center;
}

header {
      display: inline;
}

table {
      width: 100%;
}

th,
td {
      padding: 5px;
      text-align: justify;
}

th {
      padding: 8px;
      width: 130px;
}

.music-album {
      display: flex;
      /* flex: 1; */
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      justify-content: space-evenly;
      padding-top: 15px;
      padding-bottom: 15px;
      border-radius: 10px;
}

.music-album img {
      width: 100px;
}

footer .social-media {
      height: 100%;
      display: flex;
      justify-content: center;
}

footer .social-media li {
      list-style-type: none;
      padding: 10px;
      text-align: center;
      align-content: center;
      align-items: center;
      align-self: center;

}

.social-media li a {
      text-decoration: none;
      font-size: 1.5rem;
      align-items: center;
      color: white;
      transition: all 0.1s ease-in-out;
}

span.instagram:hover {
      background: linear-gradient(-150deg, #8a3ab9, #bc2a8d, #fccc63, #fbad50);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

span.whatsapp:hover {
      color: #25d366;
}

span.tiktok:hover {
      color: #000000;
}

span.linkedin:hover {
      color: #0077b5;
}

span.line:hover {
      color: #00c300;
}

span.love {
      color: red;
}

footer {
      padding: 15px;
      color: white;
      background-color: #4d2b53;
      text-align: center;
      font-weight: bold;
      box-shadow: 2px 2px 4px 6px rgba(0, 0, 0, 0.28);
      border-radius: 12px;
}

/* Perangkat dengan lebar layar 1200px dan dibawahnya */
@media screen and (max-width: 1200px) {
      main {
            flex-flow: column nowrap;
      }

      main aside {
            align-self: center;
      }
}

/* Perangkat dengan lebar layar 768px dan dibawahnya */
@media screen and (max-width: 768px) {
      header.navbar-container {
            height: auto;
      }

      .jumbotron {
            flex-direction: column;
            margin: 1rem;
            text-align: center;
      }

      .jumbotron .jumbotron-image {
            align-self: center;
      }

      .jumbotron .jumbotron-content {
            padding: 1rem;
            margin-bottom: 0.5rem;
      }

      .jumbotron .jumbotron-content .title {
            font-size: 2.5rem;
      }

      .jumbotron .jumbotron-image img {
            width: 100%;
            max-width: 350px;
      }

      nav ul {
            justify-content: center;
      }

      main .content {
            flex-direction: column;
      }

      main aside {
            align-self: stretch;
      }
}

/* Perangkat dengan lebar layar 600px dan dibawahnya */
@media screen and (max-width: 568px) {
      header.navbar-container {
            height: auto;
            padding-block: 0.5rem;
      }

      header.navbar-container .nav-list ul {
            padding: 0;
            gap: 0.1rem;
      }

      header.navbar-container .nav-list li a {
            font-size: 0.75rem;
            padding: 0.5rem 1rem;
      }


      .biodata figure {
            flex-direction: column;
            align-items: center;
      }

      .biodata img {
            order: -1;
      }

      .profile-card header img {
            width: 100%;
            height: auto;
      }
}