@keyframes headingFlyIn {
    from {margin-left: -100vw}
    to {margin-left: 32px}
}

.heading {
    margin-left: 32px;
    margin-top: 8vh;
    background-color: rgba(34, 34, 34, 0.9);
    width: calc(100vw - 64px);
    height: fit-content;
    padding: 0px;

    animation-name: headingFlyIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
    .blurb {
        display: inline-block;
        width: 75%;
        margin-left: 5vw;
    }

        .blurb p {
            font-size: 2vw;
            color: white;
        }

    .spannerIcon {
        display: inline-block;
        height: 100%;
    }
        .spannerIcon img {
            height: 8vw;
            margin-left: 25%;
            margin-top: 25%;
            margin-bottom: 25%;
        }

@keyframes projectsHeadingFlyIn {
    from {margin-left: 100vw}
    to {margin-left: 10vw}
}

.allProjectsHeading {
    font-size: 6vw;
    color: #FBEFCC;;
    background-color: rgba(34, 34, 34, 0.9);
    padding-top: 16px;
    padding-bottom: 16px;
    margin-left: 10vw;
    margin-right: 5vw;
    margin-top: 6vw;

    animation-name: projectsHeadingFlyIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
    .allProjectsHeading h1 {
        font-size: 6vw;
        color: #FBEFCC;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 2vw;
    }

.projectsContainer {
    animation-name: projectsHeadingFlyIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}