/*
    File: /style/elemental.css
    Author(s): David Sulik
    Description: This file has the sole purpose of provide "extra" styles other than the base style.
*/

/* Add even splits. */
.mediaSplit {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    justify-content: center;
    align-items: center;
    
    * {
        flex: 1;
        min-width: 0; /* Keeps all elements min-width to fit within the flex. */
    }

    /* Allow "text content" to be the main focus. */
    div {
        flex: 2;
    }

    /* Adjust to a small screen width. */
    @media (max-width: 900px) {
        flex-direction: column;

        img, * img {
            max-height: 250px;
            width: auto;

            order: -1;
        }
    }
}

.cardContainer {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    justify-content: center;
    align-items: baseline;

    /* Card Style */
    * {
        flex: 1;
        width: 100%;

        background-color: rgb(230, 230, 230);
        padding: .25rem;

        /* Make sure children look well. */
        display: flex;
        flex-direction: column;

        * {
            min-width: 0;
            text-align: center;

            margin-top: .5rem;
            margin-bottom: .5rem;
        }
    }

    /* Adjust to a small screen width. */
    @media (max-width: 900px) {
        flex-direction: column;
        align-items: center;

        * {
            max-width: 300px;
        }

        img, * img {
            max-height: 250px;
            width: auto;

            order: -1;
        }
    }
}

/* Allow centered titles! */
.centeredTitle, .centeredText {
    width: 100%;
    text-align: center;
}

/* Better Spacing */
.smallSpacing * {
    margin: 0;
    padding: 0;
    margin-top: .1rem;
}

.smallCentered {
    max-width: 500px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}