/*Milik Louis Setyandaru Tri Ananda || 0706012210038 || IMT'22 || UNIVERSITAS CIPUTRA*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
:root{
    scroll-behavior: smooth;
}

*{
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #EEEEEE;
    text-decoration: none;
}
body{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    overflow-x: hidden;
}
@media screen and (max-width: 793px) {
.page-wrapper{
    background-color: #42213d;
    display: inline-block;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.page-wrapper nav{
    background-color: #21111f;
    position: relative;
    display: table;
    top: 0;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 5% ;
    padding-bottom: 1% ;
    width: 100%;
    height: 70px;
    z-index: 3;
}
nav div{
    padding-left: 1%;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.page-wrapper nav a{
    text-decoration: none;
}
.nav-logo-title {
    background-color: transparent;
}
.nav-logo-title a{
    color: white;
    padding-top: 3px;
    margin-left:3px;
    font-size: 20px;
    text-transform: uppercase;
    background-color: transparent;
}
.nav-logo-title img{
    content: url("https://i.pinimg.com/736x/e7/68/c2/e768c2540a41cf632c94e05633408062.jpg");
    max-width:30px;
    border-radius: 100%;
    position: absolute;
    margin: 0% -15%;
}
nav ul {
    align-items: center;
    list-style: none;
    gap: 1rem;
    width: 100%;
    background-color: transparent;

}
nav ul li{
    text-align: center;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: 0.4s all ease;
    background-color: transparent;
    list-style-type: none;
    margin-left: 6%;
}
nav ul li a{
    font-size: 12px;
    color: #EEEEEE;
    text-transform: uppercase;
}
lihover{
    color: #cdcdcd;
    transition: 0.4s all ease;
}

li::after{
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -5px;
    left :0;
    background-color: #cdcdcd;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

li:hover::after{
    transform: scaleX(1);
    transform-origin: bottom left;
}
section{
    position: relative;
    position: center;
    padding-top: 45%;
    margin: auto;
    background-color: transparent;
    text-align: center;
    align-items: center;
    align-content: center;
    width: 89%;
    padding-bottom: 10%   ;
}
section h1{
    font-size: 30px;
}
section h3{
    font-size: 15px;
}
section p{
    font-size: 13px;
}
.header-texts abbr{
    font-style: italic;
    font-weight: bold;
    font-size: 15px;
}
#header .header-filler{
    justify-content: center;
    align-content: center;
    align-items: center;
    place-items: center;
    background-color: darkseagreen;
    position: absolute;
    opacity: 80%;
    left: 45%;
    top:100px;
    right: 50%;
    border-radius: 60px;
    animation: animasilogonike 5s  ease infinite alternate  ;
}
.header-filler{
    background-color: white;
    width: 30px;
    height: 30px;
    z-index: 1;
}
@keyframes animasilogonike {
    0%{
        content: "";
        opacity: 100%;
        position: absolute;
        background-color: #EEEEEE;
        transform: rotate(9deg);
        z-index:1;
    }
    50%{
        content: "";
        opacity: 100%;
        position: absolute;
        transform: scale(200%);
        background-color: white;
        border-radius: 60px;
        width: 30px;

    }
    100%{
        content: "";
        opacity: 100%;
        position: absolute;
        transform: scale(300%);
        background-color: green;
        width: 50px;
        border-radius: 50px 0px 50px 0px;
        rotate: -15deg;
        border-color: #EEEEEE;
        border-style: solid;
        border-width: 2px;
        scale: 90%;

    }
}

.header-filler div{
    background-color: darkgoldenrod;
    border-radius: 60px;
    width: 30px;
    height: 30px;
    opacity: 80%;
    animation: animasilogonike1 5s  ease infinite alternate  ;
}
@keyframes animasilogonike1 {
    0% {
        content: "";
        opacity: 100%;
        position: absolute;
        background-color: #EEEEEE;
        transform: rotate(90deg);
        z-index: 1;
    }
    50%{content: "";
        opacity: 100%;
        position: absolute;
        background-color: white;
        border-radius: 60px;
        width: 30px;

    }
    100% {
        content: "";
        opacity: 100%;
        position: absolute;
        padding-left: -10px;
        background-color: greenyellow;
        width: 20px;
        border-radius: 50px 0px 50px 0px;
        transform: rotate(-45deg);
        border-color: #EEEEEE;
        border-style: solid;
        border-width: 2px;
        
    }
}

.content-aside{
    background-color: transparent;
    padding: 10px 30px 0px 30px ;

}
.content{
    background-color: transparent;
    text-align: center;
    align-items: center;
    align-content: center;
    position: relative;
    }

.content-first{
    border-radius: 70px;
    width: 100%;
    background-color: rgba(238, 238, 238, 0.48);
    align-items: center;
    align-content: center;
    margin-bottom: 100px;
    position: relative;
    transition: 0.5s ease ;
}
.content-first:hover{
    transform: scale(110%);
    border-radius: 120px;
    padding: 0px;
}
.content-first h2{
    font-weight: bold;
    font-size: 30px;
    padding: 10% 10% 0% 10%;
}
.content-first p {
    font-size: 13px;
    padding:0% 5% 10% 5%;
}
.content-second{
    background-color: rgba(238, 238, 238, 0.48);
    border-radius: 70px;
    width: 100%;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-bottom: 70px;
    position: relative;
    transition: 0.5s ease ;
}
.content-second:hover{
    transform: scale(110%);
    border-radius: 120px;
    padding: 0px;

}
.content-second h2{
    font-weight: bold;
    font-size: 30px;
    padding:10% 10% 0% 10%;

}
.content-second h4{
    font-size: 15px;
    padding:0% 5% 0% 5%;
}
.content-second p {
    font-size: 13px;
    padding:0% 5% 10% 5%;
}
aside {
    width:89%;
    margin:auto;
    align-items: center;
    align-content: center;
    justify-content: center;
    background-color: transparent;
    position: relative;
    float: top;
    border-style: solid;
    border-top-width: 5px;
    border-bottom-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    border-color: #EEEEEE;
    transition: 0.5s ease ;
    padding-bottom: 7%;
}
aside h2{
    text-align: center;
    font-weight: bold;
    font-size: 23px;
    margin-bottom: 1px;
    transition: 0.5s ease ;
}
aside h2:hover{
    font-size: 30px;
}
aside ul{
    margin-left:20vw;
}
aside a{
    font-size: 13px;
    text-align: center;

    transition: 0.5s ease ;
}
aside a:hover{
    font-size: 27px;
    font-weight: bold;
    color: black;

}
.articles{
    background-color: transparent;
    width: 100%;
    height: 100%;
}
table{
    background-color: transparent;
    height: 100%;
    width: 100%;
    display: flex;
    padding-left:5vw;
    padding-right:5vw;

}
table tr{
    align-content: center;
    align-items: center;
    text-align: center;
}
table tr .row-second{

}
.row-first{
    background-color:transparent;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type:x mandatory;
    scroll-padding: 0px;
    gap:20px;
    width:90vw;

}
.row-first td{
    margin: auto;
    padding-top : 30px;
    padding-bottom : 40px;
}
.row-first .article{
    background-color: rgba(238, 238, 238, 0.48);
    flex: 0 0 90vw;
    scroll-snap-align:start;
    border-radius: 50px;
}

.article h3 {
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 2vh;
    font-size: 22px;
    font-weight: bold;
    justify-content: center;
    text-align: center;
    border-color: #EEEEEE;
    border-style: solid;
    border-top-width: 0px;
    border-bottom-width: 3px;
    border-right-width: 0px;
    border-left-width: 0px;
}
.article p{
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom:3vh;
    font-size: 13px;
    justify-content: center;
    text-align: center;
}
.article a{
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius: 30px;
    background-color: #EEEEEE;
    color:#21111f ;
    font-weight: bold;
    font-size:15px;
    justify-content: center;
    text-align: center;
}
.article img {
    max-width:10em;
    max-height: 10em;
    border-radius: 100%;
    border-style: solid;
    border-color: #EEEEEE;
    border-width: 5px;
    object-fit: cover;
    margin-inline: auto;
}
.article:nth-child(1) img {
content: url("https://easydrawingguides.com/wp-content/uploads/2022/11/Low-Res-Kamado-Tanjiro-from-Demon-Slayer.png");
background-color: #EEEEEE;
}
.article:nth-child(2) img{
content: url("https://wallpapers-clan.com/wp-content/uploads/2022/09/zenitsu-pfp-1.jpg");
}
.article:nth-child(3) img{
content: url("https://wallpapers-clan.com/wp-content/uploads/2022/09/demon-slayer-inosuke-pfp-20.jpg");
}
.row-second{
    align-content: center;
    padding-left: 20%;
    padding-right: 20%;
}
.row-second td{
    float: left;
    margin-left: 20%;
    margin-right: 20%;
}
.article-long{
    background-color: rgba(238, 238, 238, 0.48);
    border-radius: 50px;
    text-align: center;
    padding-right: 5vw;
    padding-left: 5vw;
    margin-top: 3%;
    transition: 0.5s ease all;
}
.article-long:hover{
    scale: 110%;
    border-radius: 90px;
    padding-right: 1vw;
    padding-left: 1vw;
}
.article-long h3 {
    font-size: 18px;
    font-weight: bold;
    border-color: #EEEEEE;
    border-style: solid;
    border-top-width: 0px;
    border-bottom-width: 3px;
    border-right-width: 0px;
    border-left-width: 0px;
}
.article-long p {
    font-size: 15px;
    padding-top: 0vh;
}
.row-second img{
content: url("https://i.pinimg.com/564x/39/84/88/398488547b2a342ecccb26b60e6d8386.jpg") ;
    max-width:15em;
    max-height: 15em;
    border-radius: 100%;
    border-style: solid;
    border-color: #EEEEEE;
    border-width: 5px;
    margin-top : 30%;
    margin-bottom: 30%;
    transition: 0.5s ease-in-out;
    position: static;
    animation: drift 5s linear infinite alternate;
}
@keyframes drift {
    0%{
        opacity: 0%;
    }
    50%{
        opacity: 100%;
    }
    100%{
        opacity: 0%;
     
    }
}
.creativity{
    background-color: transparent;
    width: 100%;
    padding-top: 0%;
    align-content: center;
}
.creativity div{
   padding: 1%;
}
.creativity-wrapper{
    margin: auto;
    background-color: transparent;
    width: 89%;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-padding: 0px;
    gap:20px;
}
    .creativity-wrapper div{
        flex: 0 0 90vw;
        scroll-snap-align: start;
    }

.mini-one{
    background-color: rgba(238, 238, 238, 0.48);
    border-radius: 50px;
    padding-top: 10%;
    position: relative;
    width: content-box;
    transition: 0.5s ease ;
    margin:auto;
    align-content: center;
    justify-content: center;
}

.mini-one img{
content: url("https://i.pinimg.com/564x/6c/46/9d/6c469dc25e5a957f8ce2e8dbe3fddfbe.jpg");
    max-width:13em;
    border-radius: 100%;
    border-style: solid;
    border-color: #EEEEEE;
    border-width: 5px;
    position: relative;
    transform: translate(20vw,0vh);
    margin: auto;
}
.mini-two{
    background-color: rgba(238, 238, 238, 0.48);
    float: right;
    border-radius: 50px;
    position: relative;
    width: content-box;
    transition: 0.5s ease ;
}

.mini-two img{
content: url("https://i.pinimg.com/564x/8d/4e/65/8d4e655191692d7f739db403a44b45d4.jpg") ;
    max-width:13em;
    border-radius: 100%;
    border-style: solid;
    border-color: #EEEEEE;
    border-width: 5px;
    margin: 25px;
    margin-top:50px;
    position: relative;
    transform: translate(20vw,0vh);
    margin: auto;
}
.mini-three{
    background-color: rgba(238, 238, 238, 0.48);
    float: right;
    border-radius: 50px;
    position: relative;
    width: content-box;
    transition: 0.5s ease ;
}

.mini-three img{
    content: url("https://i.pinimg.com/564x/91/42/1a/91421a8ed2a0ea6ef807b15c30426e2f.jpg");
    max-width:13em;
    border-radius: 100%;
    border-style: solid;
    border-color: #EEEEEE;
    border-width: 5px;
    margin: 25px;
    margin-top:50px;
    position: relative;
    transform: translate(20vw,0vh);
    margin: auto;
}
.mini-four{
    background-color: rgba(238, 238, 238, 0.48);
    float: right;
    border-radius: 50px;
    position: relative;
    width: content-box;
    transition: 0.5s ease ;
}

.mini-four img{
    content: url("https://i.pinimg.com/564x/ce/49/91/ce4991cfe89caea1413317affc0cc37d.jpg");
    max-width:13em;
    border-radius: 100%;
    border-style: solid;
    border-color: #EEEEEE;
    border-width: 5px;
    margin: 25px;
    margin-top:50px;
    position: relative;
    transform: translate(20vw,0vh);
    margin: auto;
}
.mini-content{
    padding-left: 10vw;
    text-align: center;
    margin: auto;
    width: 90%;
    background-color: transparent;
    border-style: solid;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 3px;
    border-bottom-width: 0px;
}
.mini-content h2{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0%;
    padding-bottom: 0%;
}
.mini-content p {
    padding-top: 0%;
    font-size: 15px;
    margin-bottom: 0%;
}
footer{
    width: 100%;
    align-content: center;
    background-color: transparent;
    display: table;
    flex-direction: row;
    border-top-width: 5px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-style: solid;
    border-color: #EEEEEE;
}
footer div{

}
.footer-logo{
    background-color: #21111f;
    padding: 10%;

}
.footer-logo h3{
    font-size: 20px;
}
.footer-logo p{
    font-size: 10px;
}
.footer-form{
    background-color: #21111f;
    padding: 10%;
    border-top-width: 5px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-style: solid;
    border-color: #EEEEEE;
}
.footer-form p{
    font-size: 20px;
    padding-top: 2px;
    margin-bottom: -1px;
}
.footer-form form p{
    font-size: 20px;
}
.footer-form form button{
    margin-top: 2px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 30px;
    background-color: #EEEEEE;
    color:#21111f ;
    font-weight: bold;
    font-size: 15px;
    justify-content: center;
    text-align: center;
}
.footer-form #name {
    width: 300px;
    color: #21111f;
}
.footer-form #gender {
    width: 300px;
    color: #21111f;
}
.footer-form option{
    color: #21111f;
}
.footer-credit{
    font-size: 10px;
    background-color: #21111f;
    border-top-width: 5px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-style: solid;
    border-color: #EEEEEE;
    padding:5%;
    padding-top: 10%;

}
}
/*==================================================== Batas Untuk Tablet ====================================================*/
@media screen and (min-width: 794px) {
    .page-wrapper{
        background-color: #42213d;
        display: inline-block;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .page-wrapper nav{
        background-color: #21111f;
        display: flex;
        position: sticky;
        top: 0;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding-top: 1% ;
        padding-bottom: 1% ;
        width: 100%;
        height: 40px;

        z-index: 3;

    }
    nav div{
        padding-left: 1%;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .page-wrapper nav a{
        text-decoration: none;
    }
    .nav-logo-title{
        padding-left: 5%;
        background-color:transparent;
        float: right;

    }
    .nav-logo-title a{
        color: white;
        float: right;
        margin-top: 9px;
        margin-left: 4px;
        font-size: 15px;
        text-transform: uppercase;
    }
    .nav-logo-title img{
        content: url("https://i.pinimg.com/736x/e7/68/c2/e768c2540a41cf632c94e05633408062.jpg");
        max-width:40px;
        border-radius: 100%;
    }
    nav ul {
        align-items: center;
        list-style: none;
        display: flex;
        gap: 1rem;
        width: 35%;
        float: right;
    }
    nav ul li{
        text-align: center;
        display: inline-block;
        position: relative;
        cursor: pointer;
        transition: 0.4s all ease;
        background-color: transparent;
        float: left;
        list-style-type: none;
        width: 18%;
    }
    nav ul li a{
        font-weight: normal;
        font-size: 15px;
        color: #EEEEEE;
        text-transform: uppercase;
    }
    lihover{
        color: #cdcdcd;
        transition: 0.4s all ease;
    }

    li::after{
        content: "";
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: -5px;
        left :0;
        background-color: #cdcdcd;
        transform-origin: bottom right;
        transition: transform 0.3s ease-out;
    }

    li:hover::after{
        transform: scaleX(1);
        transform-origin: bottom left;
    }
    section{
        position: relative;
        padding-top: 20%;
        margin: auto;
        background-color: transparent;
        text-align: center;
        align-items: center;
        align-content: center;
        width: 70%;
        padding-bottom: 10%   ;
    }
    section h1{
        font-size: 40px;
    }
    section h3{
        font-size: 20px;
    }
    section p{
        font-size: 15px;
    }
    .header-texts abbr{
        font-style: italic;
        font-weight: bold;
        font-size: 16px;
    }
    #header .header-filler{
        justify-content: center;
        align-content: center;
        align-items: center;
        place-items: center;
        background-color: darkseagreen;
        position: absolute;
        opacity: 80%;
        left: 50%;
        top:100px;
        right: 50%;
        border-radius: 60px;
        animation: animasilogonike 5s  ease infinite alternate  ;
    }
    .header-filler{
        background-color: white;
        width: 30px;
        height: 30px;
        z-index: 1;
    }
    @keyframes animasilogonike {
        0%{
            content: "";
            opacity: 100%;
            position: absolute;
            background-color: #EEEEEE;
            transform: rotate(910deg);
            z-index:1;
        }
        50%{
            content: "";
            opacity: 100%;
            position: absolute;
            transform: scale(200%);
            background-color: white;
            border-radius: 60px;
            width: 30px;

        }
        100%{
            content: "";
            opacity: 100%;
            position: absolute;
            transform: scale(300%);
            background-color: green;
            width: 38px;
            border-radius: 50px 0px 50px 0px;
            rotate: -20deg;
            border-color: #EEEEEE;
            border-style: solid;
            border-width: 2px;

        }
    }

    .header-filler div{
        background-color: transparent;
        border-radius: 60px;
        width: 30px;
        height: 30px;
        opacity: 80%;
        animation: animasilogonike1 5s  ease infinite alternate  ;
    }
    @keyframes animasilogonike1 {
        0% {
            content: "";
            opacity: 100%;
            position: absolute;
            background-color: #EEEEEE;
            transform: rotate(90deg);
            z-index: 1;
        }
        50%{content: "";
            opacity: 100%;
            position: absolute;

            background-color: white;
            border-radius: 60px;
            width: 30px;

        }
        100% {
            content: "";
            opacity: 100%;
            position: absolute;
            padding-left: -10px;
            background-color: greenyellow;
            width: 20px;
            border-radius: 50px 0px 50px 0px;
            transform: rotate(-45deg);
            border-color: #EEEEEE;
            border-style: solid;
            border-width: 2px;

        }
    }

    .content-aside{
        background-color: transparent;
        padding: 20px;

    }
    .content{
        background-color: transparent;
        text-align: center;
        margin: auto;
        align-items: center;
        align-content: center;
        padding: 20px;
    }

    .content-first{
        border-radius: 60px;
        width: 67%;
        background-color: rgba(238, 238, 238, 0.48);
        align-items: center;
        align-content: center;
        margin: auto;
        padding: 20px;
        margin-bottom: 100px;
        position: relative;
        transition: 0.5s ease ;
    }
    .content-first:hover{
        transform: scale(110%);
        border-radius: 90px;
        padding: 10px;
    }
    .content-first h2{
        font-weight: bold;
        font-size: 40px;
        margin: -10px;
    }
    .content-first p {
        padding: 5px;
        font-size: 15px;
        margin: 10px;

    }
    .content-second{
        background-color: rgba(238, 238, 238, 0.48);
        border-radius: 60px;
        width: 67%;
        align-items: center;
        align-content: center;
        margin: auto;
        text-align: center;
        padding: 30px;
        margin-bottom: 100px;
        position: relative;
        transition: 0.5s ease ;
    }
    .content-second:hover{
        transform: scale(110%);
        border-radius: 90px;
        padding: 10px;

    }
    .content-second h2{
        font-weight: bold;
        font-size: 40px;
        margin: -10px;
    }
    .content-second h4{
        font-size: 15px;
    }
    .content-second p {
        padding: 5px;
        font-size: 15px;
        margin: 10px;
    }
    aside {
        width:67%;
        margin:auto;
        align-items: center;
        align-content: center;
        justify-content: center;
        background-color: transparent;
        position: relative;
        float: top;
        padding: 40px;
        border-style: solid;
        border-top-width: 10px;
        border-bottom-width: 0px;
        border-right-width: 0px;
        border-left-width: 0px;
        border-color: #EEEEEE;
        transition: 0.5s ease ;
    }
    aside h2{
        text-align: center;
        font-weight: bold;
        font-size: 32px;
        margin-bottom: 1%;
        transition: 0.5s ease ;
    }
    aside h2:hover{
        font-size: 40px;
    }
    aside ul{
        margin: auto;
        padding-right: 20%;
        padding-left: 45%;
    }
    aside a{
        font-size: 17px;
        text-align: center;

        transition: 0.5s ease ;
    }
    aside a:hover{
        font-size: 21px;
        font-weight: bold;
        color: black;

    }
    .articles{
        background-color: transparent;
        width: 100%;
        height: 100%;
    }
    table{
        background-color: transparent;
        margin: auto;
        height: 100%;
        width: 100%;
        display: flex;

    }
    table tr{
        align-content: center;
        align-items: center;
        text-align: center;
    }
    table tr .row-second{

    }
    .row-first{
        background-color:transparent;
        display: flex;
        overflow-x: scroll;
        scroll-snap-type:x mandatory;
        scroll-padding: 1px;
        gap:20px;
        width: 420px;
        margin: 1rem auto;

    }
    .row-first td{
        margin: auto;
        padding-top : 30px;
        padding-bottom : 50px;
    }
    .row-first .article{
        background-color: rgba(238, 238, 238, 0.48);
        flex: 0 0 360px;
        scroll-snap-align:start;
        padding-left: 30px;
        padding-right: 30px;
        border-radius: 50px;
    }

    .article h3 {
        font-size: 17px;
        font-weight: bold;
        justify-content: center;
        text-align: center;
        border-color: #EEEEEE;
        border-style: solid;
        border-top-width: 0px;
        border-bottom-width: 4px;
        border-right-width: 0px;
        border-left-width: 0px;
    }
    .article p{
        font-size: 15px;
        justify-content: center;
        text-align: center;
    }
    .article a{
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 10px;
        padding-top: 10px;
        border-radius: 30px;
        background-color: #EEEEEE;
        color:#21111f ;
        font-weight: bold;
        font-size: 20px;
        justify-content: center;
        text-align: center;
    }
    .article img {
        max-width:10em;
        max-height: 10em;
        border-radius: 100%;
        border-style: solid;
        border-color: #EEEEEE;
        border-width: 5px;
        object-fit: cover;
        margin-inline: auto;
    }
    .article:nth-child(1) img {
        content: url("https://easydrawingguides.com/wp-content/uploads/2022/11/Low-Res-Kamado-Tanjiro-from-Demon-Slayer.png");
        background-color: #EEEEEE;
    }
    .article:nth-child(2) img{
        content: url("https://wallpapers-clan.com/wp-content/uploads/2022/09/zenitsu-pfp-1.jpg");
    }
    .article:nth-child(3) img{
        content: url("https://wallpapers-clan.com/wp-content/uploads/2022/09/demon-slayer-inosuke-pfp-20.jpg");
    }
    .row-second{
        align-content: center;
        padding-left: 20%;
        padding-right: 20%;
    }
    .row-second td{
        float: left;
        margin-left: 20%;
        margin-right: 20%;
    }
    .article-long{
        background-color: rgba(238, 238, 238, 0.48);
        border-radius: 50px;
        text-align: center;
        padding-right: 40px;
        padding-left: 40px;
        margin-left: 0%;
        margin-top: 6%;
        transition: 0.5s ease all;
    }
    .article-long:hover{
        scale: 120%;
        border-radius: 90px;
        padding-right: 20px;
        padding-left: 20px;
    }
    .article-long h3 {
        font-size: 25px;
        font-weight: bold;
        justify-content: center;
        text-align: center;
        border-color: #EEEEEE;
        border-style: solid;
        border-top-width: 0px;
        border-bottom-width: 4px;
        border-right-width: 0px;
        border-left-width: 0px;
    }
    .article-long p {
        margin-top: -15px;
        padding-top: -20px;
    }
    .row-second img{
        content: url("https://i.pinimg.com/564x/39/84/88/398488547b2a342ecccb26b60e6d8386.jpg") ;
        max-width:10em;
        max-height: 10em;
        border-radius: 100%;
        border-style: solid;
        border-color: #EEEEEE;
        border-width: 5px;
        margin-top : 30%;
        margin-bottom: 30%;
        transition: 0.5s ease-in-out;
        position: static;
        animation: drift 5s linear infinite alternate;
    }
    @keyframes drift {
        0%{
            transform: translateX(0%);
            opacity: 0%;
        }
        50%{
            opacity: 100%;
        }
        100%{
            transform: translateX(200%);
            opacity: 0%;
        }
    }
    .creativity{
        background-color: transparent;
        width: 100%;
        padding-top: 0%;
        align-content: center;
    }
    .creativity div{
        padding: 1%;
    }
    .creativity-wrapper{
        background-color: transparent;
        width: 93%;
        margin-left:2%;
        display: flex;
        flex-direction: column;
    }

    .mini-one{
        background-color: rgba(238, 238, 238, 0.48);

        float: right;
        border-radius: 50px;
        padding-top: 1%;
        position: relative;
        width: content-box;
        transition: 0.5s ease ;
        scale: 90%;
    }
    .mini-one:hover{
        scale: 100%;
        border-radius: 100px 0px 100px 0px;
        border-width: 5px;
        border-color: white;
        border-style: solid;

    }
    .mini-one img{
        content: url("https://i.pinimg.com/564x/6c/46/9d/6c469dc25e5a957f8ce2e8dbe3fddfbe.jpg");
        max-width:10em;
        border-radius: 100%;
        border-style: solid;
        border-color: #EEEEEE;
        border-width: 5px;
        margin: 15px;
        position: absolute;
    }
    .mini-two{
        background-color: rgba(238, 238, 238, 0.48);
        float: right;
        border-radius: 50px;
        position: relative;
        width: content-box;
        transition: 0.5s ease ;
        scale: 90%;
    }
    .mini-two:hover{
        scale: 100%;
        border-radius: 100px 0px 100px 0px;
        border-width: 5px;
        border-color: white;
        border-style: solid;
    }
    .mini-two img{
        content: url("https://i.pinimg.com/564x/8d/4e/65/8d4e655191692d7f739db403a44b45d4.jpg") ;
        max-width:10em;
        border-radius: 100%;
        border-style: solid;
        border-color: #EEEEEE;
        border-width: 5px;
        margin: 25px;
        margin-top:17px;
        position: absolute;
    }
    .mini-three{
        background-color: rgba(238, 238, 238, 0.48);
        float: right;
        border-radius: 50px;
        position: relative;
        width: content-box;
        transition: 0.5s ease ;
        scale: 90%;
    }
    .mini-three:hover{
        scale: 100%;
        border-radius: 100px 0px 100px 0px;
        border-width: 5px;
        border-color: white;
        border-style: solid;
    }

    .mini-three img{
        content: url("https://i.pinimg.com/564x/91/42/1a/91421a8ed2a0ea6ef807b15c30426e2f.jpg");
        max-width:10em;
        border-radius: 100%;
        border-style: solid;
        border-color: #EEEEEE;
        border-width: 5px;
        margin: 25px;
        margin-top:15px;
        position: absolute;
    }
    .mini-four{
        background-color: rgba(238, 238, 238, 0.48);
        float: right;
        border-radius: 50px;
        position: relative;
        width: content-box;
        transition: 0.5s ease ;
        scale: 90%;
    }
    .mini-four:hover{
        scale: 100%;
        border-radius: 100px 0px 100px 0px;
        border-width: 5px;
        border-color: white;
        border-style: solid;
    }

    .mini-four img{
        content: url("https://i.pinimg.com/564x/ce/49/91/ce4991cfe89caea1413317affc0cc37d.jpg");
        max-width:10em;
        border-radius: 100%;
        border-style: solid;
        border-color: #EEEEEE;
        border-width: 5px;
        margin: 25px;
        margin-top:15px;
        position: absolute;
    }
    .mini-content{
        width: 70%;
        background-color: transparent;
        float: right;
        border-style: solid;
        border-left-width: 5px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 0px;
    }
    .mini-content h2{
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 0%;
        padding-bottom: 0%;
    }
    .mini-content p {
        padding-top: 0%;
        font-size: 13px;
        margin-bottom: 0%;
    }
    footer{
        width: 100%;
        align-content: center;
        background-color: transparent;
        display: flex;
        flex-direction: row;
        border-top-width: 0px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-style: solid;
        border-color: #EEEEEE;
    }
    footer div{
        float: left;
    }
    .footer-logo{
        background-color: #21111f;
        border-top-width: 0px;
        border-left-width: 0px;
        border-right-width: 5px;
        border-bottom-width: 0px;
        border-style: solid;
        border-color: #EEEEEE;
        padding:5%;
    }
    .footer-logo h3{
        font-size: 22px;
    }
    .footer-logo p{
        font-size: 12px;
    }
    .footer-form{
        background-color: #21111f;
        padding-left: 5%;
        padding-right: 5%;
    }
    .footer-form p{
        font-size: 17px;
        padding-top: 2px;
        margin-bottom: -1px;
    }
    .footer-form form p{
        font-size: 13px;
    }
    .footer-form form button{
        margin-top: 2px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 5px;
        padding-top: 5px;
        border-radius: 30px;
        background-color: #EEEEEE;
        color:#21111f ;
        font-weight: bold;
        font-size: 12px;
        justify-content: center;
        text-align: center;
    }
    .footer-form #name {
        width: 210px;
        color: #21111f;
    }
    .footer-form #gender {
        width: 210px;
        color: #21111f;
    }
    .footer-form option{
        color: #21111f;
    }
    .footer-credit{
        background-color: #21111f;
        border-top-width: 0px;
        border-left-width: 5px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-style: solid;
        border-color: #EEEEEE;
        padding:5%;
        padding-top: 10%;
    }
}
/*==================================================== Batas Untuk Laptop ====================================================*/
@media screen and (min-width: 1020px) {
    .page-wrapper{
        background-color: #42213d;
        display: inline-block;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .page-wrapper nav{
        background-color: #21111f;
        display: flex;
        position: sticky;
        top: 0;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding-top: 1% ;
        padding-bottom: 1% ;
        width: 100%;
        height: 40px;
        font-weight: 600;
        z-index: 3;

    }
    nav div{
        padding-left: 1%;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .page-wrapper nav a{
        text-decoration: none;
    }
    .nav-logo-title{
        background-color:#21111f;
        float: right;
        padding-left: 5%;

    }
    .nav-logo-title a{
        color: white;
        float: right;
        margin-top: 7px;
        font-size: 23px;
        text-transform: uppercase;
    }
    .nav-logo-title img{
        content: url("https://i.pinimg.com/736x/e7/68/c2/e768c2540a41cf632c94e05633408062.jpg");
        max-width:40px;
        border-radius: 100%;
    }
    nav ul {
        align-items: center;
        list-style: none;
        display: flex;
        gap: 1rem;
        width: 35%;
        float: right;
    }
    nav ul li{
        text-align: center;
        display: inline-block;
        position: relative;
        cursor: pointer;
        transition: 0.4s all ease;
        background-color: #21111f;
        float: left;
        list-style-type: none;
        margin-left: 1%;
        width: 15%;
    }
    nav ul li a{
        font-size: 15px;
        color: #EEEEEE;
        font-weight: bold;
        text-transform: uppercase;
    }
    lihover{
        color: #cdcdcd;
        transition: 0.4s all ease;
    }

    li::after{
        content: "";
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: -5px;
        left :0;
        background-color: #cdcdcd;
        transform-origin: bottom right;
        transition: transform 0.3s ease-out;
    }

    li:hover::after{
        transform: scaleX(1);
        transform-origin: bottom left;
    }
    section{
        position: relative;
        position: center;
        padding-top: 8%;
        margin: auto;
        background-color: #42213d;
        text-align: center;
        align-items: center;
        align-content: center;
        width: 70%;
        padding-bottom: 10%   ;
    }
    section h1{
        font-size: 56px;
    }
    section h3{
        font-size: 25px;
    }
    section p{
        font-size: 20px;
    }
    .header-texts abbr{
        font-style: italic;
        font-weight: bold;
        font-size: 23px;
    }
    #header .header-filler{
        justify-content: center;
        align-content: center;
        align-items: center;
        place-items: center;
        background-color: #42213d;
        position: absolute;
        opacity: 80%;
        left: 50%;
        top:100px;
        right: 50%;
        border-radius: 60px;
        animation: animasilogonike 5s  ease infinite alternate  ;
    }
    .header-filler{
        background-color: #42213d;
        width: 30px;
        height: 30px;
        z-index: 1;
    }
    @keyframes animasilogonike {
        0%{
            content: "";
            opacity: 100%;
            position: absolute;
            background-color: #42213d;
            transform: rotate(910deg);
            z-index:1;
        }
        50%{
            content: "";
            opacity: 100%;
            position: absolute;
            transform: scale(200%);
            background-color: white;
            border-radius: 60px;
            width: 30px;

        }
        100%{
            content: "";
            opacity: 100%;
            position: absolute;
            transform: scale(300%);
            background-color: green;
            width: 50px;
            border-radius: 50px 0px 50px 0px;
            rotate: -35deg;
            border-color: #EEEEEE;
            border-style: solid;
            border-width: 2px;

        }
    }

    .header-filler div{
        background-color: #42213d;
        border-radius: 60px;
        width: 30px;
        height: 30px;
        opacity: 80%;
        animation: animasilogonike1 5s  ease infinite alternate  ;
    }
    @keyframes animasilogonike1 {
        0% {
            content: "";
            opacity: 100%;
            position: absolute;
            background-color: #42213d;
            transform: rotate(90deg);
            z-index: 1;
        }
        50%{content: "";
            opacity: 100%;
            position: absolute;

            background-color: white;
            border-radius: 60px;
            width: 30px;

        }
        100% {
            content: "";
            opacity: 100%;
            position: absolute;
            padding-left: -10px;
            background-color: greenyellow;
            width: 20px;
            border-radius: 50px 0px 50px 0px;
            transform: rotate(-45deg);
            border-color: #EEEEEE;
            border-style: solid;
            border-width: 2px;

        }
    }

    .content-aside{
        background-color: #42213d;
        padding: 30px;

    }
    .content{
        background-color: #42213d;
        text-align: center;
        margin: auto;
        align-items: center;
        align-content: center;
        padding: 30px;
    }

    .content-first{
        border-radius: 80px;
        width: 67%;
        background-color: rgba(238, 238, 238, 0.48);
        align-items: center;
        align-content: center;
        margin: auto;
        padding: 40px;
        margin-bottom: 100px;
        position: relative;
        transition: 0.5s ease ;
    }
    .content-first:hover{
        transform: scale(110%);
        border-radius: 120px;
        padding: 10px;
    }
    .content-first h2{
        font-weight: bold;
        font-size: 56px;
        margin: -10px;
    }
    .content-first p {
        padding: 20px;
        font-size: 20px;
        margin: 10px;

    }
    .content-second{
        background-color: rgba(238, 238, 238, 0.48);
        border-radius: 80px;
        width: 67%;
        align-items: center;
        align-content: center;
        margin: auto;
        text-align: center;
        padding: 40px;
        margin-bottom: 100px;
        position: relative;
        transition: 0.5s ease ;
    }
    .content-second:hover{
        transform: scale(110%);
        border-radius: 120px;
        padding: 10px;

    }
    .content-second h2{
        font-weight: bold;
        font-size: 56px;
        margin: -10px;
    }
    .content-second h4{
        font-size: 20px;
    }
    .content-second p {
        padding: 20px;
        font-size: 20px;
        margin: 10px;
    }
    aside {
        width:67%;
        margin:auto;
        align-items: center;
        align-content: center;
        justify-content: center;
        background-color: #42213d;
        position: relative;
        float: top;
        padding: 40px;
        border-style: solid;
        border-top-width: 10px;
        border-bottom-width: 0px;
        border-right-width: 0px;
        border-left-width: 0px;
        border-color: #EEEEEE;
        transition: 0.5s ease ;
    }
    aside h2{
        text-align: center;
        font-weight: bold;
        font-size: 40px;
        margin-bottom: 1%;
        transition: 0.5s ease ;
    }
    aside h2:hover{
        font-size: 45px;
    }
    aside ul{
        margin: auto;
        padding-right: 20%;
        padding-left: 45%;
    }
    aside a{
        font-size: 25px;
        text-align: center;

        transition: 0.5s ease ;
    }
    aside a:hover{
        font-size: 27px;
        font-weight: bold;
        color: black;

    }
    .articles{
        background-color: darkred;
        width: 100%;
        height: 100%;
    }
    table{
        background-color: #42213d;
        margin: auto;
        height: 100%;
        width: 100%;
        display: flex;

    }
    table tr{
        align-content: center;
        align-items: center;
        text-align: center;
    }
    table tr .row-second{

    }
    .row-first{
        background-color:#42213d;
        display: flex;
        overflow-x: scroll;
        scroll-snap-type:x mandatory;
        scroll-padding: 1px;
        gap:20px;
        width: 560px;
        margin: 1rem auto;

    }
    .row-first td{
        margin: auto;
        padding-top : 30px;
        padding-bottom : 50px;
    }
    .row-first .article{
        background-color: rgba(238, 238, 238, 0.48);
        flex: 0 0 500px;
        scroll-snap-align:start;
        padding-left: 30px;
        padding-right: 30px;
        border-radius: 50px;
    }

    .article h3 {
        font-size: 25px;
        font-weight: bold;
        justify-content: center;
        text-align: center;
        border-color: #EEEEEE;
        border-style: solid;
        border-top-width: 0px;
        border-bottom-width: 4px;
        border-right-width: 0px;
        border-left-width: 0px;
    }
    .article p{
        font-size: 20px;
        justify-content: center;
        text-align: center;
    }
    .article a{
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 10px;
        padding-top: 10px;
        border-radius: 30px;
        background-color: #EEEEEE;
        color:#21111f ;
        font-weight: bold;
        font-size: 20px;
        justify-content: center;
        text-align: center;
    }
    .article img {
        max-width:10em;
        max-height: 10em;
        border-radius: 100%;
        border-style: solid;
        border-color: #EEEEEE;
        border-width: 5px;
        object-fit: cover;
        margin-inline: auto;
    }
    .article:nth-child(1) img {
        content: url("https://easydrawingguides.com/wp-content/uploads/2022/11/Low-Res-Kamado-Tanjiro-from-Demon-Slayer.png");
        background-color: #EEEEEE;
    }
    .article:nth-child(2) img{
        content: url("https://wallpapers-clan.com/wp-content/uploads/2022/09/zenitsu-pfp-1.jpg");
    }
    .article:nth-child(3) img{
        content: url("https://wallpapers-clan.com/wp-content/uploads/2022/09/demon-slayer-inosuke-pfp-20.jpg");
    }
    .row-second{
        align-content: center;
        padding-left: 20%;
        padding-right: 20%;
    }
    .row-second td{
        float: left;
        margin-left: 20%;
        margin-right: 20%;
    }
    .article-long{
        background-color: rgba(238, 238, 238, 0.48);
        border-radius: 50px;
        text-align: center;
        padding-right: 40px;
        padding-left: 40px;
        margin-left: 0%;
        margin-top: 3%;
        transition: 0.5s ease all;
    }
    .article-long:hover{
        scale: 120%;
        border-radius: 90px;
        padding-right: 20px;
        padding-left: 20px;
    }
    .article-long h3 {
        font-size: 25px;
        font-weight: bold;
        justify-content: center;
        text-align: center;
        border-color: #EEEEEE;
        border-style: solid;
        border-top-width: 0px;
        border-bottom-width: 4px;
        border-right-width: 0px;
        border-left-width: 0px;
    }
    .article-long p {
        margin-top: -15px;
        padding-top: -20px;
    }
    .row-second img{
        content: url("https://i.pinimg.com/564x/39/84/88/398488547b2a342ecccb26b60e6d8386.jpg") ;
        max-width:15em;
        max-height: 15em;
        border-radius: 100%;
        border-style: solid;
        border-color: #EEEEEE;
        border-width: 5px;
        margin-top : 30%;
        margin-bottom: 30%;
        transition: 0.5s ease-in-out;
        position: static;
        animation: drift 5s linear infinite alternate;
    }
    @keyframes drift {
        0%{
            transform: translateX(0%);
            opacity: 0%;
        }
        50%{
            opacity: 100%;
        }
        100%{
            transform: translateX(300%);
            opacity: 0%;

        }
    }


    .creativity{
        background-color: #42213d;
        width: 100%;
        padding-top: 0%;
        align-content: center;
    }
    .creativity div{
        padding: 1%;
    }
    .creativity-wrapper{
        background-color: #42213d;
        width: 93%;
        margin-left:2%;
        display: flex;
        flex-direction: column;
    }

    .mini-one{
        background-color: rgba(238, 238, 238, 0.48);
        float: right;
        border-radius: 50px;
        padding-top: 10%;
        position: relative;
        width: content-box;
        transition: 0.5s ease ;
        scale: 60%;
    }
    .mini-one:hover{
        scale: 90%;
        border-radius: 100px 0px 100px 0px;
        border-width: 5px;
        border-color: white;
        border-style: solid;

    }
    .mini-one img{
        content: url("https://i.pinimg.com/564x/6c/46/9d/6c469dc25e5a957f8ce2e8dbe3fddfbe.jpg");
        max-width:13em;
        border-radius: 100%;
        border-style: solid;
        border-color: #EEEEEE;
        border-width: 5px;
        margin: 25px;
        margin-top:50px;
        position: absolute;
    }
    .mini-two{
        background-color: rgba(238, 238, 238, 0.48);
        float: right;
        border-radius: 50px;
        position: relative;
        width: content-box;
        transition: 0.5s ease ;
        scale: 60%;
    }
    .mini-two:hover{
        scale: 90%;
        border-radius: 100px 0px 100px 0px;
        border-width: 5px;
        border-color: white;
        border-style: solid;

    }

    .mini-two img{
        content: url("https://i.pinimg.com/564x/8d/4e/65/8d4e655191692d7f739db403a44b45d4.jpg") ;
        max-width:13em;
        border-radius: 100%;
        border-style: solid;
        border-color: #EEEEEE;
        border-width: 5px;
        margin: 25px;
        margin-top:50px;
        position: absolute;
    }
    .mini-three{
        background-color: rgba(238, 238, 238, 0.48);
        float: right;
        border-radius: 50px;
        position: relative;
        width: content-box;
        transition: 0.5s ease ;
        scale: 60%;
    }
    .mini-three:hover{
        scale: 90%;
        border-radius: 100px 0px 100px 0px;
        border-width: 5px;
        border-color: white;
        border-style: solid;
    }

    .mini-three img{
        content: url("https://i.pinimg.com/564x/91/42/1a/91421a8ed2a0ea6ef807b15c30426e2f.jpg");
        max-width:13em;
        border-radius: 100%;
        border-style: solid;
        border-color: #EEEEEE;
        border-width: 5px;
        margin: 25px;
        margin-top:50px;
        position: absolute;
    }
    .mini-four{
        background-color: rgba(238, 238, 238, 0.48);
        float: right;
        border-radius: 50px;
        position: relative;
        width: content-box;
        transition: 0.5s ease ;
        scale: 60%;
    }
    .mini-four:hover{
        scale: 90%;
        border-radius: 100px 0px 100px 0px;
        border-width: 5px;
        border-color: white;
        border-style: solid;
    }

    .mini-four img{
        content: url("https://i.pinimg.com/564x/ce/49/91/ce4991cfe89caea1413317affc0cc37d.jpg");
        max-width:13em;
        border-radius: 100%;
        border-style: solid;
        border-color: #EEEEEE;
        border-width: 5px;
        margin: 25px;
        margin-top:50px;
        position: absolute;
    }
    .mini-content{
        width: 80%;
        background-color: transparent;
        float: right;
        border-style: solid;
        border-left-width: 5px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 0px;
    }
    .mini-content h2{
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 0%;
        padding-bottom: 0%;
    }
    .mini-content p {
        padding-top: 0%;
        font-size: 25px;
        margin-bottom: 0%;
    }
    footer{
        width:100%;
        align-content: center;
        background-color: transparent;
        display: flex;
        flex-direction: row;
        border-top-width: 0px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-style: solid;
        border-color: #EEEEEE;
    }
    footer div{
        float: left;
    }
    .footer-logo{
        width: 30%;
        background-color: #21111f;
        border-top-width: 0px;
        border-left-width: 0px;
        border-right-width: 5px;
        border-bottom-width: 0px;
        border-style: solid;
        border-color: #EEEEEE;
        padding:5%;
    }
    .footer-logo h3{
        font-size: 45px;
    }
    .footer-logo p{
        font-size: 20px;
    }
    .footer-form{
        width: 40%;
        background-color: #21111f;
        padding-left: 5%;
        padding-right: 5%;
    }
    .footer-form p{
        font-size: 25px;
        padding-top: 2px;
        margin-bottom: -1px;
    }
    .footer-form form p{
        font-size: 20px;
    }
    .footer-form form button{
        margin-top: 2px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 5px;
        padding-top: 5px;
        border-radius: 30px;
        background-color: #EEEEEE;
        color:#21111f ;
        font-weight: bold;
        font-size: 20px;
        justify-content: center;
        text-align: center;
    }
    .footer-form #name {
        width: 300px;
        color: #21111f;
    }
    .footer-form #gender {
        width: 300px;
        color: #21111f;
    }
    .footer-form option{
        color: #21111f;
    }
    .footer-credit{
        width: 30%;
        background-color: #21111f;
        border-top-width: 0px;
        border-left-width: 5px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-style: solid;
        border-color: #EEEEEE;
        padding:5%;
        padding-top: 10%;

    }
}