*, html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
}

.container-hp {
    display: none;
}

.container-pc {
    width: 100vw;
    height: 100vh;
}

.header {
    border: 2px solid violet;
    background-color: rgb(100, 29, 100);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

a {
    text-decoration: none;
    color: white;
}

.a-mata{
    color: black;
}

.mata {
    padding: 10px 10px 10px 5px;
    margin-right: auto;
    cursor: pointer;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    object-fit: cover;
    gap: 15px;
    font-size: 20px;
    font-weight: bold;
}

.login {
    margin: 10px 8px 10px 5px;
    text-align: center;
    color: white;
    padding: 8px;
    border: 2px solid red;
    border-radius: 20px;
    cursor: pointer;
    background-color: black;
    width: 100px;
}

.daftar {
    margin: 10px 8px 10px 5px;
    text-align: center;
    color: white;
    padding: 8px;
    border: 2px solid red;
    border-radius: 20px;
    cursor: pointer;
    background-color: black;
    width: 100px;
}

.konten-pc {
    width: 100%;
    height: 100%;
}

.isi {
    margin-top: 12px;
    width: 100%;
    height: 100%;
    display: flex;
    flex: row;
}

.img-main {
    width: 60%;
    height: 70%;
    margin-right: 15px;
    margin-left: 5px;
}

.artikel {
    font-size: 24px;
    color: white;
}

u {
    font-weight: bold;
    color: purple;
}

/* RESPONSIVE */
@media screen and (max-width: 360px) {
    *, html, body {
        max-height: 100vh;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: rgb(100, 29, 100);
    }

    .container-pc {
        display: none;
    }

    .container-hp {
        display: block;
        width: 100vw;
        height: 100vh;
    }

    .header-hp {
        animation: header 1.5s infinite;
    }

    @keyframes header {
        0% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: 2px solid red;
        }

        20% {
            border-left: 2px solid green;
            border-right: 2px solid green;
            border-bottom: 2px solid green;
            border-top: 2px solid green;
        }

        40% {
            border-left: 2px solid blue;
            border-right: 2px solid blue;
            border-bottom: 2px solid blue;
            border-top: 2px solid blue;
        }

        60% {
            border-left: 2px solid yellow;
            border-right: 2px solid yellow;
            border-bottom: 2px solid yellow;
            border-top: 2px solid yellow;
        }

        80% {
            border-left: 2px solid cyan;
            border-right: 2px solid cyan;
            border-bottom: 2px solid cyan;
            border-top: 2px solid cyan;
        }

        100% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: 2px solid red;
        }
    }

    .mata {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .konten-hp {
        width: 100%;
        height: 100%;
        animation: ganti-ganti 1.5s infinite;
    }

    @keyframes ganti-ganti {
        0% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: none;
        }

        20% {
            border-left: 2px solid green;
            border-right: 2px solid green;
            border-bottom: 2px solid green;
            border-top: none;
        }

        40% {
            border-left: 2px solid blue;
            border-right: 2px solid blue;
            border-bottom: 2px solid blue;
            border-top: none;
        }

        60% {
            border-left: 2px solid yellow;
            border-right: 2px solid yellow;
            border-bottom: 2px solid yellow;
            border-top: none;
        }

        80% {
            border-left: 2px solid cyan;
            border-right: 2px solid cyan;
            border-bottom: 2px solid cyan;
            border-top: none;
        }

        100% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: none;
        }
    }

    .img-hp {
        width: 100%;
    }

    .tombol-hp {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .login {
        width: 80%;
        font-size: 20px;
        font-weight: bold;
        animation: button 1.5s infinite;
    }

    .daftar {
        width: 80%;
        font-size: 20px;
        font-weight: bold;
        animation: button 1.5s infinite;
    }

    @keyframes button {
        0% {
            border-left: 2px solid green;
            border-right: 2px solid green;
            border-bottom: 2px solid green;
            border-top: 2px solid green;
        }

        20% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: 2px solid red;
        }

        40% {
            border-left: 2px solid cyan;
            border-right: 2px solid cyan;
            border-bottom: 2px solid cyan;
            border-top: 2px solid cyan;
        }

        60% {
            border-left: 2px solid blue;
            border-right: 2px solid blue;
            border-bottom: 2px solid blue;
            border-top: 2px solid blue;
        }

        80% {
            border-left: 2px solid yellow;
            border-right: 2px solid yellow;
            border-bottom: 2px solid yellow;
            border-top: 2px solid yellow;
        }

        100% {
            border-left: 2px solid green;
            border-right: 2px solid green;
            border-bottom: 2px solid green;
            border-top: 2px solid green;
        }
    }

    .livechat {
        font-size: 30px;
        animation: livechat 1.5s infinite;
    }

    @keyframes livechat {
        0% {
            color: red;
        }

        20% {
            color: green;
        }

        40% {
            color: blue;
        }

        60% {
            color: yellow;
        }

        80% {
            color: cyan;
        }

        100% {
            color: red;
        }
    }
}

