@media only screen and (min-width: 769px) {
    :root {
        --info-width: 320px;
        --body-width: 800px;
        --personal-link-svg-width: 24px;
    }

    .personal-info-container {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: var(--info-width);
        background-color: var(--secondary-color);
    }

    .avatar-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: var(--info-width);
        width: var(--info-width);
    }

    .avatar {
        height: calc(100% - (var(--avatar-border-width) * 2) - (var(--avatar-padding) * 2));
        width: calc(100% - (var(--avatar-border-width) * 2) - (var(--avatar-padding) * 2));
        border: var(--avatar-border-width) solid var(--avatar-border-color);
        border-radius: 50%;
    }

    .title-section,
    .personal-links-section li, .about-section {
        margin: var(--margin-large);
    }

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

    .about-section {
        color: var(--secondary-text-color);
    }

    .scroll-container {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        left: var(--info-width);
        overflow-y: scroll;
        overflow-x:hidden;
    }

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