@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap");

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


.prev-result img {
    width: 100%;
    height: 88%;
    border-radius: 12px;
}

.modal-dialog {
    max-width: 95%;
    margin: 1rem auto;
}

.prev-result {
    background-color: aliceblue;
    height: 350px;
    width: 490px;
}

.card-absen-off {
    width: 200px;
    height: 200px;
    background-color: aliceblue;
}
.computer {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.computerBorder {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
}

.photo {
    position: absolute;
    top: 20%;
    left: 50%;

    transform: translateX(-50%);

    width: 100%;
    z-index: 1;
}
/* Animasi Pulse*/

.play {
    /* box-shadow: 0 0 0 0 rgb(45, 144, 226); */
    transform: scale(1);
    animation: pulse 2s infinite;
}

@media (max-width: 768px) {

    .modal-dialog {
        max-width: 100%;
        margin: 10px;
    }

    #my_camera {
        width: 100% !important;
    }

    .prev-result {
         width: 100%;
    height: 88%;
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        /* box-shadow: 0 0 0 0 rgba(87, 185, 241, 0.7); */
    }

    70% {
        transform: scale(1.2);
        box-shadow: 0 0 0 10px rgba(228, 107, 107, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(228, 100, 100, 0);
    }
}

/* Pulse */

.slider {
    width: 2179px;
    margin: auto;
    overflow: visible;
}
.slider ul {
    display: flex;
    padding: 0;
    animation: cambio 80s infinite linear;
}
.slider li {
    padding: 0 10px;
    list-style: none;
}
.slider img {
    max-width: fit-content !important;
    height: auto !important;
}
@keyframes cambio {
    from {
        margin-left: 0%;
    }
    to {
        margin-left: -100%;
    }
}

/* Animasi Sweep */
.sweep_me {
    background-image: linear-gradient(
        -225deg,
        #e98222 0%,
        #3816f8 29%,
        #5393f3 67%,
        #1672f8 100%
    );
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

/* Animasi Sweep */