/* List yang :hover able :
- Right Nav (flex-end atau nav ul)
- Aside ul li a
- See More (Article)
- CSS Abbreviation
- History or Content-Second

Untuk Creativty dapat discroll horizontal / inline
*/
html {
    scroll-behavior: smooth; 
}
* { /*apply ke seluruh element atau starting settingnya*/
    /*box-sizing : border-box; tidak jadi, ini tampilan headernya lebih baik besar saja*/
    margin: 0px;
    padding: 0px;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
/*untuk color-palette nya dari https://tailwindcss.com/docs/customizing-colors
Warna Amber untuk kuning-orange nya, biru dari Warna Indigo
Saya tidak import atau pakai frameworknya, tapi mengambil #hex nya */

:root {
    /*check bisa bikin variabel buat hex/animation (?)*/
    --size_title: 3em;
    --sizesubtitle: 1.5em;
    --sizemedium: 1.2em;
    --sizesubnormal : 1.2em;
    --sizenormal: 1em;
    --sizeheader: 1em;
    font-family: 'Poppins', sans-serif;
}

ul {
    list-style: none;
}

body {
    background-color: #FFFBEB;
    width: 100%;
}

/*vustom scroll yang mirip milik Galaxy Fold*/
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
  
::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}
  
::-webkit-scrollbar-thumb {
    background-color: #C0C0C0;
    border-radius: 5px;
}
  
::-webkit-scrollbar-thumb:hover {
    background-color: #A9A9A9;
}

/*warna untuk yang body*/
body::-webkit-scrollbar-thumb {
    background : linear-gradient(to bottom, #3730a3, #FBBF24)
}

h1 {
    font-size: var(--size_title);
}
h2 {
    font-size: var(--sizesubtitle);
}
h3 {
    font-size: var(--sizemedium);
}
h4 {
    font-size: var(--sizenormal);
}
p {
    line-height: 1.5;
    font-size: var(--sizenormal);
}
a {
    font-size : var(--sizeheader);
}
label {
    font-size : var(--sizenormal);
    font-weight: bold;
}
img {
    object-fit: scale-down;
}

.page-wrapper {
    width: 100%;
}
.page-wrapper::before {
    content: '@';
    position: fixed;
    left : 0;
    bottom: 0;
    z-index: 9999;
    background-color: #000;
    color: #FFFBEB;
    padding: 10px;
    border-radius: 5px;
}

#header, .row-first, .content-first, .content-second {
    margin-bottom : 75px;
}
#creativity {
    margin-bottom : 100px;
}
#articles {
    margin-bottom: 125px;
}

.nav-logo-title {
    display: flex;
    justify-content: space-between;
}

.nav-logo-title > a { /*> untuk select direct children*/
    width: 200px;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding-left: 12.5%;
}

.nav-logo-title img {
    max-width: 30%;
    max-height: 50%;
    transform: translate(50%, 50%); /*di tablet-HP menjadi (10px, 50%)*/
    display: block;
    border-radius: 50%;
    content: url('https://ongakudb.org/cover/954df4c4-9fa4-4608-9ef1-475de5ff0fd0.jpg');
}

nav {
    width: 100%;
    height: 10%;
    position: fixed;
    display: flex;
    justify-content: space-between;
    background-color: #FCD34D;
    z-index: 9999;
}

nav ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 20px; /*APPLY KE LEFT IMG!! flex-start? float left?*/
    gap : 25px;
}

nav a, .nav-logo-title a, aside h2, .article a {
    text-decoration: none;
    color: #fffbeb;
}
aside a {
    text-decoration: none;
    color : #000;
}
nav ul li a { /*transition untuk hover supaya ada semacam perubahan 'progress' dari putih ke biru gelap*/
    padding : 0 0 3px 0;
    transition : all;
    transition-duration : 200ms;
    border-bottom: 1px solid #1e1b4b00; /*ini transparan/opacity 0% dari warna biru di bawah*/
}
nav ul li a:hover {
    color : #1E1B4B;
    border-bottom: 1px solid #1E1B4B;
}

#header {
    background-image: url('https://unsplash.com/photos/KhhOAsE5M6Y/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8Mnx8eWVsbG93JTIwbW91bnRhaW58ZW58MHx8fHwxNjgxNjY2ODIw&force=true.jpg&opaque=true');
    background-size: cover;
    background-position: center;
    height: 35vh;
    padding-top: 30%;
    overflow : hidden;
    resize : vertical;
}

.header-texts {
    padding: 5% 5% 5% 5%;
    color: #fffbeb;
}

