@media only screen and (max-width: 768px) {
    :root {
        --personal-link-svg-width: 16px;
    }

    body{
        -webkit-text-size-adjust: 100%;
    }

    .personal-info-container ul {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .avatar-container {
        display:none;
    }

    .title-section {
        display: flex;
        justify-content: center;
        padding: var(--margin-small);
    }

    .title-section h1, 
    .title-section span {
        font-size: x-large;
        font-weight: normal;
    }

    .title-section h1::after {
        content: "|";
        margin-left: var(--margin-small);
        margin-right: var(--margin-small);
    }

    .title-section span {
        justify-self: right;
        align-self: center;
    }

    .about-section {
        margin-left: var(--margin-large);
        margin-right: var(--margin-large);
    }
    
    .personal-links-section {
        background-color: var(--tertiary-color);
    }
        .personal-links-section ul {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            padding-left: 1.2rem;
        }

        .personal-links-section li {
            margin: var(--margin-small);
        }

        .personal-links-section .svg {
            width: var(--personal-link-svg-width);
            margin-right: var(--margin-small);
        }

    .skills li {
        /* prevent overlap of text with next-column bullets */
        margin-right: 1.2rem;
    }

    .scroll-container section {
        margin-left: var(--margin-large);
        margin-right: var(--margin-large);
    }
}

@media only screen and (max-width: 480px) {
    .personal-links-section {
        padding: 0;
    }
    
    .personal-links-section ul {
        display: flex;
    }

    .personal-links-section li {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .personal-link-text {
        display: none;
    }
    
    .skills ul {
        grid-template-columns: unset;
    }
}
