body {
    background-color: #CED1D7;
    color: #474554;
    padding: 0em;
    margin: 0em;
    font-family: 'Trebuchet Ms', 'Times New Roman', Times, serif;
    overflow-x: hidden;
    cursor: url('https://lh3.googleusercontent.com/pw/AP1GczOlUKPsO0epN3PCKijIhyDj-OJuyl2GHX9kJAJmXZ3BqHNZ8nf2dPVsMKKH2x-1b35zD7uZxsxlzl8GQ6aAOLE42hA7d0EuKM9WBbhf1e6wrEOpwg=s30-p-k'), auto;

    a{
        cursor: url('https://lh3.googleusercontent.com/pw/AP1GczOlUKPsO0epN3PCKijIhyDj-OJuyl2GHX9kJAJmXZ3BqHNZ8nf2dPVsMKKH2x-1b35zD7uZxsxlzl8GQ6aAOLE42hA7d0EuKM9WBbhf1e6wrEOpwg=s30-p-k'), auto;
    }
}

html{
    scroll-behavior: smooth;
}

p {
    font-size: 0.9em;
    line-height: 1.5em;
}

nav {
    position: sticky;
    top: 0;
    margin: 0;
    width: 100%;
    background: linear-gradient(45deg, rgba(180,160,254,1) 0%, rgba(236,151,240,1) 53%, rgba(242,214,126,1) 100%);
    border-bottom: 0.3em solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, rgb(131, 96, 255) 0%, rgb(238, 63, 244) 53%, rgb(246, 203, 61) 100%);
    z-index: 100;
    cursor: url('cursor.png'), auto;

    a{
        cursor: url('cursor.png'), auto;
    }
}

.nav-logo-title{
    a{
        top: -.1em;
    }

    img {
        visibility: hidden;
    }
}

nav li {
    display: inline-block;
    margin-left: .8em;
    margin-right: .8em;
}

nav ul {
    list-style-type: none;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 1em;
    padding-left: 1em;
    margin: 0;
    font-size: 1em;
    z-index: 1;
}

nav a {
    text-decoration: none;
    color: #474554;
}

.nav-logo-title {
    margin-left: 0.5em;
    height: 2em;
    display: flex;
    align-items: center;
    position: relative;

    a {
        position: relative;
        left: -1.3em;
    }
}

aside::after {
    content: '';
    display: block;
    height: .15em;
    width: 1.2em;
    height: .2em;
    width: 1.2em;
    border: .15em solid #474554;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    background-color: rgba(180,160,254,1);
    position: absolute;
    top: .37em;
}

aside {
    height: .2em;
    width: 1.2em;
    border: .15em solid #474554;
    border-left: 0;
    border-right: 0;
    background-color: rgba(180,160,254,1);
    position: fixed;
    left: .3em;
    top: .5em;
    align-content: right;
    z-index: 101;
    cursor: url('cursor.png'), auto;
    transition: 0.3s;

    h2 {
        position: relative;
        top: -.6em;
        visibility: hidden;
        height: fit-content;
        width: 7.06em;
        background-color: rgba(180,160,254,1);
        margin-bottom: 0;
        line-height: 1.5;
        padding-top: .7em;
        display: block;
        text-align: left;
        text-indent: .3em;
    }

    ul {
        visibility: hidden;
        margin-top: 0;
        position: relative;
        top: -1em;
        height: fit-content;
        width: 8.1em;
        background-color: rgba(180,160,254,1);
        margin-bottom: -1.4em;
        text-align: left;
        list-style-type: none;
        padding-left: -2em;
        padding-bottom: 1em;

        li {
            text-indent: -2em;
        }
    }

    a {
        text-decoration: none;
        color: #f0f0f0;
        font-weight: 1000;
        cursor: url('cursor.png'), auto;
    }

    a:hover {
        color: rgb(16, 106, 28);
    }
}


aside:hover {
    h2 {
        visibility: visible;
    }

    ul {
        visibility: visible;
    }
}