.header-texts h1 {
    margin-bottom: 20px;
}
.header-texts h1, .header-texts h3, .header-texts p {
    text-align: justify;
}

.header-filler { 
    height : 75px;
    
}
/* Ini di bawah Image on TEXT (batal)!! Jadinya hitam transparan saja lebih profesional
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRS4t8lJSAIiXEso_llPMANrcH3j_CGsvarCz-wY29Ual4SABrjZN94595y3FXfWqWqn0o&usqp=CAU');
-webkit-background-clip: text;
color: transparent;*/

.header-filler::before {
    content: "ぼっち・ざ・ろっく！";
    position: fixed;
    font-size: 32px;
    font-weight: bold;
    color : lightgray;
    opacity : 0.7;

    top : 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -9999;
}
  
abbr {
    font-weight: bold;
}

abbr:after {
    content: "";
}

abbr:hover:after {
    /*CLICK ME!!! Hover lebih enak sih*/
    content: " (Cascading Style Sheets)";
    text-decoration: bold;
}

abbr:empty {
    display: none;
}

#content {
}
.content-first h2,
.content-first p {
    color: #FFFBEB;
    text-align: justify;
}
.content {
    margin-right: 7.5%; /*<div class="content" id="content"> !!! ADA DUA*/
}
.content-aside {
    display: flex;
    padding: 5% 5% 5% 5%;
    /*di sini paddingnya*/
}
.content-first p:nth-child(2) {
    margin-bottom : 5%;
}
.content-first h2, .content-second h2 {
    display: flex;
    justify-content: center;
    margin-bottom: 5%;
}
.content-second h4 {
    text-align: center;
    font-weight : normal;
    margin-bottom : 50px; /*UNTUK ATUR MARGIN/PADDING HISTORY!*/
}
.content-second {
    padding-bottom : 100px; /*UNTUK ATUR MARGIN/PADDING HISTORY!*/
    position : relative;
}

.content-second h2 {
    margin : 2.5% 0;
}
.content-first {
    background-color: #1E1B4B;
    box-shadow: 0 0 0 100vmax #1E1B4B; /*ini agar ada background yang 'keluar dari container'*/
    clip-path : inset(0 -100vmax);
    padding : 50px 0;
    z-index: -1;
}
.content-second p {
    color : #000;
    text-align : center;
    position : absolute;
    transform: translate(-50%, -50%);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 4.8em;
    background-color: #F59E0B;
    border-radius: 25px;
    padding : 4.5px 30px 20px 30px;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25));
}

/* ease-in-out rasanya lebih 'snappy' sedikit daripada linear*/
/*paragraf 1*/
.content-second p:nth-child(3) {
    animation : switching_history3 5s ease-in-out 0s infinite;
    animation-play-state: paused;
}
/*paragraf 2*/
.content-second p:nth-child(4) {
    animation : switching_history4 5s ease-in-out 0s infinite;
    animation-play-state: paused;
}
/*paragraf 3*/
.content-second p:nth-child(5) {
    padding : 15px;
    animation : switching_history5 5s ease-in-out 0s infinite;
    animation-play-state: paused;
}
/*aktifin semua*/
.content-second:hover p:nth-child(3), .content-second:hover p:nth-child(4), .content-second:hover p:nth-child(5) {
    animation-play-state: running;
}
  
/*animationnya ini kalau di tab dan HP, bisa ngefek ke yang position: fixed, glitching a bit, tapi minor sekali sebenarnya*/
/*ada 3 FASE atau jatah :
- 0-33% itu giliran child 3 (31-33% switch)
- 34-66% child 4 (61-66% switch)
- 67-100% child 5 (95-100% switch)

sebenarnya bisa untuk :active, hanya saja perlu diklik atau hold dengan durasi tertentu yang ngebikin jadi tidak smooth, jadi batal
 */
@keyframes switching_history3 {
    0% {
        opacity: 1;
        transform: translate(0, 0);
        z-index: 3;
    }
    /*APPEAR*/
    28% {
        opacity: 1;
        transform: translate(0, 0);
        z-index: 3;
    }
    33% {
        opacity: 0;
        transform: translate(20%, 0%);
        z-index: -1;
    }
    95% {
        opacity: 0;
        transform: translate(-20%, 0%);
        z-index: -1;
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
        z-index: 3;
    }
  }