@media screen and (min-width: 361px) and (max-width: 480px) {
    *, html, body {
        max-height: 100vh;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: rgb(100, 29, 100);
    }

    .container-pc {
        display: none;
    }

    .container-hp {
        display: block;
        width: 100vw;
        height: 100vh;
    }

    .header-hp {
        animation: header 1.5s infinite;
    }

    @keyframes header {
        0% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: 2px solid red;
        }

        20% {
            border-left: 2px solid green;
            border-right: 2px solid green;
            border-bottom: 2px solid green;
            border-top: 2px solid green;
        }

        40% {
            border-left: 2px solid blue;
            border-right: 2px solid blue;
            border-bottom: 2px solid blue;
            border-top: 2px solid blue;
        }

        60% {
            border-left: 2px solid yellow;
            border-right: 2px solid yellow;
            border-bottom: 2px solid yellow;
            border-top: 2px solid yellow;
        }

        80% {
            border-left: 2px solid cyan;
            border-right: 2px solid cyan;
            border-bottom: 2px solid cyan;
            border-top: 2px solid cyan;
        }

        100% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: 2px solid red;
        }
    }

    .mata {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .konten-hp {
        width: 100%;
        height: 100%;
        animation: ganti-ganti 1.5s infinite;
    }

    @keyframes ganti-ganti {
        0% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: none;
        }

        20% {
            border-left: 2px solid green;
            border-right: 2px solid green;
            border-bottom: 2px solid green;
            border-top: none;
        }

        40% {
            border-left: 2px solid blue;
            border-right: 2px solid blue;
            border-bottom: 2px solid blue;
            border-top: none;
        }

        60% {
            border-left: 2px solid yellow;
            border-right: 2px solid yellow;
            border-bottom: 2px solid yellow;
            border-top: none;
        }

        80% {
            border-left: 2px solid cyan;
            border-right: 2px solid cyan;
            border-bottom: 2px solid cyan;
            border-top: none;
        }

        100% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: none;
        }
    }

    .img-hp {
        width: 100%;
    }

    .tombol-hp {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .login {
        width: 80%;
        font-size: 20px;
        font-weight: bold;
        animation: button 1.5s infinite;
    }

    .daftar {
        width: 80%;
        font-size: 20px;
        font-weight: bold;
        animation: button 1.5s infinite;
    }

    @keyframes button {
        0% {
            border-left: 2px solid green;
            border-right: 2px solid green;
            border-bottom: 2px solid green;
            border-top: 2px solid green;
        }

        20% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: 2px solid red;
        }

        40% {
            border-left: 2px solid cyan;
            border-right: 2px solid cyan;
            border-bottom: 2px solid cyan;
            border-top: 2px solid cyan;
        }

        60% {
            border-left: 2px solid blue;
            border-right: 2px solid blue;
            border-bottom: 2px solid blue;
            border-top: 2px solid blue;
        }

        80% {
            border-left: 2px solid yellow;
            border-right: 2px solid yellow;
            border-bottom: 2px solid yellow;
            border-top: 2px solid yellow;
        }

        100% {
            border-left: 2px solid green;
            border-right: 2px solid green;
            border-bottom: 2px solid green;
            border-top: 2px solid green;
        }
    }

    .livechat {
        font-size: 30px;
        animation: livechat 1.5s infinite;
    }

    @keyframes livechat {
        0% {
            color: red;
        }

        20% {
            color: green;
        }

        40% {
            color: blue;
        }

        60% {
            color: yellow;
        }

        80% {
            color: cyan;
        }

        100% {
            color: red;
        }
    }

}

