#home-container {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 3em;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 1em;

    & #img-container {
        width: 70%;
        flex-grow: 0;
        flex-shrink: 1;

        & #img {
            aspect-ratio: 1;
            border-radius: 50%;

            background-image: url("/assets/img/portrait.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
    }

    & #col-container {
        display: flex;
        flex-flow: column nowrap;
        gap: 1em;

        & #pretitle {
            font-weight: bold;
            font-size: 1.1em;
        }

        & #btn-container {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 0.5em;
            margin-top: 0.5em;
        }
    }
}

@media (orientation: landscape) {
    #home-container {
        flex-direction: row;
        text-align: left;
        padding: 0;

        #img-container {
            flex-basis: 50%;
        }

        & #btn-container {
            justify-content: flex-start !important;
        }
    }
}