#main-main {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 20px;
    grid-template-areas: "buttons about links";

    > div {
        padding: 10px;  
    }

    @media screen and (max-width: 750px) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
        "about"
        "links"
        "buttons";
    }

    #main-buttons-sites {
        text-align: center;
        div {
        grid-area: buttons; /* this is the section with cool oldscshool web buttons*/
        display: flex;
        flex-flow: wrap;
        height: fit-content;
        justify-content: center;
        gap: 5px;
        }

    }

    #main-about-me {
        grid-area: about; /* these comments are just so i can find the section names tbh */
        .about-me-social-buttons {
            margin-block-start: 10px;
            display: flex;
            flex: 1 1 0;
            flex-wrap: wrap;
            justify-content: center;
            width: fit-content;
            margin-inline: auto;
            text-align: center;
            a > img {
                height: 24px;
                padding-inline: .5rem;
            }
        }
        h1 {
            margin-block: 0;
            text-align: center;
        }
        p {
            line-height: 1.4;
            display: flow-root;
            position: relative;
        }
        .abt-me-img {
            float: left;
            height: auto;
            max-height: 12em;
            max-height: calc(100% - 1rem);
            max-width: 30%;
            width: auto;
            margin-right: 15px;
            shape-outside: polygon(6% 3%, 24% 1%, 35% 20%, 95% 24%, 85% 62%, 86% 97%, 59% 97%, 27% 95%, 20% 68%, 15% 38%, 8% 34%, 15% 23%);;
        }
        .abt-me-img-copy {
            float: left;
            max-width: 30%;
            /* Using a fixed height or a lower max-height ensures it fits */
            /* If the text is short, height: auto will make it too tall */
            max-height: 15lh; /* 'lh' stands for line-height; this limits it to 15 lines of text */
            width: auto;
            margin-right: 15px;
            shape-outside: polygon(6% 3%, 24% 1%, 35% 20%, 95% 24%, 85% 62%, 86% 97%, 59% 97%, 27% 95%, 20% 68%, 15% 38%, 8% 34%, 15% 23%);
            image-rendering: pixelated;
    }
        
    }

    #main-external-links {
        grid-area: links;

        a {
            display: block;
            width: 100%;
            line-height: 2.6em;
            margin-top: 10px;
            text-align: center;
            background-color: white;
            color: black;
            border-radius: 2px;
        }
    }
}

#main-showcase {
    .main-showcase-header {
        display: flex;
        width: fit-content;
        margin-inline: auto;
        align-items: center;
        column-gap: 1rem;

        @media screen and (max-width: 750px) {
            display: block;
            width: 100%;
            img {
                width: 100%;
            }
        }
    }
}

#main-img-carousel {
    display: auto; /* placeholder for when i implement this part */
}