:root {
    --primary: #3D00FF;
    --option1: #eee;
    --option3: #e4e4e4;
    --option2: hsl(0, 0%, 80%);
    --moon: #979797;
    --sun:#ffd900;
    --option4: rgb(150, 148, 148);
    --black-05: rgba(0, 0, 0, 0.5);
    --black-07: rgba(0, 0, 0, 0.7);
    --black: #000;
    --white: #fff;
}

.dark {
    --primary: #7045ff;      
    --option1: #25293a;
    --option2: #33384d;
    --option3: #2d3246;
    --option4: #4a4f68;
    
    --moon: #f0f0f0;
    --sun: #ffeb66;
    
    --black-05: rgba(255, 255, 255, 0.3);
    --black-07: rgba(255, 255, 255, 0.5);
    --black: #fff;          
    --white: #0f111a;
}

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

body, html {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    overflow: hidden; /* Memastikan body tidak ikutan scroll */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* DEFAULT STYLE */
a {cursor: pointer;}

/* CUSTOM SCROLL */
::-webkit-scrollbar {
    width: 1.25rem;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: .5rem;
  border: 3px solid rgba(0, 0, 0, 0);
  border-right: 5px solid rgba(0, 0, 0, 0);
  background-clip: content-box;
}

.line {
    width: 95%;
    height: 2px;
    background-color: var(--option2);
    border-radius: 100rem;
    margin-inline: auto;
    margin-block: 1rem;
}

/* DEFAULT FONT */
h1 { font-family: 'Playfair Display', serif; }
p { font-family: 'Segoe UI', sans-serif; }

@keyframes fadeTop {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}