#header {
    margin-top: 1em;
    margin-left: 1em;
    margin-right: 2em;


    h1 {
        font-size: 4.6em;
        width: min-content;
        line-height: 1.3em;
        margin-bottom: 0.6em;
        margin-top: 1.4em;
        margin-left: 0.2em;
    }

    h3 {
        font-weight: 600;
        font-size: 1.3em;
        text-align: justify;
        margin-bottom: 1.1em;
    }

    p {
        padding-left: 1em;
        border: 0.2em solid;
        border-color: rgb(155, 129, 252);
        border-bottom: 0;
        border-top: 0;
        border-right: 0;
        text-align: justify;
    }

    abbr {
        color: rgb(109, 69, 255);
        font-size: 1.1em;
        font-weight: 700;
    }
}

#header::before{
    content: '';
    display: flex;
    justify-content: center;
    height: 17em;
    width: 88%;
    border: 0.3em solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(45deg, rgb(131, 96, 255) 0%, rgb(238, 63, 244) 53%, rgb(246, 203, 61) 100%);
    position: absolute;
    top: 6em;
    z-index: -1;

}

#header::after{
    /* margin: -1em; */
    content: '';
    display: block;
    height: 10em;
    width: 47%;
    border: 0.7em solid;
    border-right: 0;
    border-image-slice: 1;
    border-image-source: linear-gradient(125deg, rgba(98,101,254,1) 0%, rgba(118,249,252,1) 53%, rgba(100,251,120,1) 100%);
    position: absolute;
    top: 9em;
    right: 0;
    z-index: -1;
}

.content-first {
    margin-left: 1em;
    margin-right: 2em;

    h2 {
        margin-top: 2.1em;
        margin-bottom: 1em;
        font-size: 1.5em;
        text-decoration: underline;
        text-decoration-color: rgb(238, 63, 244);
        text-underline-offset: 0.09em;
    }

    p {
        padding-left: 1em;
        margin-bottom: 1.5em;
        border: 0.2em solid;
        border-color: rgb(237, 120, 241);
        border-bottom: 0;
        border-top: 0;
        border-right: 0;
        text-align: justify;
    }
}

.content-first::after {
    content: '';
    display: block;
    position: absolute;
}

.content-second {
    margin-top: 4em;
    margin-bottom: 5em;
    background-color: #474554;
    padding-top: 1em;
    padding-bottom: 0.5em;
    color: #CED1D7;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, rgb(131, 96, 255) 0%, rgb(238, 63, 244) 53%, rgb(246, 203, 61) 100%);
    border-top: .3em solid;
    border-bottom: .3em solid;

    h2, h4, p {
        margin-left: 1em;
        margin-right: 2em;
    }

    h2 {
        margin-left: .65em;
        font-size: 1.5em;
        text-decoration: underline;
        text-decoration-color: rgb(246, 203, 61);
        text-underline-offset: 0.09em;
    }

    h4 {
        font-size: 1.05em;
    }

    p {
        padding-left: 1em;
        margin-bottom: 1.5em;
        border: 0.2em solid;
        border-color: rgb(246, 203, 61);
        border-bottom: 0;
        border-top: 0;
        border-right: 0;
        text-align: justify;
    }
}

.articles {
    margin-bottom: 3em;
    h3, p, img, a {
        margin-left: 1em;
        margin-right: 2em;
    }

    tr {
        display: inline-flex;
        flex-direction: column;
    }

    img {
        height: 7em;
        width: 7em;
        border-radius: 50%;
        position: relative;
        top: -.2em;
        left: .3em;
        margin-left: .7em;
        float: right;
        border: .4em double rgba(98,101,254,1);
        z-index: -1;
    }

    td {
        margin-bottom: 4em;
    }
}

