/* ================= RESET ================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

/* ================= LAYOUT ================= */
body{
    background:#eaeaf0;
    display:flex;
    justify-content:center;
}

.container{
    width:100%;
    max-width:420px;
    background:#fff;
    min-height:100vh;
}

/* ================= MODAL ================= */
.modal{
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%;
    height:100%;

    background:#00000080;
    justify-content:center;
    align-items:flex-end;

    z-index:999;
}


.plus-icon{
    position:relative;
    width:20px;
    height:20px;
}

.plus-icon::before,
.plus-icon::after{
    content:'';
    position:absolute;
    background:#fff;
    border-radius:2px;
}

/* garis horizontal */
.plus-icon::before{
    width:100%;
    height:3px;
    top:50%;
    left:0;
    transform:translateY(-50%);
}

/* garis vertikal */
.plus-icon::after{
    height:100%;
    width:3px;
    left:50%;
    top:0;
    transform:translateX(-50%);
}


/* ================= ANIMATION ================= */
@keyframes zoomIn{
    from{ transform:scale(0.6); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}

@keyframes slideUp{
    from{ transform:translateY(100%); }
    to{ transform:translateY(0); }
}