:root {
    --content-width: 1400px;
    --page-font: "Outfit", sans-serif;
}
#page-content {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr max-content max-content 1fr;
    grid-template-areas:
    ". ."
    "h h"
    "m m"
    ". .";
    row-gap: clamp(2rem, 4dvw, 8rem);
    & h1 {
        grid-area: h;
        font-size: clamp(4rem, 6vw + .5rem, 10rem);
        font-weight: 200;
        color: rgb(88, 28, 144);
        text-align: center;
    }
    & #message {
        grid-area: m;
        & #message-grid {
            display: grid;
            grid-template-columns: 1fr 3fr;
            grid-template-rows: max-content;
            grid-template-areas:
            "i p"
            "i a";
            column-gap: 4dvw;
            row-gap: 2rem;
            & .img {
                grid-area: i;
                height: 100%;
                aspect-ratio: 1 / 1;
                align-self: center;
                border-radius: 8px;
                box-shadow: 12px 11px 36px #989898;
                background-color: #000;
                background-image: url("/images/contact/1.webp");
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                opacity: 0;
                transition: opacity 0.8s ease-in;
                &.fade-in {
                    opacity: 1;
                }
            }
            & p {
                grid-area: p;
                align-self: end;
                margin: 0;
                font-size: 2rem;
                font-weight: 200;
                max-width: 65ch;
            }
            & a {
                grid-area: a;
                align-self: start;
                display: flex;
                align-items: center;
                column-gap: 0.8rem;
                text-decoration: none;
                font-size: 2.2rem;
                color: rgb(107, 107, 107);
                opacity: 0;
                transition: color 0.3s ease-out, opacity 0.3s ease-in;
                &:hover {
                    color: rgb(91, 61, 148);
                }
                &.fade-in {
                    opacity: 1;
                }
            }
        }
    }
    .cursor {
        display: inline-block;
        width: 3px;
        background-color: currentColor;
        margin-left: 2px;
        animation: blink 1s infinite;
        /* vertical-align: middle; */
    }
    .typewriter-text {
        min-height: 1.5em;
        line-height: 1.6;
    }
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@media screen and (width < 800px) {
    #page-content {
        & #message {
            & #message-grid {
                grid-template-columns: 1fr;
                grid-template-rows: 180px max-content;
                grid-template-areas:
                "i"
                "p"
                "a";
                & .img {
                    height: 100%;
                    width: auto;
                }
            }
        }
    }
}