.loginBox{
    font-family: 'Nunito', sans-serif;

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 999;

    padding: 0;
    margin: 0 auto;

    background-color: white;

    border: 3px solid transparent;
    border-radius: 50px;
    
    width: min(90%,370px);
    height: fit-content;
    padding: 10px 20px 20px 20px;

    
    animation: borderShift 2s ease-in-out infinite alternate;
}

.loginBox h3{
    margin: 20px 0;
    font-size: 30px;
    color: var(--primary-green-600);
}

@keyframes borderShift{
    from{
        box-shadow: 
            inset 0 4px 8px 2px var(--primary-yellow-300),
            0 4px 8px 2px #bbb;
        ;
        border-color: var(--primary-yellow-300);
    }

    to{
        box-shadow: 
            inset 0 4px 8px 2px var(--primary-green-300),
            0 4px 8px 2px #bbb;
        ;
        border-color: var(--primary-green-300);
    }
}

/*for form & input section*/
.formBox{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 300px;
    font-weight: 500;
}

.formBox p{
    font-size: 14px;
}
.formBox p p{
    margin: 0;
}

.inputBox{
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.isTrue{
    color: var(--primary-green-500);
}
.isFalse{
    color: var(--primary-red-500);
}
.setCenter{
    display: flex;
    align-items: center;
    text-align: center;
}

.imageLayout{
    display: flex;
    flex-direction: column;
    align-items: center;

    position: fixed;
    inset: 0;

    z-index: -1;

    overflow: hidden;
}

.imageLayout img{
    width: 100%;
    height: 100%;
    opacity: 0.5;

    object-fit: cover;
}

/* for all action buttons */
.actionBtn{
    border-radius: 50px;
    border: 2px solid transparent;
    box-shadow: 0 3px 6px var(--primary-shadow-300);
    width: 6.5rem;
    height: 30px;
    font-weight: 700;
    transition: all 0.3s ease-out;
    cursor: pointer;
}
.actionBtn:hover{
    transform: translateY(-2px);
    background-color: white;
}

/* button container*/
.btnContainer{
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 10px 0px;
}

/* submit & add button*/
.submitBtn, .addBtn{
    background-color: var(--primary-green-200);
}
.submitBtn:hover, .addBtn:hover{
    color: green;
    border-color: var(--primary-green-500);
    box-shadow: 0 0 8px green;
}

/* delete & cancel btn */
.cancelBtn, .delBtn{
    background-color: var(--primary-red-200);
}
.cancelBtn:hover, .delBtn:hover{
    color: var(--primary-red-500);
    border-color: var(--primary-red-500);
    box-shadow: 0 0 8px var(--primary-red-500);
}

/* edit button */
.editBtn, .backBtn{
    background-color: var(--primary-yellow-200);
}
.editBtn:hover, .backBtn:hover{
    color: var(--primary-yellow-600);
    border-color: var(--primary-yellow-500);
    box-shadow: 0 0 8px var(--primary-yellow-500);
}

.hidden{
    display: none;
}