@keyframes switching_history4 {
    0% {
        opacity: 0;
        transform: translate(-20%, 0%);
        z-index: -2;
    }
    28% {
        opacity: 0;
        transform: translate(-20%, 0%);
        z-index: -2;
    }
    33% {
        opacity: 1;
        transform: translate(0, 0);
        z-index : 2;
    }
    /*APPEAR*/
    61% {
        opacity: 1;
        transform: translate(0, 0);
        z-index : 2;
    }
    66% {
        opacity: 0;
        transform: translate(20%, 0%);
        z-index: -2;
    }
    100% {
        opacity: 0;
        transform: translate(20%, 0%);
        z-index: -2;
    }
} 
@keyframes switching_history5 {
    0% {
        opacity: 0;
        transform: translate(-20%, 0%);
        z-index : -3;
    }
    61% {
        opacity: 0;
        transform: translate(-20%, 0%);
        z-index : -3;
    }
    66% {
        opacity : 1;
        transform: translate(0, 0);
        z-index : 1;
    }
    /*APPEAR*/
    95% {
        opacity : 1;
        transform: translate(0, 0);
        z-index : 1;
    }
    100% {
        opacity: 0;
        transform: translate(20%, 0%);
        z-index : -3;
    }
} 

aside {
    display : flex;
    flex-direction: column;
    margin-top : 3%;
    gap : 1%;
    z-index: 1;
}
aside h2 {
    font-size : var(--sizenormal);
    background-color: #F59E0B;
    border-radius: 15px;
    text-align: right;
    padding : 10px;
}
aside ul {
    /*display : flex;
    flex-direction: tidak jadi, tapi reminder utk diapply untuk tablet-HP*/
    background-color: #FCD34D;
    border-radius: 15px;
    text-align : right;
    padding : 10px;
}
aside li { 
    /* Kalau aside > li tidak bisa, 
    karena di bawah aside tidak ada li, hanya ada h2 dan ul, 
    tanpa > bakal dicari sampai cucu" nya*/
    margin : 5px;
}
aside ul li > a {
    padding : 0 0 2px 0;
    transition : all;
    transition-duration : 200ms;
}
aside ul li > a:hover {
    color : #FFFBEB;
}

#article {
}

table {
    background-color: #1E1B4B;
}
.article {
    /*shortcutnya flex :, patut untuk dipelajari lagi ini
    flex-grow: 0.1; /*untuk extra occupy, bir lebih lebar width articlenya, nyesuain sama flex-wrap
    flex-shrink: 0;
    flex-basis: calc(33.33% - (2 * 10px)); alternatif ke width*/
    flex : 0.1 0 calc(33.33% - (2 * 10px)); 
}

.article-long {
    width: 75%;
}
.article p, .article-long p {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-first,
.row-second {
    position : relative;
    display : flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap : 2%;
    transform : translateY(25px);
    /*display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;*/
}
.row-first {
    gap : 75px;
}
.article,
.article-long {
    color: #000;
    background-color: #FBBF24;
    text-align: center;
    border-radius: 25px;
    position : relative;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.25));
    padding: 75px 20px 30px 20px;
}
.article, .article-long, img[alt="Article 4"] {
    transition: all 0.3s ease;
}

.article:hover, .row-second:hover .article-long:hover {
    transform: scale(1.05);
    z-index: 1;
}
.row-second td:nth-child(2) {
    position : absolute;
}
.article img {
    display: block;
}

.article a { /*See More*/
    background-color: #312E81;
    padding : 10px 20px;
    border-radius: 15px;
}
.article h3, .article-long h3 {
    font-size: var(--sizemedium);
    margin-bottom: 10px;
}

.article p {
    margin-bottom: 30px;
}

img[alt="Article 1"], img[alt="Article 2"], img[alt="Article 3"], img[alt="Article 4"] {
    background-size: contain;
    width: 125px;
    height: 125px;
    display: block;
    position : absolute;
}
/*by default order itu 0*/
img[alt="Article 1"] {
    content: url('https://bocchi.rocks/_teaser/assets/img/special/icon_present/files/dc_icon_1.png');
}

img[alt="Article 2"] {
    content: url('https://bocchi.rocks/_teaser/assets/img/special/icon_present/files/dc_icon_2.png');
}

img[alt="Article 3"] {
    content: url('https://bocchi.rocks/_teaser/assets/img/special/icon_present/files/dc_icon_3.png');
}

img[alt="Article 4"] {
    content: url('https://bocchi.rocks/_teaser/assets/img/special/icon_present/files/dc_icon_4.png');
    top: 0%;
    left: 50%;
    transform: translate(-50%, -135%);
    z-index : 4;
}

