body 
{
  background-color :#000000;
  color : white;
  font-family : Arial, Helvetica, sans-serif;
  min-width: 98vw;
}

.page-wrapper 
{
  display : flex;
  flex-direction: column;
}
/* buat navbar */
nav 
{
  display: flex;
  padding-bottom : 10px;
  flex-direction: column;
  min-width: 100%;  
  justify-content: space-between;
  color: white;
  border-bottom: 5px solid;
  border-image: linear-gradient(to right, #34d399, #6ee7b7, #ef4444, #f03) 1;
}

.nav-logo-title 
{
  display : flex;
  margin-inline : auto;
  flex-direction: row;
  padding-top : 10px;
}

.nav-logo-title::before 
{
  content: "";
  /* float: left; */
  background-repeat: no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
  padding-left : 0px;
  padding-right : 0px;
  /* margin-bottom: 15px;
  margin-top: 5px; */
  background-image: url(https://static.vecteezy.com/system/resources/previews/012/598/212/original/currency-coin-cartoon-png.png);
}

.nav-logo-title img 
{
  display: none;
}

.nav-logo-title a 
{
  text-decoration: none;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 22px;
  top: 22px;
  display: flex;
  flex-direction: row;
  color: white;
  text-align : center;
}

nav ul 
{
  display  :flex;
  flex-direction: row;
  text-align : center;
}
nav ul li 
{
  list-style-type: none;
  font-size : 17px;
  margin-inline : auto;
  display : inline-block;
}

nav ul li a 
{
  color: white;
  text-align: center;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  position: relative;
  margin-left : -10vmin;
  top : 12px;
}

nav ul li a:hover 
{
  text-decoration: none;
}

nav ul li a::before 
{
  content: "";
  top: 20px;
  left: 50%;
  right: 50%;
  width: 0%;
  position : absolute;
  height: 4px;
  background-color: #34d399;
  transition: all 0.5s ease-in-out;
  text-decoration-thickness: 4px;
}

nav ul li a:hover::before 
{
  width: 100%;
  left: 0;
  right: 0;
}

/* buat header */
#header 
{
  background-repeat: no-repeat;
  background-image: url(https://wallpaperaccess.com/full/3734602.jpg);
  background-size: cover;
  background-position: center center;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.header-texts 
{
  width: 90%;
  padding-top : 280px;
}

.header-texts h1 
{
  position: relative;
  top: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  color: white;
}

.header-texts h3 
{
  color: white;
  font-size: 18px;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
}

.header-texts p 
{
  color: white;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

.header-texts abbr 
{
  text-decoration: underline  #34d399 3px;
}

.content-aside {
  height : auto;
  z-index : 10;
  display : flex;
  flex-direction: column;
}

.content-aside .content .content-first {
  text-align : center;
}

.content-first h2, .content-second h2, .footer-form, aside, .articles .article, .creativity-wrapper h2, .article a, .row-second .article-long
{
  /* ukuran border */
  --border-size: 3px;
  /* semakin besar, maka semakin cepat muternya + nentuin arah */
  --border-angle: 0turn;

  background-image: conic-gradient(
    /* buat nentuin titik awal gradient, nah ini kan 0, berarti dari arah atas tengah */
      from var(--border-angle),
      /* ini warna yang contain di dalam */
      #000000,
      #111111 50%,
      #000000
    ),
    /* semakin besar transparentnya, maka garis yang kelihatan makin sedikit */
    conic-gradient(from var(--border-angle), transparent 20%, #f03, #34d399);

    /* buat ngitung lebar, semakin tinggi perkaliannya semakin tebal lebarnya */
  background-size: calc(100% - (var(--border-size) * 2)) 

  /* buat ngitung tinggi, semakin tinggi perkaliannya semakin tebal tingginya */
      calc(100% - (var(--border-size) * 2)),
      /* kalo gada cover, outlinenya gabakal muncul */
    cover;

    /* biar ngatur, horizontal sama vertikal outline yang muncul */
    /* kalo gada center center, maka animasi outline cuma bakal ada di bagian bawah */
  background-position: center center;
  /* supaya muncul sekali aja outlinenya, funfact kalo ini dihapus animasi outline warnanya ga muncul */
  background-repeat: no-repeat;
  animation: bg-spin 2.5s linear infinite;
}

.content-aside .content .content-first h2, .content-second h2
{
  text-align : center;
  margin-inline : auto;
  border-radius : 10px;
  padding-top : 10px;
  padding-bottom  :10px;
  margin-bottom : 40px;
  width: 80vw;
}

.content-aside .content .content-first p, .content-second p
{
  /* width : 70%; */
  text-align : center;
  margin-inline: 50px;
}
.content-aside .content .content-second 
{
  text-align: center;
}

.content-aside aside 
{
  position : sticky;
  top : 5rem;
}

/* buat aside */
  aside {
    float : left;
    display : flex; 
    flex-direction: column;
    border-radius : 25px;
    margin-bottom: 25px;
    color: white;
    padding-top: 10px;
    margin-top: 30px;
    padding-left: 5px;
    height : 150px;
    margin-inline : 50px;
    animation: bg-spin 5s linear infinite;
  }
  

aside h2 
{
  margin-left: 25px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 7px;
  margin-bottom: 0px;
}

aside ul li 
{
  color : white;
  list-style-type: none;
  font-size: 12px;
  float : left;
  margin-right : 8px;
}

aside ul 
{
  padding: 0;
  margin-left: 25px;
}

aside ul li a 
{
  color: white;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}


/* buat article */
.articles 
{
  padding-top : 100px;
  margin-top : 15px;
  border-top: 5px solid;
  border-bottom : 5px solid;
  border-image: linear-gradient(to right, #34d399, #6ee7b7, #ef4444, #f03) 1;
  justify-content: center;
}

.articles table 
{
  margin-inline :auto;
  width : 70vmin;
  height : 80vmin;
}

.articles table tr {
  display : flex;
  flex-direction : column;
}

.articles table tr td {
  margin-inline : auto;
  margin-bottom : 25vmin;
}

.articles table .row-first .article 
{
  color: white;
  padding-bottom : 15px;
  border-radius: 20px;
  position: relative;
  text-align : center;
  animation: bg-spin 3s linear infinite;
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.articles table .row-first .article:nth-child(1):hover, .article:nth-child(2):hover, .article:nth-child(3):hover
{
  transform: scale(1.05);
}

.articles table img
{
  /* sebesar apa bordern animasi yang keluar nanti */
  --border: 10px;  
  /* ngatur jarak sama td nya */
  --offset: 30px;  
  /* ngatur jarak sama gambar yang mau diberi animasi */
  --gap: 5px;   
  /* ngatur radius gambar */
  border-radius: 50%;
  cursor: pointer;
  /* kalo gada ini, nanti animasinya bakal ketimbun gamabr */
  padding: calc(var(--border) + var(--gap));
  /* ini buat outline warna dari gambarnya sendiri */
  border: var(--offset) solid hsla(0, 0%, 0%, 0);
  /* custom property buat mask */
  /* kalo 50% 50% diubah 100% 100%, bakal keliatan bekasnya */
  --_m: radial-gradient(50% 50%, #000 calc(100% - var(--offset)),#0000 calc(100% - var(--border)));
  -webkit-mask: var(--_m);
          mask: var(--_m);
  /* gradient warna latar belakang */
  /* diberi warna #0000 biar bisa membaur sama latar belakang warnanya */
  --_g: #0000 calc(99% - var(--border)), var(--color) calc(100% - var(--border)) 99%,#0000;
  /* buat ngatur offsetnya, kalo misal gada ini, nanti animasi bordernya dateng dari ujung kiri atas aja */
  --_s: var(--offset);
  /* kalo ini dihapus, ga muncul animasinya */
  --_r: 100% 100% at;


  background:
  /* kalo persenan var(--r) dibawah diubah, ngaruhnya ke arah bagian lingkarannya */
  /* kalo calc angkanya diganti, ngaruhnya ke arah munculnya*/

  /* ini bagian kanan bawah */
    radial-gradient(var(--_r) 0%    0   ,var(--_g)) calc(100% + var(--_s)) calc(100% + var(--_s)),
    /* ini buat kiri bawah */
    radial-gradient(var(--_r) 100% 0   ,var(--_g)) calc(0%   - var(--_s)) calc(100% + var(--_s)),
    /* ini kanan atas */
    radial-gradient(var(--_r) 0    100%,var(--_g)) calc(100% + var(--_s)) calc(0%   - var(--_s)),
    /* ini kiri atas */
    radial-gradient(var(--_r) 100% 100%,var(--_g)) calc(0%   - var(--_s)) calc(0%   - var(--_s));
    /* ngaruh ke bentuk lingkaran yang keluar, kalo 100% 100% jadi belah ketupat */
    /* kalo dihover jadinya bentuk shuriken kalo 100% 100% */
  background-size: 50% 50%;
  /* kalo no repeatnya dihapus, motif batik yang keluar */
  background-repeat: no-repeat;
  transition: .4s;
}
.articles table .row-first .article:nth-child(1) img, .article:nth-child(3) img
{
  content :url(https://source.unsplash.com/200x200/?money);
  /* border-radius : 100px; */
  z-index: 10000;
  position: relative;
  top: -80px;
  --color: #f03; 
}

.articles table .row-first .article:nth-child(1) img:hover, .article:nth-child(3) img:hover, .article:nth-child(2) img:hover, .row-second img:hover 
{
  /* ini juga biar animasinya muncul */
  /* kalo angkanya ditambah, maka jarak animasinya dengan gambarnya smakin jauh */
  --_s: 0px
}

.articles table .row-first .article:nth-child(2) img
{
  content : url(https://source.unsplash.com/200x200/?coin);
  position: relative;
  top: -80px;
  --color: #34d399; 
}

.articles table .row-first .article:nth-child(3) img 
{
  content : url(https://source.unsplash.com/200x200/?rupiah);
  z-index: 10000;
  position: relative;
  top: -80px;
}

.articles table .row-first .article h3 
{
  font-size: 18px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: -50px;
  position: relative;
  top : -35px;
}

.articles table .row-first .article p 
{
  font-size: 16px;
  margin-left: 20px;
  margin-right: 20px;
  white-space: pre-wrap;
  display : -webkit-box;
  -webkit-box-orient : vertical;
  -webkit-line-clamp : 5;
  overflow: hidden;
  margin-bottom : 25px;
  position: relative;
  top : -30px;
}

.articles .article a
{
  text-decoration: none;
  color :  white; 
  padding : 8px;
  position: relative;
  top : -20px;
  border-radius : 5px;
  --border-angle: 0turn;
  width: 60vmin;
  height: 70vmin;
}

.articles table .row-first .article a:hover 
{
  background-image: conic-gradient(
      from var(--border-angle),
      
      rgb(34, 17, 19) 30%,
      rgb(17, 51, 30)
    ),
    conic-gradient(from var(--border-angle), transparent 20%, #f03, #34d399);
}

.articles table .row-second .article-long 
{
  text-align : center;
  position : relative;
  margin-inline : auto;
  padding-left: 30px;
  padding-right : 30px;
  border-radius : 15px;
}

.articles table .row-second:hover
{
  transform: scale(1.03);
}

.articles table .row-second img 
{
  display: none;
}

/* custom property */
@property --gap{
  syntax: '<length>';
  /* supaya bisa diturunkan */
  inherits: true;
  initial-value: 0;
}

@property --angle{
  syntax: '<angle>';
  inherits: true;
  /* nilai awal/ nilai default */
  initial-value: 0deg;
}


/* bagian kreativitas */
.creativity .creativity-wrapper 
{
  display : flex;
  flex-direction: column;
  margin-inline : auto;
  margin-bottom : 20vmin;
}
.creativity .creativity-wrapper .mini-content
{
  position: relative;
}

.creativity .creativity-wrapper .mini-one:hover, .mini-two:hover, .mini-three:hover, .mini-four:hover
{
  transform : scale(1.1);
}

.creativity-wrapper h2, .footer-form
{
  background-image: conic-gradient(
      from var(--border-angle),
      #000000,
      #111111 50%,
      #000000
    ),
    conic-gradient(from var(--border-angle), transparent 20%, gold, blue);
}

.creativity .creativity-wrapper img 
{
  border-radius : 100px;
  position: relative;

  /* kalo makin besar, makin nutupin kontennya */
  --border: 10px;
  /* ngatur jarak sama konten gambarnya */
  --gap: 18px;
  /* ratio lebar dan tinggi */
  aspect-ratio: 1;
  /* buat ngatur ukuran konten di dalamnya biar ngikutin */
  /* kalo dihapus, nanti gambarnya makin membesar */
  box-sizing: border-box;
  /* radiusnya biar bulet */
  border-radius: 50%;
  margin-inline : auto;
  margin-top : 20vmin;
  cursor: pointer;


  padding: calc(var(--border) + var(--gap));
  
  width : 50vmin;
  --angle: 90deg;

  background:
  /* kalo ini dihapus, yang keluar cuma lingkaran full aja */
    radial-gradient(farthest-side,var(--color) 97%,#0000 101%) 85.35% 85.35%,
    /* ini sama lingkaran full juga, kalo dihapus */
    conic-gradient(from calc(180deg - var(--angle)/2),#0000 var(--angle),var(--color) 0),
    /* kalo ini dihapus, malahan outline warnanya ga keluar, jadinya cuma hoveran gambar */
    /* dan ga beda jauh sama transfrom : scale() */
    radial-gradient(farthest-side,var(--color) 97%, #0000 101%) 14.65% 85.35%;
    /* kalo ini dihapus, bentuk lingkarannya ga bolong bawah lagi, tapi 1 lingkaran penuh */
  background-size: var(--border) var(--border),auto;
  /* kalo no repeatnya dihapus, bentuk lingkarannya juga ga bolong bawah lagi, tapi 1 lingkaran full */
  background-repeat: no-repeat;

  -webkit-mask:
    radial-gradient(farthest-side, 
    /* 99% ini ternyata ngatur smcam masking/shadownya */
    /* kalo diturunin jadi 0%, nanti gambarnya bakal lebih gelap */
     #000  calc(99%  - calc(var(--border) + var(--gap))),
     #0000 calc(100% - calc(var(--border) + var(--gap)))

     /* ini 100% biar lebih rapi tampilan warnanya, biar ga kyk nyebar gitu */
     /* kalo ga 100% pasti masih kelihatan warna yang tampak masih nyebar */
           calc(100%  - var(--border)), 
     #000  calc(100% - var(--border)));
          mask:
    radial-gradient(farthest-side, 

     #000  calc(99%  - calc(var(--border) + var(--gap))),
     #0000 calc(100% - calc(var(--border) + var(--gap))) 
           calc(99%  - var(--border)), 
     #000  calc(100% - var(--border)));
     /* kaku pol hoverannya kalo gada transition dibawah ini */
  transition: --angle .4s,--gap .4s;
}

.creativity .creativity-wrapper .mini-one img 
{
  content : url(https://source.unsplash.com/200x200/?bitcoin);
}
.creativity .creativity-wrapper .mini-one img, .mini-three img
{ 
  --color:gold;
}

.creativity .creativity-wrapper .mini-one img:hover , .mini-three img:hover {
  --angle: 0deg;
  --gap: 5px;
  --color : blue;
}

.creativity .creativity-wrapper .mini-one, .mini-two, .mini-three, .mini-four
{
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  position : relative;
}

.creativity .creativity-wrapper h2
{
  margin-inline : auto;
  border-radius : 10px;
  text-align : center;
  padding-top : 20px; 
  padding-bottom : 20px;
  width: 80vmin;
}

.creativity .creativity-wrapper p
{
  font-size : 16px; 
  text-align : center;
  margin-inline : auto;
  width : 75vmin;
}

.creativity .creativity-wrapper .mini-two img 
{
  content : url(https://source.unsplash.com/200x200/?cardano);
}
.creativity .creativity-wrapper .mini-two img, .mini-four img 
{
  --color: blue;
}

.creativity .creativity-wrapper .mini-two img:hover, .mini-four img:hover {
  --angle: 0deg;
  --gap: 5px;
  --color : gold;
}

.creativity .creativity-wrapper .mini-three img 
{
  content : url(https://source.unsplash.com/200x200/?ethereum);
}

.creativity .creativity-wrapper .mini-four img 
{
  content : url(https://source.unsplash.com/200x200/?dogecoin);
}

/* buat footer */
footer {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  color: white;
  padding: 20px;
  border-top: 5px solid;
  border-image: linear-gradient(to right, gold, yellow, skyblue, blue) 1;
} 

.footer-logo {
  /* flex: 1; */
  text-align: center;
  /* padding-left: 20px; */
}

.footer-logo h3 {
  font-size: 24px;
}

.footer-form {
  flex: 1;
  /* border-bottom : 5px solid;
  border-top: 5px solid;
  border-image: linear-gradient(to right, #34d399, #6ee7b7, #ef4444, #f03) 1; */
  padding: 0 20px;
  text-align: left;
  padding-left: 50px;
  padding-right : 50px;
  border-radius : 10px;
  margin-bottom : 10vmin;
  margin-top : 10vmin;
  width : 60vmin;
}

.footer-credit h3 {
  font-size: 20px;
}

.footer-form p {
  font-weight: bold;
  font-size: 20px;
}

.footer-form label {
  font-size: 16px;
}

.footer-form form {
  margin-bottom: 20px;
}

.footer-credit {
  text-align: center;
}

footer input[type="text"],
footer select {
  margin-bottom: 20px;
  border-radius: 5px;
  padding: 5px;
  border-width: 0px;
  font-size: 16px;
}

footer button {
  background-color: #f03;
  color: #fff;
  padding-top : 10px;
  padding-bottom : 10px;
  padding-left : 20px;
  padding-right : 20px;
  border-radius: 5px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  margin-top : 20px;
}

@media only screen and (min-width : 1020px)
{
  body 
  {
    margin-inline : auto;
  }
  .page-wrapper 
  {
    margin-inline : auto;
  }
  nav 
  {
    display : flex;
    flex-direction : row;
    margin-left : 0px;
    padding-left  :0px;
    padding-bottom : 2vmin;
  }
  .nav-logo-title
  {
    float : left;
    display : flex;
    flex-direction : row; 
    margin-inline : 0px;
    padding-left : 2vmin;
  }

  .nav-logo-title a
  {
    padding-left : 3vmin;
    position: relative;
    float : left;
    top : 1.2vw;
  }

  nav ul li a 
  {
    float : right;
    margin-inline : 5vmin;
  }

  #header 
  {
    display : flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .header-texts h1 
  {
    font-size : 48px;
    position : relative;
    /* top : 35vmin; */
  }

  .header-texts h3 
  {
    font-size : 32px;
    position : relative;
    /* top : 35vmin; */
  }

  .header-texts p 
  {
    font-size : 18px;
    position : relative;
    /* top : 35vmin; */
  }
  
  .content-aside 
  {
    display : flex;
    flex-direction: row;
  }
  .content-aside .content
  {
    width : 85vw;
  }

  .content-first h2, .content-second h2 
  {
    width : 66vw !important;
  }

  .content-aside aside 
  {
    position : sticky;
    top : 5rem;
  }

  aside
  {
    border-radius : 25px;
    margin-bottom: 25px;
    color: white;
    padding-top: 10px;
    margin-top: 30px;
    padding-left: 5px;
    height : fit-content;
    width : 20vw;
    display: flex;
    flex-direction: column;
  }

  aside h2 
  {
    margin-left : 2vmin;
    font-size : 20px;
    padding-top : 1vmin;
  }

  aside ul li
  {
    font-size : 14px;
    float : none;
    margin-bottom : 1vmin;
  }
  .articles 
  {
    padding-bottom : 0vw;
  }
  .articles table
  {
    border-spacing : 35px;
    padding-bottom : 0vmin;
  }
  .articles table tr 
  {
    display: flex;
    flex-direction: row;
  }
  .articles table tr td 
  {
    margin-inline : 1vw;
    position : relative;
  }

  .articles table .row-second tr
  {
    position : relative;
    margin-bottom : 0px;
    padding-bottom : 0px;
  }

  .articles table .row-second .article-long
  {
    width : 80vw;
    position : relative;
    top : -7vw;
    margin-bottom : 0px;
    height : fit-content;
    padding-top : 2vmin;
    padding-bottom : 2vmin;
  }

  .creativity 
  {
    padding-top : 8vw;
    padding-bottom : 0vw;
    margin-inline : auto;
  }

  .creativity-wrapper .mini-one, .mini-two, .mini-three, .mini-four 
  {
    display: flex;
    flex-direction: row !important;
    /* position: relative; */
    padding-bottom : 4vw;
    /* margin-inline : auto; */
  }

  .creativity-wrapper .mini-two, .mini-four 
  {
    display : flex;
    flex-direction: row-reverse !important;

  }
  .creativity-wrapper .mini-one img, .mini-two img, .mini-three img, .mini-four img 
  {
    width : 200px !important;
    height : 200px !important;
    margin : 0px !important;
  }

  .creativity-wrapper .mini-one img, .mini-three img 
  {
    margin-right : 4vmin !important;
    width : 200px !important;
    height : 200px !important;
  }

  .mini-two .mini-content, .mini-four .mini-content 
  {
    margin-right : 4vmin !important;
  }
  .creativity-wrapper .mini-one:hover, .mini-two:hover, .mini-three:hover, .mini-four:hover 
  {
    transform : scale(1.05) !important;
  }

  .creativity .creativity-wrapper h2 
  {
    width : 60vw;

  }

  .creativity .creativity-wrapper p 
  {
    width : 60vw;
  }

  footer 
  {
    display : flex;
    flex-direction : row;
    padding-bottom : 0px;
    padding-top : 0px;
  }

  .footer-logo 
  {
    text-align : left;
    margin-right : 5vmin;
  }
  .footer-form 
  {
    height : fit-content;
    padding-top : 2vmin;
    padding-bottom : 2vmin;
  }
  .footer-credit 
  {
    text-align : left;
    margin-left : 5vmin;
  }
}