*,
html,
body {
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
        /* font-family: 'Roboto', sans-serif; */
}

ul li {
        list-style-type: none;
        margin: 7px auto;
}

a {
        text-decoration: none;
}

:root {
        --animate-duration: 1s;
        --animate-delay: 1s;
        --animate-repeat: infinite;

        --pallete1: #5271ff;
        --pallete2: #38b6ff;
        --pallete3: #5e17eb;
        --pallete4: #004aad;
        --pallete5: #F5F7F8;
        --pallete6: #F6F5F5;
        --pallete7: #d9d9d9;
        --pallete8: #a6a6a6;
        --pallete9: #737373;
        --pallete10: #100C08;
        --pallete11: #3049A5;
        --pallete12: #F5F5F5;
        --pallete13: #60A3D9;
        --pallete14: #FD49A0;
        --pallete15: #070F2B;
        --pallete16: #222831;
        --pallete17: #31363F;
        --pallete18: #ff3131;
        --pallete19: #B4B4B8;
        --pallete20: #C7C8CC;
        --pallete21: #EF7C8E;
        --pallete22: rgb(245, 245, 245, 0.9);
        --pallete23: rgb(16, 12, 8, 0.8);
        --pallete24: #d8eefe;
        --pallete25: #e3f6f5;
        --pallete26: #ff5470;
        --pallete27: #094067;
        --pallete28: #232946;
        --pallete29: #25d366;
        --pallete30: #f25c05;
        --pallete31: rgb(255, 180, 0);
        --pallete32: rgb(9, 64, 103, 0.9);
        --pallete33: rgb(255, 244, 0);
        --pallete34: rgb(244, 205, 42);
        --pallete35: rgb(253, 246, 140);
        --pallete36: #ffffff;

        --pallete37: rgba(255, 99, 132, 0.7);
        --pallete38: rgba(54, 162, 235, 0.7);
        --pallete39: rgba(255, 206, 86, 0.7);
        --pallete40: rgba(75, 192, 192, 0.7);
        --pallete41: rgba(153, 102, 255, 0.7);
        --pallete42: rgba(255, 159, 64, 0.7);

        /* sweetAlertJs */
        --pallete43: #3085d6;
        --pallete44: #21B6A8;
        --pallete45: #38b6ff;
        --pallete46: #28a745;

        --pallete1op: rgba(82, 113, 255, 0.2);
        --pallete2op: rgba(56, 182, 255, 0.2);
        --pallete11op: rgba(48, 73, 165, 0.5);
        --pallete13op: rgba(96, 163, 217, 0.3);
        --pallete24op: rgba(216, 238, 254, 0.2);
        --pallete25op: rgba(227, 246, 245, 0.3);
        --pallete27op: rgba(9, 64, 103, 0.5);

        --box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.5);
}

/* class basic adalah awal pembuatan PHP */
.basic {
        display: none;
}

body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background-color: var(--pallete8);
}

.container-card {
        display: flex;
        margin: 1rem auto;
        justify-content: center;
        align-items: start;
        text-align: center;
}

.container-card .card-body img {
        display: flex;
        justify-content: center;
        width: auto;
        height: 5rem;
        margin: auto;
        margin-bottom: 0.5rem;
        border-radius: 1rem;
}

.card {
        margin-top: 3rem;
        width: 18rem;
        border: 1px solid var(--pallete7);
}

.card-header {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        background-color: var(--pallete27);
        color: var(--pallete12);
        margin: auto;
        font-size: 1rem;
        /* font-family: 'Roboto', sans-serif; */
}

.card-body .login-button {
        display: flex;
        justify-content: end;
        width: 100%;
        margin: 0.5rem auto;
}

.card-body .login-button input {
        border: none;
        border-radius: 0.5rem;
        color: var(--pallete15);
        background-color: var(--pallete7);
        height: 2.5rem;
        width: 5rem;
}

.card-body .login-button input:hover {
        color: var(--pallete36);
        background-color: var(--pallete11);
        transition: 0.2s ease-in-out;
}

blockquote {
        text-align: center;
}

/* PASSWORD EYE TO SHOW */
.password-toggle {
        position: relative;
}

.password-toggle .toggle-icon {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        cursor: pointer;
}