img[alt="Article 1"], img[alt="Article 2"], img[alt="Article 3"] {
    display: block;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#creativity {
}

.creativity-wrapper {
    display : grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    gap : 25px;
    background-color : #fef3c7;
    margin: 0 0 0 0;
    padding : 0 25px;
    overflow-x: scroll;
    overscroll-behavior-inline: contain; /*UX, supaya tidak swipe keblablas*/
    scroll-snap-type: inline mandatory; /*atau sama saja x mandatory, inline ini mengurus se row, seperti x*/
}
.mini-one, .mini-two, .mini-three, .mini-four {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 300px;
    color: #FFFBEB;
    background-color: #F59E0B;
    border-radius: 25px;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
    padding: 20px 20px;
    margin : 15px;

    scroll-snap-align: center; /*supaya dikirim ke tengah setiap snap/start*/

}
/*animation-direction alternate itu maju mundur (normal + reverse)*/

.mini-content {
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-content h2 {
    margin-bottom : 10px;
}
img[alt="First image"] {
    content: url('https://media.tenor.com/DZmldC3h2oMAAAAM/cute-face-puss.gif');
}

img[alt="Second image"] {
    content: url('https://media.tenor.com/KVAcmvEwWMMAAAAM/thinking-puss.gif');
}

img[alt="Third image"] {
    content: url('https://media.tenor.com/oeMHiLW62hAAAAAM/pretty-please-kitty-softpaws.gif');
}

img[alt="Four image"] {
    content: url('https://media.tenor.com/0-bDOuUxijQAAAAj/drink-milk-puss.gif');
}

img[alt="First image"], img[alt="Second image"], img[alt="Third image"], img[alt="Four image"] {
    background-size: contain;
    width: 100px;
    height: 100px;
    display: block;
    border-radius : 50%;
    margin : 0 auto 25px;
    text-indent: -10000px; /*move textnya jauh"*/
}

footer {
}

.footer-logo, .footer-credit {
    background-color: #FCD34D;
    text-align: center;
    padding : 1.5rem 1rem;
}
.footer-form {
    padding : 25px;
    background-color: #1E1B4B;
    color : #FFFBEB;
}
.footer-form p:first-child, form button {
    font-weight: bold;
}
form {
    max-width: 400px;
    margin: 0 auto;
    position : relative;
    padding : 0 0 25px 0;
}

form p {
    font-size: var(--sizenormal);
    margin-top : 10px;
    margin-bottom: 17.5px;
}
.footer-form p:first-child {
    margin-bottom: 25px;
    text-align : center;
    font-size: var(--sizesubtitle);
}
form input[type = "text"], form select, button {
    height : 40px;
    margin : 10px 0 7.5px 0;
    border-radius: 15px;
}
input[type = "text"], select {
    width: 100%;
    border : none;
}
select[name="gender"] {
    padding : 10px;
}

label[for="html"], label[for="css"], label[for="javascript"],
input[type="radio"] {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 20px;
}
  
button {
    margin-top : 0px; /*reset untuk margin-topnya */
    background-color: #F59E0B;
    color : #FFFBEB;
    max-width : calc(400px * 1/2);
    width: 100%;
    border : none;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}

.footer-credit h3:first-child {
    visibility: hidden;
}

.footer-credit h3:nth-child(1):before {
    content: 'Template Made By Lie, Samuel Miracle Kristanto | \a Copyright @ 2023 LSMK';
    position: absolute;
    visibility: visible;
    left: 50%;
    transform: translateX(-50%);
}

.footer-credit h3:nth-child(2) {
    visibility: hidden;
}


/*EASE IN OUT*/
@media screen and (max-width: 768px) {

    /*768*/
    body {}

    :root {
        /*check bisa bikin variabel buat hex/animation*/
        --size_title: 2em;
        --sizesubtitle: 1.2em;
        --sizemedium: 1em;
        --sizesubnormal : 1em;
        --sizenormal: 0.8em;
        --sizeheader: 0.8em;
    }

    nav {
        max-height : 8%;
    }
    nav ul {
        gap : 10px;
    }
    .nav-logo-title a {
        width : 150px;
    }
    .nav-logo-title img {
        transform: translate(10px, 50%);
    }
    #header {}
    .header-texts {
        padding: 5% 5% 5% 5%;
    }
    .header-filler::before {
        font-size : 20px;
    }
    #content {}
    .content-aside {
        display: block; /*RESET*/
        justify-content: initial;
    }
    .content {
        margin-right: 0%; 
        text-align : center;
    }
    .content-second p:nth-child(5) {
        padding : 4.5px 30px 20px 30px;
    }
    /*Oke, karena di aside ini, h2 dan ulnya tidak dikelompokkan ke container/group satu",
         tidak bisa seperti di desain figma (semacam tampilan h2 dan di drop down ul, 2 dijejerkan) 
         Jadi solusi penggantinya dengan semuanya column saja, mirip versi dekstop tapi di bawah*/
    aside { 
        display : flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto 100px;
        width : 200px;
        gap : 5px;
    }
    aside h2 {
        font-size : var(--sizenormal);
        background-color: #F59E0B;
        border-radius: 15px;
        text-align: center;
    }
    aside ul {
        display : flex;
        flex-direction: column; /*flex column lagi agar bisa add gap : , lebih praktis*/
        text-align : center;
        padding : 10px;
    }
    aside ul li a { /*efek bawah, exclusive untuk tablet-HP, karena display : flex yang akan clash saat di desktop*/
        border-bottom: 1px solid #FFFBEB00; /*ini transparan/opacity 0% dari warna putih Amber di bawah*/
    }
    aside ul li a:hover {
        border-bottom: 1px solid #FFFBEB;
    }
    #article {}
    .row-first {
        flex-wrap: wrap;
        gap : 75px;
    }

    .article {
        flex-basis: 50%;
    }
    img[alt="Article 4"] {
        transform: translate(-50%, -140%);
    }
    #creativity {}

    form {
        max-width : 300px;
    }
    /* 
    
    SET WIDTH DARI aRTICLENYA, sama mungkin Widthnya, kecuali yang HP,  BIAR ADA JARAK

    */


}

/*max widthnya HP : 468px;*/
@media screen and (max-width : 425px) { /*Ini masih ada yang bawa style" dari tablet/ 768!! tidak pkaai min-width, dari youtube katanya bisa width >= atau <!!*/
    /*768*/

    /*Kalau HP tolong diganti itu content, aarticle creaticitynya, masih overlap sama css template
    kecilin mungkin*/
    body {
    }

    :root {
        /*check bisa bikin variabel buat hex/animation*/
        --size_title: 2em;
        --sizesubtitle: 1.2em;
        --sizemedium: 0.8em;
        --sizesubnormal : 0.8em;
        --sizenormal: 0.8em;
        --sizeheader: 0.8em;
    }

    nav {
        max-height : 7.5%;
    }
    nav ul {
        margin-right: 10px;
        gap : 5px;
    }
    .nav-logo-title a {
        padding-left: 15%;
        width : 100px;
    }
    #header {
        height : 40vh;
    }
    .header-filler::before {
        font-size : 12px;
    }
    .article-long h2 {
        color : #1E1B4B;
    }
    .row-first {

    }
    .article {
        flex-basis: 75%;
    }
    img[alt="Article 1"], img[alt="Article 2"], img[alt="Article 3"], img[alt="Article 4"] {
        width: 100px;
        height: 100px;
    }
    img[alt="Article 4"] {
        transform: translate(-50%, -170%);
    }
    form {
        max-width : 250px;
    }

}