.row-first {
    margin-bottom: 2em;

    p {
        padding-left: 1em;
        margin-bottom: 1.5em;
        border: 0.2em solid;
        border-color: rgb(133, 135, 252);
        border-bottom: 0;
        border-top: 0;
        border-right: 0;
        text-align: justify;
    }

    a {
        text-decoration: none;
        color: white;
        width: fit-content;
        height: fit-content;
        padding: .4em 1em;
        border-radius: 1em;
        background: linear-gradient(45deg, rgba(37,39,168,1) 0%, rgba(125,69,184,1) 100%);
        float: right;
    }

    a:hover {
        color: white;
        background: linear-gradient(225deg, rgba(37,39,168,1) 0%, rgba(125,69,184,1) 100%);
    }

    img{
        content: url('https://lh3.googleusercontent.com/pw/AP1GczMszO6zMXXUnmwLGDDHVhetbdJnp03o-cEZs0jhvXd6QHxp9szWx97GzGjfWGb_cxCnA4NFzUWHelKqahXTgngOUktGjUUsUdeKd32LfHXR2hlECg=s100-p-k');
    }
}

.row-second {
    margin-top: 4em;
    color: #CED1D7;

    h3 {
        text-align: center;
    }

    p {
        line-height: 1.5em;
        margin-bottom: 1em;
        text-align: center;
    }

    td {
        margin-top: -3em;
    }

    td img {
        float: none;
        display: block;
        margin: auto;
        z-index: 2;
        border: .4em double #CED1D7;
        content: url('https://lh3.googleusercontent.com/pw/AP1GczNXZpoBjG9q2mD44_OuyFHouhcI6t0ce4DaDra7ACrBT4i1AVxh1yOpUP6-URptMgxYc9YooMRVju-4h-QiMIBAJA3JwK7FWQGO4a-xDRHEektUJg=s100-p-k');
    }
}

.articles::after{
    content: '';
    display: block;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, rgb(131, 96, 255) 0%, rgb(238, 63, 244) 53%, rgb(246, 203, 61) 100%);
    border-top: .3em solid;
    border-bottom: .3em solid;
    background-color: #474554;
    width: 100%;
    height: 32em;
    position: relative;
    top: -34em;
    z-index: -1;
    margin-bottom: -31em;
}

.mini-one, .mini-two, .mini-three, .mini-four {
    margin-left: 1em;
    margin-right: 2em;

    h2 {
        -webkit-text-stroke-color: #000080;
        -webkit-text-stroke-width: .03em;
        font-size: 2em;
        color: transparent;
        text-transform: uppercase;

        text-shadow: 
        1px 1px 4px #fff,
        5px 5px 20px #2828be;

        height: fit-content;
        width: fit-content;
        text-align: left;
    }

    img {
        float: right;
        height: 7em;
        width: 7em;
        border-radius: 50%;
        position: relative;
        left: .5em;
        margin-left: .7em;
        border: .2em dashed rgba(98,101,254,1);
        z-index: -1;
    }

    p {
        margin-bottom: 4em;
        border: 0.2em dashed;
        text-align: right;

        padding-right: 0;
        padding-left: 1em;
        border-color: rgb(133, 135, 252);
        border-bottom: 0;
        border-top: 0;
        border-right: 0;
        text-align: left;
    }
}

.mini-one {
    h2 {
        text-align: left;
        position: relative;
        left: 0em;
    }

    img{
        content: url('https://lh3.googleusercontent.com/pw/AP1GczMV6Oa-ZGrPMGysRObc99Z6Xm_dCALLQFExTENBrtJW6_bMY3uOdUN6YmorchBUgda0ZK_ISjwiMWccVy_GKJiGuXCBuqq02T7CkOzhfGX66eR2Jg=s100-p-k');
    }
}

.mini-two{
    img{
        content: url('https://lh3.googleusercontent.com/pw/AP1GczPQMnARhe3Hq9IHrcACj4uD39N2QSK4FTrgrIqWn9-RvhZYlunXja6BavGnx9bwL9piR3a9H0Vx_lGtT8u46wggzrmQFYkmjuH2hzrH0nKya3JGdw=s100-p-k');
    }
}

.mini-three{
    img{
        content: url('https://lh3.googleusercontent.com/pw/AP1GczOOsuCJ7hFFE9gNCI7fBl7R-m9s4OUQBy-8EXlJ_HORELghLRzRQ2KTK1FBtmbwj2VKiWQ5d0652it_k68AT4c2dKjW1B3tsqV20bVBumWN51Q0bw=s100-p-k');
    }
}

