@media (max-width: 1300px) {
    .logo-name, .project-btn, .mockup-container,
    .bracket-container, .mockup, .screen-container, .button-container{
        width: 80vw;
    }
    .chart-container{
        width: 80vw;
        display: flex;
        flex-direction: column;
    }
    .four-columns, .two-columns{
        width: 75vw;
    }
    .intro, .skills{
        flex-direction: column;
    }
    .half-mobile{
        width: 40vw;
    }
    .hero-logo {
        width: 60vw;
    }
    .link-container{
        width: 80vw;
        justify-content: space-between;
    }
    .social-container{
        width: 30vw;
        padding-left: 10vw;
        padding-right: 10vw;
    }
    .projects-width, .mockup-container{
        display: grid;
    }
    .mobile-mockup-container{
        display: inline-flex;
    }
    .mobile, .my-projects{
        display: grid;
    }
    .display{
        display: none;
    }
    .brand-color{
        height: 7vh;
    }
    .menu-li {
        padding-right: 10vw;
        padding-top: 2vh;
    }
    .profile-width, .presentation{
        width: auto;
    }
    .skills.active{
        display: block;
    }
}
@media (max-width: 1300px) {
    .name{
        font-size: 2.4rem;
    }
    .menu{
        font-size: 1.6rem;
    }
}