/* =========================================
   HALDI.MY.ID
   BODY
========================================= */

/* ===============================
   BODY
=============================== */

body{

    font-family:"Segoe UI", Arial, sans-serif;

    font-size:16px;

    font-weight:400;

    color:var(--text);

    background:linear-gradient(135deg,#eef5ff,#dbeafe);

    line-height:1.7;

    overflow-x:hidden;

    padding-bottom:120px;

    animation:fadeBody .8s ease;

}


/* ===============================
   CONTAINER
=============================== */

.container{

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 20px;

}


/* ===============================
   SECTION
=============================== */

section{

    width:100%;

}


/* ===============================
   CARD
=============================== */

.card{

    background:var(--white);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


/* ===============================
   SELECTION
=============================== */

::selection{

    background:var(--primary);

    color:white;

}


/* ===============================
   SCROLLBAR
=============================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef5ff;

}

::-webkit-scrollbar-thumb{

    background:#1565c0;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0d47a1;

}


/* ===============================
   FADE BODY
=============================== */

@keyframes fadeBody{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}