﻿@media only screen and (max-width: 499px) {
    .personal-section-1-image {
        background-image: url('../../assets/Personal/Personal 480.webp');
        background-size: contain;
        height: 40%;
    }
}

@media only screen and (max-width: 800px) {

    .personal-section-1-image {
        background-position: top;
    }
    .reverse-div {
        display: flex !important;
        flex-direction: column-reverse;
    }

    .personal-split-section {
        height: 800px;
        display: flow;
        width: 100%;
    }


        .personal-split-section > .info-block {
            height: 50%;
            padding-left: 12%;
            padding-right: 12%;
        }

        .personal-split-section > .info-block > .header {
            font-size: xx-large;
        }

        .personal-split-section > .info-block > .text {
            font-size: medium;
            width: 100%;
            padding: 20px 0;
        }

    .personal-section-1-image,
    .personal-section-2-image,
    .personal-section-3-image,
    .personal-section-4-image {
        height: 50%;
    }

    .personal-link-section > .header {
        font-size: xx-large;
        padding: 0;
    }

    .personal-link-section > .text {
        font-size: medium;
        padding: 0;
    }

    .personal-link-section > .button-container {
        padding: 0;
    }

        .personal-link-section > .button-container > .button {
            font-size: x-large;
            align-content: center;
        }

    .personal-link-section > .floating-duck {
        position: unset;
        background-size: contain;
        width: 100%;
        height: 300px;
    }


    .personal-link-section {
        height: 400px;
        /*grid-template-rows: 20% 80%;*/
    }

        .personal-link-section > .social-media-container {
            padding: 0;
            justify-self: center;
            width: 80%;
            padding: 10px 50px;
        }

        .personal-link-section > .social-media-block > .header {
            padding: 0;
        }

        .personal-link-section > .social-media-block > .text {
            padding: 0 10%;
        }


        .personal-link-section > .social-media-block {
            padding: 0;
            padding-top: 50px;
        }
}
