.loginModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    font-size: 0.9rem;

    .modalContent {
        background: white;
        padding: 1rem;
        border-radius: 0.25rem;
        position: relative;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.8);

        .closeBtn {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            font-size: 1.5rem;
            font-weight: bold;
            color: black;
            cursor: pointer;
        }

        #loginContainer {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 1rem;
            
            .loginItem {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;

                input {
                    padding: 0.5rem;
                    border: black 1px solid;
                    border-radius: 0.25rem;
                }
                
                label {
                    text-transform: uppercase;
                    font-weight: bolder;
                }

                .rememberMeLabel {
                    display: flex;
                    gap: 0.5rem;
                    align-items: center;
                }
            }

            #createAccountLink, #loginBtn, #forgotPasswordLink {
                display: flex;
                background-color: #002B5C;
                color: white;
                padding: 0.5rem 1rem;
                text-align: center;
                text-decoration: none;
                border-radius: 0.25rem;
                font-weight: bold;
                text-transform: uppercase;
                border: solid black 2px;
                font-size: 0.8rem;
                gap: 0.5rem;
                width: fit-content;
                margin: 0 auto;

                @media (min-width: 1024px) {
                    transition: 0.3s;
                    
                    &:hover {
                        cursor: pointer;
                        transition: 0.3s;
                        background-color: #004eb4;
                    }
                }

                img {
                    width: 1rem;
                    filter: invert(100%);
                }
            }
        }
    }
}