.mini-four{
    img{
        content: url('https://lh3.googleusercontent.com/pw/AP1GczM2MSFCFTEsSzZJKMrbMEiNW7Isj7sNKW-NtM_EAwqXoLVttMXiXqTPFCMv-W4JSkVAfrHszSIaa5con6Hr-9yM3oaQNJ7mZ6fVvvyTp5iY7qR2jw=s100-p-k');
    }
}

footer {
    background-color: #474554;
    color: #CED1D7;
    border-top: .3em solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, rgb(58, 61, 255) 0%, rgb(60, 251, 254) 53%, rgb(64, 254, 89) 100%);
    position: relative;
    width: 100%;

    h3, p, form {
        margin-left: 1em;
    }
}

.footer-logo {
    h3 {
        font-size: 2em;
        text-indent: -.6em;
        font-weight: 1;
    }

    p{
        margin-top: -1.5em;
    }
}

.footer-logo::after {
    content: '';
    display: block;
    height: .1em;
    width: 22em;
    margin: auto;
    background-color: #CED1D7;
    margin-top: 2em;
}

.footer-form {
    margin-top: 2em;

    p{
        font-size: 1em;
        margin-bottom: .5em;
    }

    label {
        font-size: 1em;
    }

    form {
        p{
            text-indent: -1em;
            margin-right: 0;
        }

        button {
            margin-top: 1em;
            
        }
    }
}

.footer-form::after {
    content: '';
    display: block;
    height: .1em;
    width: 22em;
    margin: auto;
    background-color: #CED1D7;
    margin-top: 2em;
}

.footer-credit {
    margin-top: 2em;
    margin-right: 5em;
    margin-left: 3.5em;
    text-align: center;
    padding-bottom: 1em;

    h3 {
        font-weight: 1;
    }
}

/* buat nanti di bigger screen supaya balik 3 kolom */
/* tr {
    display: contents;
} */

@media screen and (min-width: 768px) {
    nav {
        a {
            font-size: 1.1em;
            top: .1em;
        }
    }

    aside, aside::after {
        height: .3em;
        width: 1.3em;

        h2 {
            top: -.545em;
        }
    }

    aside::after {
        top: .47em;
    }

    p {
        font-size: 1em;
    }

    nav li {
        display: inline-block;
        margin-left: 5%;
        margin-right: 5%;
    }

    #header::before{
        height: 17em;
        width: 87vw;
    }

    #header::after{
        width: 72%;
    }

    #header, .content-first, .row-second {
        margin-left: 2.5em; 
        margin-right: 3.5em;
    }

    .content-first {
        h2 {
            font-size: 2em;
        }
    }

    .content-second {
        h2, h4, p {
            margin-left: 2.5em; 
            margin-right: 3.5em;
        }

        h2 {
            font-size: 2em;
            margin-left: 1.2em;
        }

        h4 {
            font-size: 1.5em;
            margin-left: 1.6em;
        }
    }

    .row-first {
        h3, p {
            margin-left: 2.5em; 
            margin-right: 3.5em;
        }

        h3 {
            margin-left: 1.75em;
            font-size: 1.5em;
        }

        a{
            position: relative;
            top: -.9em;
        }
    }

    .articles {
        margin-bottom: 7em;
    }

    .articles:after {
        height: 27em;
        top: -28.5em;
    }

    .mini-one, .mini-two, .mini-three, .mini-four {
        h2, p, img {
            margin-left: 2em; 
            margin-right: 3em;
        }

        p {
            text-align: justify;
        }

        img {
            top: -.5em;
        }
    }

    .footer-logo::after {
        width: 90%;
        height: .2em;
    }

    .footer-form::after {
        height: .2em;
        width: 90%;
    }
    
}


