:root {
    --text-primary: #3f51b5;
    --dark-text-primary: #4f5fb5; /* 400 */
    --text-secondary: #5c6ab5; /* 300 */
    --text-secondary-2: #2e43b5; /* 500 */
    --bg-primary: #3f51b5;
}

/* font */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url('/fonts/poppins-v24-latin-100.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 100;
  src: url('/fonts/poppins-v24-latin-100italic.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url('/fonts/poppins-v24-latin-200.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  src: url('/fonts/poppins-v24-latin-200italic.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/poppins-v24-latin-300.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('/fonts/poppins-v24-latin-300italic.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/poppins-v24-latin-regular.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/poppins-v24-latin-italic.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/poppins-v24-latin-500.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('/fonts/poppins-v24-latin-500italic.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/poppins-v24-latin-600.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url('/fonts/poppins-v24-latin-600italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/poppins-v24-latin-700.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/poppins-v24-latin-700italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('/fonts/poppins-v24-latin-800.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url('/fonts/poppins-v24-latin-800italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/poppins-v24-latin-900.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url('/fonts/poppins-v24-latin-900italic.woff2') format('woff2');
}


@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/lora-v37-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/lora-v37-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/lora-v37-latin-500.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  src: url('/fonts/lora-v37-latin-500italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/lora-v37-latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: italic;
  font-weight: 600;
  src: url('/fonts/lora-v37-latin-600italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/lora-v37-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/lora-v37-latin-700italic.woff2') format('woff2');
}

.small-scrollbar::-webkit-scrollbar {
    height: 4px !important;
    width: 4px !important;
}

.small-scrollbar::-webkit-scrollbar-thumb {
    background: #a3a3a3 !important;
    border-radius: 10px !important;
}

.small-scrollbar::-webkit-scrollbar-track {
    background: #e5e5e5 !important;
}

/* Hide scrollbar for Chrome, Edge, Safari */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
.hide-scrollbar {
    scrollbar-width: none;
}

/* Hide scrollbar for IE/Edge */
.hide-scrollbar {
    -ms-overflow-style: none;
}

.bg-blue {
    background-color: rgb(223, 246, 255);
}

article span {
    text-decoration: none !important;
}

.dark\:ring-yellow:is(.dark *) {
    --tw-ring-color: rgba(227 160 8 / 0.4);
}

.ring-blue {
    --tw-ring-color: rgba(118 169 250 / 0.4);
}

.ring-green {
    --tw-ring-color: rgba(107 114 128 / 0.4);
}

.article:last-child .border-b-2 {
    border-bottom: none;
}

#nprogress .bar {
    height: 5px !important;
}

body {
    font-family: "Poppins", sans-serif;
}

.floating {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes floating {
    0% {
        transform: translate(0, 0px);
    }
    50% {
        transform: translate(0, 8px);
    }
    100% {
        transform: translate(0, -0px);
    }
}
.floating-4 {
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes floating-4 {
    0% {
        transform: translate(0, 0px);
    }
    50% {
        transform: translate(0, 8px);
    }
    100% {
        transform: translate(0, -0px);
    }
}

.aspect-4x3 {
    aspect-ratio: 4/3 !important;
}

:is(.dark .dark\:bg-dark) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 30 30 / var(--tw-bg-opacity));
}

:is(.dark .dark\:bg-dark-gray) {
    --tw-bg-opacity: 1;
    background-color: rgb(40 42 58 / var(--tw-bg-opacity));
}

::-webkit-scrollbar {
    width: 8px;
    cursor: pointer;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-primary) !important;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: silver;
}

.overflow-x-auto::-webkit-scrollbar {
    display: none; /* Hides scrollbar in Webkit browsers (Chrome, Safari, Edge) */
}

.overflow-x-auto {
    -ms-overflow-style: none; /* Hides scrollbar in Internet Explorer */
    scrollbar-width: none; /* Hides scrollbar in Firefox */
}

.prose {
    --tw-prose-bullets: inherit !important;
    --tw-prose-counters: inherit !important;
}

@media (min-width: 640px) {
    .border-640px-none {
        border-style: none !important;
    }
}

@media (min-width: 768px) {
    .md\:bg-transparent {
        background-color: transparent !important;
    }
}

@media (min-width: 1024px) {
    .border-desktop-none {
        border-style: none !important;
    }
}

@media print {
    @page {
        margin-top: 2.5cm; /* Atas */
        margin-right: 2cm; /* Kanan */
        margin-bottom: 2.5cm; /* Bawah */
        margin-left: 3cm; /* Kiri */
    }
}