*{
    padding     :0;
    margin      :0;
    box-sizing  :border-box;}
    
html, body{
    font-family: Arial, sans-serif;
    height      :100%;  
    font-size   :14px;  
    background  :#fff;
    /**************
    ANTI COPY PASTE
    ***************/
    -webkit-user-select :none; 
    -khtml-user-select  :none; 
    -moz-user-select    :none; 
    -ms-user-select     :none; 
    user-select         :none;
}

header {
    background-image: linear-gradient(to right, #03305D, #004a90);
    height: 58px;
    color: #fff;
    padding: 0 20px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0; 
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    transition: 0.3s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
#header-left {
    display: flex;
    align-items: center;
    gap: 10px; /* Spasi antara logo dan teks */}
#search-container {
    display: flex;
    align-items: center;}
#search-bar {
    margin-left: 10px;
    padding: 5px;}
#header-buttons {
    display: flex;
    align-items: center;}
#header-buttons button {
    margin-left: 5px;
    padding: 8px 12px;
    background-image: none; 
    background-color: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;}
#header-buttons button:hover {
    color: #F6FF00;
    background-color: rgba(255, 255, 255, 0.1);}
#header-buttons a.active button {
    color: #F6FF00;
    background-color: rgba(0, 0, 0, 0.2);}

#container {
    display: flex;
    max-width: 100%;
    margin: 0px auto;
    margin-top: 58px;}
    
#left-sidebar {
    width: 180px;
    background-color: #fff;
    position: fixed;
    top: 58px;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 999;}
    
#main-content {
    flex: 1;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-left: 180px;
    min-height: 100vh;
    transition: margin-left 0.5s;}
#main-content.active {
    margin-left: 0px;}

/**********
BULLETS
**********/     
#main-content ol{
    margin:20px;
    margin-top:5px;}
#main-content ol li{
    list-style-type:Decimal;
    padding-left:1px;
    margin:5px 0 0 20px;}
#main-content ul li{
    list-style-type:Disc;
    padding-left:1px;
    margin:5px 0 0 20px;}
/***********************/ 

#box {
    position: left;
    text-align: justify;
    padding: 50px 33px;}
#box2 {
    position: left;
    padding: 40px 35px;}
#box3 {
    float: left;
    width:70%;
    padding: 5px 0px 0px 20px;}
#box4 {
    float: left;
    width:100%;
    padding: 5px 0px 0px 20px;}
#box5 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;}
#right-sidebar {
    width: 250px;
    background-color: #fff;
    padding: 0px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-right: 20px;}

footer {
    float: left;
    width: 100%;
    padding: 20px;
    text-align: center;
    padding-left: 250px;
    box-sizing: border-box;}
        
/***********************************************
UKURAN MEDIA 920
************************************************/

@media screen and (max-width: 920px) {
    /* Perubahan untuk layar berukuran kecil */
    header {
        padding: 5px;
        flex-direction: column;
        align-items: center;
        height: 58px;}
    #header-left {
        justify-content: center;
        width:100%;
        margin-bottom: -10px;}

    #search-container {
        display: none;}

    #header-buttons {
        width:100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;}
    
    #header-buttons button {
        margin-left: 0;
        padding: 2px;
        font-size: 10px;}

    #container {
        display: block;
        margin-top: 58px;}

    #main-content {
        margin-left: 0;}
    
    #left-sidebar {
        position: relative;
        width: 100%;
        top: 0;
        height: auto;}

    #right-sidebar {
        width: 100%;
        margin: 0px;}

    #main-content {
        padding: 10px;
        box-sizing: border-box;}

    footer {
        text-align: right;
        padding-left: 0;}

    #box, #box2 {
        padding: 40px 2px;}

    #box2 img {
        width: 100%; /* Ukuran lebar gambar 100% */
        height: auto;} /* Biarkan tinggi otomatis disesuaikan untuk mempertahankan rasio aspek */
}

/***********************************************
UKURAN MEDIA 500
************************************************/

@media screen and (max-width: 600px) {

#main-content {
    padding: 10px;}

#box3 {
    width:100%;
    padding: 5px;}

#box4 {
    padding: 0px;}

}