@media screen and (min-width: 1024px) {
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .nav-logo-title {
        a{
            text-indent: 1.5em;
        }

        img{
            visibility: visible;
            content: url('https://lh3.googleusercontent.com/pw/AP1GczOuBsqC8gdAxvko6Dknb5-4Wj5bWDGTAdKIGej11yDKZxRPkK8rlQj06JAXsY_puPcSTfLWiHqp0ZNHMSFWYfYIIUSLennZk_ZxluvVF4CxoSEXhg=s100-p-k');
            width: 2em;
            height: 2em;
        }
    }

    nav {
        padding-top: .3em;
        padding-bottom: .3em;
        height: 3em;
        display: flex;
    }

    nav ul {
        position: absolute;
        right: 3em;
        padding-top: 1.25em;
    }

    nav li {
        display: inline-block;
        margin-left: 5%;
        margin-right: 5%;
    }

    p {
        font-size: 1.2em;
    }

    aside::after {
        content: '';
        display: block;
        visibility: hidden;
    }
    
    aside {
        align-content: right;
        visibility: hidden;
        position: absolute;
        float: left;
        left: 8em;
        top: 36.5em;
        z-index: 0;
        cursor: url('https://lh3.googleusercontent.com/pw/AP1GczOlUKPsO0epN3PCKijIhyDj-OJuyl2GHX9kJAJmXZ3BqHNZ8nf2dPVsMKKH2x-1b35zD7uZxsxlzl8GQ6aAOLE42hA7d0EuKM9WBbhf1e6wrEOpwg=s30-p-k'), auto;
    
        h2 {
            visibility: visible;
            /* position: absolute;
            top: -.6em; */
            float: left;
            height: none;
            width: none;
            background-color: transparent;
            color: rgb(109, 69, 255);
            margin-bottom: 0;
            line-height: 1.5em;
            padding-top: none;
            padding-bottom: .2em;
            display: block;
            text-align: left;
            text-indent: .3em;
        }
    
        ul {
            visibility: visible;
            margin-top: 0;
            /* position: absolute;
            top: -1em; */
            float: left;
            height: none;
            width: none;
            background-color: transparent;
            margin-bottom: 0em;
            text-align: left;
            list-style-type: circle;
            list-style: outside url('https://lh3.googleusercontent.com/pw/AP1GczNcPIgSz8Q2y7zDMg_-LdMQbKkEXUn9N2if6-QqVO583ryJW2wGnCKCT-HUe2k0a3wbyUkUjDKm16kldJL1NKqXp-1-ANjs4xupNSwGfedch5XKpg=s18-p-k');
            padding-left: -2em;
            padding-bottom: 1em;
    
            li {
                text-indent: 0em;
                line-height: 1.5em;
                font-size: 1.1em;
            }

            /* li::before{
                content: '';
                display: block;
                background-color: black;
                height: 12px;
                width: 12px;
            } */
        }
    
        a {
            text-decoration: none;
            color: #474554;
            font-weight: 1000;
            cursor: url('https://lh3.googleusercontent.com/pw/AP1GczOlUKPsO0epN3PCKijIhyDj-OJuyl2GHX9kJAJmXZ3BqHNZ8nf2dPVsMKKH2x-1b35zD7uZxsxlzl8GQ6aAOLE42hA7d0EuKM9WBbhf1e6wrEOpwg=s30-p-k'), auto;
        }
    
        a:hover {
            color: rgb(109, 69, 255);
        }
    }

    #header::before{
        height: 17em;
        width: 94vw;
    }

    #header, .content-first, .row-second {
        margin-left: 2.5em; 
        margin-right: 3.5em;
    }

    .content-first {
        margin-left: 30%;
        margin-right: 15%;
    }

    .content-second {
        h2, h4, p {
            margin-left: 15%;
            margin-right: 15%;
        }
    }

    .articles {
        h3, p, img, a {
            margin-left: 1em;
            margin-right: 2em;
        }
    }
    
    tr.row-first {
        margin-top: 2em;
        margin-bottom: 2em;
        margin-left: 8%;
        margin-right: 8%;

        display: block;

        p {
            padding-left: 1em;
            margin-bottom: 1.5em;
            border: 0.2em solid;
            border-color: rgb(133, 135, 252);
            border-bottom: 0;
            border-top: 0;
            border-right: 0;
            text-align: justify;
        }

        img {
            height: 7em;
            width: 7em;
            border-radius: 50%;
            position: relative;
            top: -.2em;
            left: .3em;
            margin-left: .7em;
            float: right;
            border: .4em double rgba(98,101,254,1);
            z-index: -1;
        }
    
        a {
            text-decoration: none;
            color: white;
            display: block;
            width: 10em;
            height: fit-content;
            text-align: center;
            padding: .4em 1em;
            border-radius: 1em;
            background: linear-gradient(45deg, rgba(37,39,168,1) 0%, rgba(125,69,184,1) 100%);
            float:none;
            margin: auto;
            margin-top: 3em;
            position: relative;
        }
    
        a:hover {
            color: white;
            background: linear-gradient(225deg, rgba(37,39,168,1) 0%, rgba(125,69,184,1) 100%);
        }

        td{
            padding-bottom: 0em;
            padding-right: 1em;
            /* border: 1px solid black; */
            vertical-align: top;
        }
    }
    
    tr.row-second {
        margin-top: 12em;
        color: #CED1D7;
        display: inline-flex;
        flex-direction: column;

        h3 {
            font-size: 1.5em;
            text-align: center;
            color: rgb(246, 203, 61);
        }
    
        p {
            line-height: 1.5em;
            margin-bottom: 1em;
            text-align: center;
            margin-left: 25%;
            margin-right: 25%;
        }
    
        td {
            margin-top: -3em;
        }
    
        img {
            float: none;
            display: block;
            margin: auto;
            z-index: 2;
            border: .4em double #CED1D7;
        }

        img:hover {
            border-style: dotted;
            border-color: rgb(246, 203, 61);
        }
    }

    .articles::after{
        content: '';
        display: block;
        border-image-slice: 1;
        border-image-source: linear-gradient(90deg, rgb(131, 96, 255) 0%, rgb(238, 63, 244) 53%, rgb(246, 203, 61) 100%);
        border-top: .3em solid;
        border-bottom: .3em solid;
        background-color: #474554;
        width: 100%;
        height: 35em;
        position: relative;
        top: -34.5em;
        z-index: -1;
    }

    div.mini-one {
        margin-top: -4em;
        margin-left: 8%;
        display: block;
        height: fit-content;
        width: 40%;
        float: left;
    }
    div.mini-two {
        margin-top: -4em;
        margin-right: 8%;
        display: block;
        height: fit-content;
        width: 40%;
        float: right;
    }
    div.mini-three {
        margin-left: 8%;
        margin-top: 5.6em;
        display: block;
        height: fit-content;
        width: 40%;
        float: left;
    }
    div.mini-four {
        margin-right: 8%;
        margin-top: 2em;
        display: block;
        height: fit-content;
        width: 40%;
        float: right;
    }

    footer {
        clear: both;
        background-color: #474554;
        color: #CED1D7;
        border-top: .3em solid;
        border-image-slice: 1;
        border-image-source: linear-gradient(90deg, rgb(58, 61, 255) 0%, rgb(60, 251, 254) 53%, rgb(64, 254, 89) 100%);
        position: relative;
        width: 100%;
        height: 23em;

        h3, p, form {
            margin-left: 1em;
        }
    }

    .footer-form {
        position: absolute;
        top: 3%;
        right: 20%;
    }

    .footer-logo {
        position: absolute;
        top: 15%;
        left: 10%;
    }

    .footer-credit {
        position: absolute;
        text-align: left;
        left: 6%;
        bottom: 15%;
    }

    .footer-logo::after {
        content: '';
        display: block;
        height: .2em;
        width: 17em;
        margin: auto;
        background-color: #CED1D7;
        margin-top: 2em;
        transform: rotate(90deg);
        position: absolute;
        top: 90%;
        left: 30em;
    }

    .footer-form::after {
        display: none;
    }
}