@import 'colorsJM.css';

/*content Type 10*/
.DynPageMainHeader {
    padding-left: 1em;
    padding-right: 1em;
    font-size: 8em;
    font-variant: small-caps;
    text-align: center;
}

/*content Type 11*/
.DynPageHeader {
    padding-left: 1em;
    padding-right: 1em;
    font-size: 2em;
    font-variant: small-caps;
    text-align: center;
}

/*content Type 19*/
.DynPageContentText {
    padding-left: 2em;
    padding-right: 2em;
    font-size: 1.2em;
}

/*content Type 19*/
.DynPageContentTextCentered {
    padding-left: 2em;
    padding-right: 2em;
    font-size: 1.2em;
    text-align: center;
}

/*content Type 20*/
.DynPageSocialNetworkContainer {
    display: flex; /* Aligns children in a row */
    flex-wrap: wrap;
    margin-left: 1em;
    margin-right: 1em;
    justify-content: center; /* Centers the items horizontally */
    align-items: center; /* Centers the items vertically */
    padding-top: 1em;
    padding-bottom: 1em;
}

.DynPageSocialNetworkEntry {
    margin: 0 0.5em; /* Adds space around each icon */
    text-decoration: none; /* Removes underline from links */
    color: var(--colorA);
}

    .DynPageSocialNetworkEntry:hover {
        color: var(--colorB);
    }

    .DynPageSocialNetworkEntry i {
        font-size: 3em; /* Adjust the size of icons */
        vertical-align: middle; /* Aligns icons vertically to the middle */
    }

.OutstandingIcon {
    margin: 0 0.5em; /* Adds space around each icon */
    text-decoration: none; /* Removes underline from links */
    color: var(--colorA);
    font-size: 2em;
}


/*content Type 50*/
.DynPagePictureContainer {
    margin-left: 1em;
    margin-right: 1em;
}

.DynPagePicture {
    position: relative;
    display: inline-block; /* or 'block' depending on your layout needs */
    padding: 1.0em; /* space between the picture and the frame */
}

    .DynPagePicture::before {
        content: '';
        position: absolute;
        border: 0.75em solid transparent;
        border-color: var(--colorA) transparent transparent var(--colorA); /* change 'black' to your desired frame color */
        box-sizing: border-box;
    }

    .DynPagePicture::after {
        content: '';
        position: absolute;
        border: 0.75em solid transparent;
        border-color: transparent var(--colorA) var(--colorA) transparent; /* change 'black' to your desired frame color */
        box-sizing: border-box;
    }

    .DynPagePicture::before {
        top: 0;
        left: 0;
        width: 66%;
        height: 33%;
    }

    .DynPagePicture::after {
        bottom: 0;
        right: 0;
        width: 66%;
        height: 33%;
    }

    .DynPagePicture img {
        display: block; /* removes bottom space under image */
        max-width: 100%; /* ensures image does not exceed the container's width */
        height: auto; /* maintains aspect ratio */
    }


@media only screen and (min-width: 451px) and (max-width: 850px) {
    /*content Type 10*/
    .DynPageMainHeader {
        font-size: 5em;
        text-align: center;
    }

    /*content Type 11*/
    .DynPageHeader {
        font-size: 1.5em;
        text-align: center;
    }

    /*content Type 19*/
    .DynPageContentText {
        font-size: 1.1em;
    }

    .DynPagePicture {
        padding: .75em; /* space between the picture and the frame */
    }

        .DynPagePicture::before {
            border: 0.5em solid transparent;
            border-color: var(--colorA) transparent transparent var(--colorA); /* change 'black' to your desired frame color */
        }

        .DynPagePicture::after {
            border: 0.5em solid transparent;
            border-color: transparent var(--colorA) var(--colorA) transparent; /* change 'black' to your desired frame color */
        }
}


@media only screen and (max-width: 450px) {
    /*content Type 10*/
    .DynPageMainHeader {
        font-size: 3em;
        text-align: center;
    }

    /*content Type 11*/
    .DynPageHeader {
        font-size: 1.5em;
        text-align: center;
    }

    /*content Type 19*/
    .DynPageContentText {
        padding-left: 1em;
        padding-right: 1em;
        font-size: 1.0em;
    }

    .DynPagePicture {
        padding: .75em; /* space between the picture and the frame */
    }

        .DynPagePicture::before {
            border: 0.5em solid transparent;
            border-color: var(--colorA) transparent transparent var(--colorA); /* change 'black' to your desired frame color */
        }

        .DynPagePicture::after {
            border: 0.5em solid transparent;
            border-color: transparent var(--colorA) var(--colorA) transparent; /* change 'black' to your desired frame color */
        }
}