@media screen and (max-width: 768px) {

    /*---------------------------------------- Global styles ---------------------------------------- */

    p {
        font-size: 1.15rem;
        line-height: 1.5rem;
    }

    .main-body {
        width: 100%;
        min-width: 425px;
    }

    /*---------------------------------------- Utility Classes ---------------------------------------- */

    .button {
        font-size: 1rem;
        height: 45px;
    }

    /*---------------------------------------- Nav Bar ---------------------------------------- */

    .main-nav {
        width: 425px;
        height: 80px;
        padding: 20px;
    }

    .name-logo {
        letter-spacing: 3px;
    }

    .nav-links {
        display: none;
    }

    /*---------------------------------------- Home Page ---------------------------------------- */

    .home-page {
        width: 425px;
        margin-top: 130px;
        flex-direction: column;
    }

    .my-image {
        width: 75%;
    }

    .my-intro {
        width: 90%;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .my-intro h1 {
        font-size: 2.5rem;
    }

    .my-intro h2 {
        font-size: 1.5rem;
        margin-top: 5px;
    }

    .my-intro p {
        margin-top: 10px;
    }

    .social-media {
        margin-top: 10px;
        justify-content: center;
    }

    .intro-buttons {
        margin-top: 10px;
    }

    /*---------------------------------------- Education Page ---------------------------------------- */

    .education-page {
        width: 425px;
        flex-direction: column-reverse;
    }

    .education {
        width: 90%;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
    }
    
    .education-image {
        width: 75%;
    }

    .education h1 {
        font-size: 2.5rem;
        margin-bottom: 30px;
    }

    .course-name {
        margin-bottom: 10px;
        line-height: 2rem;
    }

    .education a {
        margin-top: 10px;
    }

    .education-date {
        margin-top: 30px;
    }
    
    .course-work {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /*---------------------------------------- Skills Page ---------------------------------------- */

    .skills-page {
        width: 425px;
        flex-direction: column;
        height: 150vh;
    }
    .skill-type-selector h2{
        text-align: center;
        font-size: 1.5rem;
    }

    .skill-type-development {
        width: 150px;
    }

    .skills {
        text-align: center;
    }

    /*---------------------------------------- Certifications Page ---------------------------------------- */

    .certifications-page {
        width: 425px;
        flex-direction: column;
    }

    .certification-page-content h2 {
        font-size: 2.5rem;
        margin-bottom: 30px;
    }

    .certificate {
        width: 100%;
        height: 600px;
    }

    .certificate-header {
        height: 50%;
    }

    .certificate-content {
        height: 50%;
    }

    .certificate-content a {
        margin-bottom: 20px;
    }

    /*---------------------------------------- Projects Page ---------------------------------------- */

    .projects-page {
        width: 425px;
        flex-direction: column;
        height: 200vh;
    }

    .projects-container {
        flex-direction: column;
        gap: 20px
    }

    .projects-page-content h2 {
        font-size: 2.5rem;
        margin-bottom: 30px;
    }

    .project {
        width: 100%;
        height: 600px;
    }


    /*---------------------------------------- Contact Me Page ---------------------------------------- */

    .contact-me-page {
        width: 425px;
        flex-direction: column;
        height: 175vh;
    }

    .contact-me-form {
        width: 100%;
        height: 650px;
        border-radius: 10px 10px 0px 0px;
    }

    .contact-info {
        width: 100%;
        height: 500px;
        border-radius: 0px 0px 10px 10px;
    }

    .inputs {
        flex-direction: column;
    }

    .inputs input {
        width: 350px;
    }

    .inputs textarea {
        width: 350px;
    }

    .message-box {
        width: 350px;
    }

    /*---------------------------------------- Footer ---------------------------------------- */

    .footer-container {
        width: 425px;
    }

    .footer-container p {
        font-size: 1rem;
    }
}