/* styles for careers page */
.careertitleImg {
    height: 300px;
    background-image: url(../images/L1000487\ small.png);
    
    background-position: 50% 25%;
    background-size: cover;
    background-repeat: no-repeat;

    & h1 {
        margin: 0;
        padding: 50px;
        color: #2d4492;
        text-shadow: 2px 2px 4px #f0f0f0;
    }
}

.content {
    font-size: larger;

    & .header {
        margin: 2%;
        margin-left: 5%;
        margin-right: 10%;

        & .text {
            display: grid;
            grid-template-columns: 45% 55%;

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

            & img {
                grid-row: 1 / span 2;
                grid-column: 2 / span 2;
                width: 94%;
                margin-left: 5%;

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

            & h2 {
                margin-bottom: 10px;
            }

            & ul {
                padding: 0;
                margin-top: 0;
            }

            & li {
                display: flex;
                align-items: center;
            
                line-height: 30px;
            
                list-style: none;

                &:before {
                    display: block;
                    width: 25px;
                    height: 25px;
                    margin-right: 8px;
                
                    background: url(../images/Solutio\ LOGO\ icon\ -\ 210x210.png) no-repeat left;
                    background-size: contain;
                
                    content: '';
                }
            }
        }

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

            margin-top: 4%;

            border-radius: 5px;
            background-image: url(../images/pexels-pixabay-531767.jpg);
            background-size: cover;
            box-shadow: 0 4px 8px 0 #2d449233, 0 6px 20px 0 #2d449230;

            & .title {
                color: #fff;
                grid-column: 1 / span 2;
                text-align: center;
                padding: 5px;
                margin: 0;
                /* color: */
                background-color: #2d4492;
                text-shadow: 1px 1px 2px #000, 0 4px 8px #2d449233, 0 6px 20px #2d449230;
            }
        }

        & .ben {
            padding: 5px;
            margin: 10px;
            
            border-radius: 5px;
            background-image: url(../images/Background.png);

            &:hover:not(.ben-dilate) {
                border: 5px solid #2d4492;
                margin: 5px;
            }

            & p {
                margin: 0;
                text-align: center;
            }

            & img {
                display: none;
                width: 80%;
                margin: auto;
                margin-bottom: 1%;
                border-radius: 5px;
            }
        }

        & .ben-dilate {
            margin: auto;
            margin-top: 10px;
            width: 60%;
            grid-area: 2 / 1 / span 1 / span 2;

            & p {
                margin-bottom: 1%;
            }

            & img {
                display: block;
            }
        }
    }

    & .middle {
        padding: 2%;
        color: #fff;
        background-color: #2d4492;

        & .one {
            padding-left: 5%;
            text-shadow: 2px 2px #000;
        }

        & .two {
            text-align: right;
            padding-right: 5%;
            text-shadow: 2px 2px #000;
        }

        & .teams {
            display: grid;
            grid-template-columns: auto auto auto;
            text-align: center;

            & h1 {
                height: 100px;
                max-width: 420px;
                padding: 10px;
                margin: 30px;

                display: flex;
                justify-content: center;
                align-items: center;

                border-radius: 5px;
                background-color: #7f9cd8;
                text-shadow: 1px 1px 2px #000, 0 4px 8px #2d449233, 0 6px 20px #2d449230;

                &:hover {
                    box-shadow: 2px 2px 5px #000;
                }
            }
        }
    }

    & .bottom {
        margin: 2%;
        margin-left: 5%;

        & a {
            text-decoration: none;
            color: inherit;

            &:hover {
                text-decoration: underline;
            }
        }

        & iframe {
            width: 90%;
            height: 60vh;
            box-shadow: 0 4px 8px 0 #2d449233, 0 6px 20px 0 #2d449230;
        }
    }
}

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

                & img {
                    grid-row: initial;
                    grid-column: initial;
                    margin: auto;
                }
            }

            .ben-dilate {
                width: 90%;
            }
        }

        & .ben {
            & img {
                width: 80% !important;
            }
        }

        & .middle {
            & .teams {
                grid-template-columns: auto;

                margin: 0 10%;
            }
        }
    }
}

/* settings for dark mode */
@media (prefers-color-scheme: dark) {
    .content {
        & .header {
            & .ben {
                background-image: url(../images/BackgroundDark.png);
            }
        }
    }
}