html, body {
   height: 100%;
}

body {
   font-family: "Capriola", sans-serif;
   font-size: 17px;
   line-height: 1.2;
   margin: 0;
   padding: 0;
   color: #000000;
   background: linear-gradient(0deg, rgba(33,23,221,1) 0%, rgba(147,203,255,1) 100%);
   background-attachment: fixed;
}



h1 {
   margin: 0;
   padding: 48px 16px 0 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
}
h1 a {
   display: block;
}
h1 a img {
   display: block;
   /* border-radius: 50%; */
   height: 96px;
   width: auto;
}
h1 p {
   font-size: 15px;
   font-weight: normal;
   margin: 24px 0 0 0;
   line-height: 1.7;
   text-align: center;
   width: 80%;
}




.linktree {
   margin: 32px 24px 0 24px;
   padding: 0;
   list-style: none;
}
.linktree li {
   margin: 16px 0 0 0;
   padding: 0;
   background: #ffab01;
   border-bottom-right-radius: 7px;
   text-shadow: 1px 1px 1px #ffda8f;
}
.linktree li:hover,
.linktree li:active {
   box-shadow: 0 0 10px 0px rgba(0,0,0,0.75);
}
@media( min-width: 512px ) { /* kalau lebar layar > 512 */
   .linktree {
      display: grid;
      grid-template-columns: 1fr 1fr; /* 2 kolom */
      gap: 16px;
   }
   .linktree li {
      margin: 0;
      padding: 16px;
   }
}
@media( min-width: 768px ) {
   .linktree {
      margin-top: 48px;
      grid-template-columns: 1fr 1fr 1fr; /* 3 kolom */
   }
}
@media( min-width: 1072px ) {
   .linktree {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      max-width: 1024px; /* bikin biar lebar semuanya mentok di 1024 */
      margin-left: auto;
      margin-right: auto;
   }
}

.linktree li a {
   display: flex;
   height: 64px;
   text-align: center;
   color: #000000;
   text-decoration: none;
   opacity: .85;
   align-items: center;
   padding: 0 8px;
}
.linktree li a img {
   width: 48px;
   height: auto;
   object-fit: cover;
   border-radius: 6px;
}
.linktree li a img.withbg {
   background: white;
}
.linktree li:hover a,
.linktree li:active a {
   opacity: 1;
}
.linktree li a span {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.linktree li a span em {
   font-style: normal;
   font-size: .85em;
}
@media( min-width: 512px ) { /* kalau lebar layar > 512 */
   .linktree li a {
      display: flex;
      flex-direction: column; /* ... robah posisi icon-text jadi atas-bawah */
      justify-content: center;
      align-items: center;
      gap: 16px;
      height: 100%;
   }
   .linktree li a > * { /* ngebatalin positioning direct children dari a (img & span) yg sebelomnya */
      position: static !important;
      transform: none !important;
   }
   .linktree li a img {
      width: 96px;
   }
}




footer {
   text-align: center;
   opacity: .8;
   font-size: .8em;
   margin-top: 64px;
   padding-bottom: 16px;
}