@media screen and (min-width: 481px) and (max-width: 720px) {
    *, html, body {
        max-height: 100vh;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: rgb(100, 29, 100);
    }

    .container-pc {
        display: none;
    }

    .container-hp {
        display: block;
        width: 100vw;
        height: 100vh;
    }

    .header-hp {
        animation: header 1.5s infinite;
    }

    @keyframes header {
        0% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: 2px solid red;
        }

        20% {
            border-left: 2px solid green;
            border-right: 2px solid green;
            border-bottom: 2px solid green;
            border-top: 2px solid green;
        }

        40% {
            border-left: 2px solid blue;
            border-right: 2px solid blue;
            border-bottom: 2px solid blue;
            border-top: 2px solid blue;
        }

        60% {
            border-left: 2px solid yellow;
            border-right: 2px solid yellow;
            border-bottom: 2px solid yellow;
            border-top: 2px solid yellow;
        }

        80% {
            border-left: 2px solid cyan;
            border-right: 2px solid cyan;
            border-bottom: 2px solid cyan;
            border-top: 2px solid cyan;
        }

        100% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: 2px solid red;
        }
    }

    .mata {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .konten-hp {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
        animation: ganti-ganti 1.5s infinite;
    }

    @keyframes ganti-ganti {
        0% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: none;
        }

        20% {
            border-left: 2px solid green;
            border-right: 2px solid green;
            border-bottom: 2px solid green;
            border-top: none;
        }

        40% {
            border-left: 2px solid blue;
            border-right: 2px solid blue;
            border-bottom: 2px solid blue;
            border-top: none;
        }

        60% {
            border-left: 2px solid yellow;
            border-right: 2px solid yellow;
            border-bottom: 2px solid yellow;
            border-top: none;
        }

        80% {
            border-left: 2px solid cyan;
            border-right: 2px solid cyan;
            border-bottom: 2px solid cyan;
            border-top: none;
        }

        100% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: none;
        }
    }

    .img-hp {
        width: 80%;
    }

    .tombol-hp {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }

    .login {
        width: 60%;
        font-size: 30px;
        font-weight: bold;
        animation: button 1.5s infinite;
    }

    .daftar {
        width: 60%;
        font-size: 30px;
        font-weight: bold;
        animation: button 1.5s infinite;
    }

    @keyframes button {
        0% {
            border-left: 2px solid green;
            border-right: 2px solid green;
            border-bottom: 2px solid green;
            border-top: 2px solid green;
        }

        20% {
            border-left: 2px solid red;
            border-right: 2px solid red;
            border-bottom: 2px solid red;
            border-top: 2px solid red;
        }

        40% {
            border-left: 2px solid cyan;
            border-right: 2px solid cyan;
            border-bottom: 2px solid cyan;
            border-top: 2px solid cyan;
        }

        60% {
            border-left: 2px solid blue;
            border-right: 2px solid blue;
            border-bottom: 2px solid blue;
            border-top: 2px solid blue;
        }

        80% {
            border-left: 2px solid yellow;
            border-right: 2px solid yellow;
            border-bottom: 2px solid yellow;
            border-top: 2px solid yellow;
        }

        100% {
            border-left: 2px solid green;
            border-right: 2px solid green;
            border-bottom: 2px solid green;
            border-top: 2px solid green;
        }
    }

    .livechat {
        font-size: 45px;
        animation: livechat 1.5s infinite;
    }

    @keyframes livechat {
        0% {
            color: red;
        }

        20% {
            color: green;
        }

        40% {
            color: blue;
        }

        60% {
            color: yellow;
        }

        80% {
            color: cyan;
        }

        100% {
            color: red;
        }
    }

}

@media screen and (min-width: 721px) and (max-width: 1024px) {
    *, html, body {
        max-height: 100vh;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: black;
    }

    .container-pc {
        display: block;
    }

    .artikel{
        font-size: 15px;
    }

}