/* ----------------------------------------------AREA SPESIFIK UNTUK MEDIA TERTENTU di Dev Mode!!!---------------------------------------------- */

@media screen and (width: 912px) { /*ditujukan untuk Surface Pro 7*/
    .nav-logo-title img {
        transform: translate(15px, 50%);
    }
    nav {
        max-height : 5%;
    }
}

@media screen and (width: 820px) { /*ditujukan untuk iPad Air*/
    .nav-logo-title img {
        transform: translate(15px, 50%);
    }
    nav {
        max-height : 5%;
    }
}
@media screen and (width: 412px) { /*ditujukan untuk Samsung Galaxy S20 Ultra*/
    nav ul {
        --_privatemargin : 20px; /*menambah _ seolah" private class di Java / JS */
        margin-right: var(--_privatemargin); /*ini butuh margin-right yg sama seperti dekstop*/

        /*
        Lalu semisal, margin-right: var(--_privatemargin); dan --_privatemargin ini tidak ada, 
        Bisa diberi BACKUP PLAN margin-right: var(--_privatemargin, 25px);
        */
    }
}
@media screen and (max-width: 280px) { /*ditujukan untuk Galaxy Fold*/
    nav ul li a {
        font-size: 0.6rem;;
    }
    /*widthnya butuh kecil untuk Fold ini*/
    .mini-one, .mini-two, .mini-three, .mini-four {
        width : 200px;
    }
}