@media screen and (max-width: 767px){
    main{
        padding: 1rem;
    }
    .grid{
        --columns: 1 !important;
    }
    #primaryHeader{
        position: absolute;
        top: 0;
        left: 100%;
        height: 100vh;
        justify-content: center;
        align-items: center;
        transition: 0.3s ease-out transform;
        &[data-location=onscreen]{
            transform: translateX(-100%);
        }
        a img{
            display: none;
        }
        nav ul{
            flex-direction: column;
        }
    }
    #subHeader{
        position: sticky;
        top: 0;
        border: 1px solid var(--grey-800);
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 1rem;
        z-index: 91;
        a{
            display: flex;
            align-items: center;
            img{
                max-width: 50px;
            }
        }
        .navButton{
            --size: 40px;
            width: var(--size);
            height: var(--size);
            border: 1px solid var(--grey-700);
            border-radius: 8px;
            position: relative;
            span{
                display: inline-block;
                background: var(--blue-400);
                width: 90%;
                height: 2px;
                position: absolute;
                left: 5%;
                top: 33%;
                transform-origin: top left;
                transition: 0.2s transform;
                &:nth-of-type(2){
                    transform-origin: bottom left;
                    top: 66%;
                }
            }
            &[data-state=open]{
                --angle: 380%;
                span{
                    background: var(--orange-400);
                    transform: rotate(45deg) translate(1%, calc(var(--angle) * -1));
                    &:nth-of-type(2){
                        transform: rotate(-45deg) translate(1%, var(--angle));
                    }
                }
            }
        }
    }
    .headerRow{
        flex-direction: column;
        align-items: center;
        margin-bottom: 1rem;
        gap: 0.5rem;
    }
    .dbList{
        .dbItem{
            &.log{
                grid-template-columns: 1fr 1fr;
                .message{
                    grid-column: 1/3;
                }
            }
        }
    }
    form:not(.stripped){
        .formField{
            .fileUploadInput{
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
                label{
                    width: 100%;
                }
                .imageName{
                    padding: 0.55rem;
                }
            } 
        }
    }
}