@media only screen and (max-width:1000px) {
    nav {
        display: flex;
        justify-content: center;
    }

    .main-container {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 0 2vw;
    }

    .grid-item {
        display: none;
    }

    .mobile-nav-item {
        display: flex;
        border-radius: 10px;
        border: 1px solid #00ffff;
        padding: 5%;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
        z-index: 2;
        background: #0a0a0a;
    }

    .mobile-nav {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        min-height: 80vh;
        font-size: 1.5rem;
    }

    .mobile-close {
        border-bottom: 1px solid #00ffff;
        border-left: 1px solid #00ffff;
        border-bottom-left-radius: 5px;
        padding: 2%;
        position: fixed;
        z-index: 4;
        right: 0;
        display: flex;
        font-size: 1.5rem;
    }

    .learning-grid i {
        font-size: 5rem;
        transition: color 0.5s ease;
    }

    .inner-grid {
        font-size: 0.75rem;
    }


    /* for when a grid-item opens on mobile*/
    @keyframes boxOpen {
        0% {
            transform: scale(0.01);
            opacity: 0;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes boxClose {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        100% {
            transform: scale(0.01);
            opacity: 0;
        }
    }
}