/* styles for expertise page */
.expertisetitleImg {
    height: 300px;
    background-image: url(../images/Daniel\ DSC07601.jpg);
    background-size: cover;
    background-position: center;

    & h1 {
        margin: 0;
        padding: 50px;
        color: #fcfcee;
        text-shadow: 1px 1px 2px #000, 0 0 25px #7f9cd8, 0 0 5px #2d4492;
    }
}

.content {
    font-size: larger;

    & .header {
        padding: 10px 4%;
        margin-bottom: 2%;
        color: #fff;
        background-color: #2d4492;

        & p {
            text-shadow: 2px 2px #000, 0 4px 8px #2d449233, 0 6px 20px #2d449230;
        }
    }

    & .imgbreak {
        margin-bottom: 3%;

        & img {
            display: block;
            width: 80%;
            margin: auto;

            border: 5px solid #2d4492;
            border-radius: 5px;
            box-shadow: 0 4px 8px 0 #2d449233, 0 6px 20px 0 #2d449230;
        }
        
        & p {
            width: 80%;
            margin: auto;
            margin-top: 5px;
        }
    }

    & .env {
        padding: 2% 4%;
        color: #fff;
        background-color: #2d4492;
        /*background-image: url(../images/pexels-athena-2961995.jpg);
        background-size: cover;*/
        box-shadow: 0 4px 8px 0 #2d449233, 0 6px 20px 0 #2d449230;

        & h3 {
            margin: 0;
            text-shadow: 2px 2px #000, 0 4px 8px #2d449233, 0 6px 20px #2d449230;
        }

        & p {
            text-shadow: 2px 2px #000, 0 4px 8px #2d449233, 0 6px 20px #2d449230;
        }

        & .env1 {
            display: grid;
            grid-template-columns: auto auto;

            & p, img {
                align-self: center;
            }

            & img {
                width: 90%;
                margin: auto;

                border: 5px solid #7f9cd8;
                border-radius: 5px;
                box-shadow: 0 4px 8px 0 #7f9cd833, 0 6px 20px 0 #7f9cd830;
            }
        }

        & .env2 {
            display: grid;
            grid-template-columns: auto auto;

            & div, img {
                align-self: center;
            }

            & img {
                width: 90%;
                margin: auto;

                border: 5px solid #7f9cd8;
                border-radius: 5px;
                box-shadow: 0 4px 8px 0 #7f9cd833, 0 6px 20px 0 #7f9cd830;
            }
        }
    }

    & .it {
        margin: 10px 4%;

        & h3 {
            margin: 0;
            margin-top: 5%;
        }

        & .it1 {
            display: grid;
            grid-template-columns: auto auto;

            & div, img {
                align-self: center;
            }

            & img {
                width: 80%;
                margin: auto;

                border: 5px solid #2d4492;
                border-radius: 5px;
                box-shadow: 0 4px 8px 0 #2d449233, 0 6px 20px 0 #2d449230;
            }
        }
    }
}

/*adjustment for smaller screens*/
@media (max-width: 935px) {
    .content {
        & .env {
            & .env1 {
                grid-template-columns: auto;
            }

            & .env2 {
                grid-template-columns: auto;

                & img {
                    grid-row: 2 / span 1;
                }

                & div {
                    grid-row: 1 / span 1;
                }
            }
        }

        & .it {
            & .it1 {
                grid-template-columns: auto;
            }
        }
    }
}

/* settings for dark mode */
@media (prefers-color-scheme: dark) {}