/* Title Section */
.main {
    position:fixed;
    width:100%;
    height:100%;
}

.spot-heading {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    z-index: -1;
    text-align: left;
}

.dev-work-img {
    width: 40%;
    position: absolute;
    left: 22%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    z-index: -11;
    max-height: 75%;
}

@media only screen and (min-width: 1550px) {
    .spot-heading {
        font-size: 800%;
        right: 0%;
    }
}
@media only screen and (min-width: 1431px) and (max-width: 1550px) {
    .spot-heading {
        font-size: 800%;
        right: 0%;
    }
}
@media only screen and (min-width: 1120px) and (max-width: 1431px) {
    .spot-heading {
        font-size: 800%;
        right: -15%;
    }
}
@media only screen and (min-width: 950px) and (max-width: 1120px) {
    .spot-heading {
        font-size: 600%;
        right: -10%;
    }
}
@media only screen and (min-width: 800px) and (max-width: 950px) {
    .spot-heading {
        font-size: 500%;
        right: -10%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 800px) {
    .spot-heading {
        font-size: 400%;
        right: -10%;
    }
}
@media only screen and (max-width: 600px) and (min-width: 422px) {
    .dev-work-img {
        width: 0;
    }

    .spot-heading {
        font-size: 500%;
        left: 50%;
    }
}

@media only screen and (max-width: 422px) {
    .dev-work-img {
        width: 0;
    }

    .spot-heading {
        font-size: 300%;
        left: 50%;
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: -100px;
    height: 100px;
    width: 100%;
}