/* Reset margin dan padding di body */
body {
    background: radial-gradient(circle, #FFFFFF, #F0F0F0);
    margin: 0;
    padding: 0;
}

/* Kontainer utama, membuat layout terpusat */
#main {
    width: 85%;
    margin: 0 auto; /* Membuat konten terpusat */
}

/* Styling untuk header */
header {
    background: radial-gradient(circle, #FFA500, #FF4500);
    color: #000000;
    padding: 10px;
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Logo header */
header.logo {
    height: auto;
    max-width: 100px;
}

/* Header content */
.header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

/* Styling untuk judul */
.header-content h1, .site-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0;
}


/* Media Query untuk layout responsif */
@media (max-width: 768px) {
    #main {
        width: 90%;
    }

    header {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 10px;
        gap: 1rem;
    }

    .logo {
        max-height: 50px;
        max-width: 30px;
    }

    .header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .header-content h1, .site-title {
        font-size: 0.8rem;
        margin: 0;
    }
}

/* Kontainer utama */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0;
    width: 100%;
    margin: 0 auto; /* Memusatkan kontainer */
    align-items: flex-start;
    text-align: justify;
    box-sizing: border-box;
   
}

/* Konten kiri */
.left-content {
    flex: 1 1 60%; /* Konten kiri mengambil 60% lebar di layar besar */
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-family: "Times New Roman", Helvetica, sans-serif;
    font-size: 1rem;
}

.left-content img {
    width: 100%;
    display: block;
    margin: 0;
}

/* Konten kanan */
.right-content {
    flex: 1 1 30%; /* Konten kanan mengambil 30% lebar di layar besar */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Styling div di dalam konten kanan */

.right{
    width: 100%;
    padding: 2% 3%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    font-size: 1rem;
}

/* Styling untuk h2 di kiri dan kanan */
.left-content h1, .right-content h2 {
    font-family: "Times New Roman", Helvetica, sans-serif;
    font-weight: bold;
    color: #000;
}

.left-content h1 {
    font-size: 1.2rem;
}

.right-content h1 {
    font-size: 1.1rem;
}

.left-content h2, .right-content h2 {
    font-family: "Times New Roman", Helvetica, sans-serif;
    font-weight: bold;
    color: #FFA500;
}

.left-content h2 {
    font-size: 1.5rem;
}

.right-content h2 {
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .left-content{
        font-size:0.7rem ;
    }
    
    .right-content{
        font-size:1rem ;
    }
    
   .left-content h1, .right-content h1 {
        font-family: "Times New Roman", Helvetica, sans-serif;
        font-weight: bold;
        color: #000;
    }
    
    .left-content h1 {
        font-size: 0.8rem;
    }
    
    .right-content h1 {
        font-size: 0.8rem;
    } 
   
   .left-content h2, .right-content h2 {
        font-family: "Times New Roman", Helvetica, sans-serif;
        font-weight: bold;
        color: #FFA500;
    }
    
    .left-content h2 {
        font-size: 0.8rem;
    }
    
    .right-content h2 {
        font-size: 0.8rem;
    } 
}    


/* Footer */
footer {
    background: radial-gradient(circle, #FF4500, #FFA500);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: white;
    text-align: center;
    padding: 1px 0;
    width: 100%;
}

@media (max-width: 768px) {
    footer {
        background: radial-gradient(circle, #FF4500, #FFA500);
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        color: white;
        text-align: center;  
        padding: 1px 0;
        width: 100%;
    }
}

.button {
  background-color: Blue;
  border: 0;
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: Times New Roman,Helvetica,sans-serif;
  font-size: 1rem;
  letter-spacing: 0px;
  outline: 0;
  padding: 5px;
  position: relative;
  text-align: center;
  text-decoration: none;
  width:100%;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button:before {
	background-color: initial;
	background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 80%);
	border-radius: 125px;
	  content: "";
	  height: 50%;
	  left: 1%;
	  opacity: .2;
	  position: absolute;
	  top: 0;
	  transition: all .3s;
	  width: 30%;
}

.button:hover {
	box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
	transform: scale(1.05);
	color:gold;
}

@media (max-width: 768px) {
    .button {
        background-color: Blue;
        border: 0;
        border-radius: 20px;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-family: Times New Roman,Helvetica,sans-serif;
        font-size: 0.7rem;
        letter-spacing: 0px;
        outline: 0;
        padding: 5px;
        position: relative;
        text-align: center;
        text-decoration: none;
        width:100%;
        transition: all .3s;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }
    
    .button:before {
    	background-color: initial;
    	background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
    	border-radius: 85px;
    	  content: "";
    	  height: 50%;
    	  left: 1%;
    	  opacity: .5;
    	  position: absolute;
    	  top: 0;
    	  transition: all .3s;
    	  width: 92%;
    }
    
    .button:hover {
    	box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
    	transform: scale(1.05);
    	color:gold;
    }
}
.aN{   
	color:Blue; 
	list-style: none; 
	text-decoration: none; 
	font-size: 15Pt;
	Letter-spacing:1px;
}

.aN:HOVER{   
	color:RED; 
	font-weight: BOLD;
}



.aF{   
	color:#000000; 
	list-style: none; 
	text-decoration: none; 
	Letter-spacing:1px;
}

.aF:HOVER{   
	color:RED; 
	font-weight: BOLD;
}

.aL{   
	color:Red; 
	list-style: none; 
	text-decoration: none; 
	font-size: 14Pt;
	font-style: italic;
}

.aL:HOVER{   
	color:Blue; 
	font-weight: BOLD;
}


.button77 {
        background: linear-gradient(to right, #4facfe, #00f2fe); /* Gradien biru */
        color: white;
        border: 0;
        width: 100%;
        padding: 5px; 
        text-align: center; 
        font-family: "Times New Roman", Helvetica, sans-serif;
        font-size: 1.5rem;
        border-radius: 5px; 
        cursor: pointer; 
        transition: background 0.3s ease; 
        display: inline-block;
    }
    
    .button77:hover {
        background: linear-gradient(to right, #00f2fe, #4facfe); /* Gradien terbalik saat hover */
        color:red;
        font-weight:bold;
    }  
    
@media (max-width: 768px) {
    .button77 {
        background: linear-gradient(to right, #4facfe, #00f2fe); /* Gradien biru */
        color: white;
        border: 0;
        width: 100%;
        padding: 5px; 
        text-align: center; 
        font-family: "Times New Roman", Helvetica, sans-serif;
        font-size: 1rem;
        border-radius: 5px; 
        cursor: pointer; 
        transition: background 0.3s ease; 
        display: inline-block;
    }
    
    .button77:hover {
        background: linear-gradient(to right, #00f2fe, #4facfe); /* Gradien terbalik saat hover */
        color:red;
        font-weight:bold;
    } 
}