/* styles for contact page */
.contitleImg {
    height: 300px;
    background-image: url(../images/L1000550\ small.png);

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

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

.balls {
    display: grid;
    grid-template-columns: auto 26%;
}

.contactForm {
    margin: 40px;
    margin-left: 100px;
    font-size: large;

    & p {
        font-size: larger;
    }
    
    & fieldset {
        color: #fff;
        border-color: #7f9cd8;
        background-color: #2d4492;
        border-radius: 5px;
        box-shadow: 0 4px 8px 0 #2d449233, 0 6px 20px 0 #2d449230;
        padding: 10px;
        
        & legend {
            color: #2d4492;
            font-weight: bolder;
            font-size: larger;
            padding-bottom: 22px;
        }
        & label {
            margin-left: 5%;
        }
        & input:not(.submit) {
            position: absolute;
            left: 32%;
        }
        & textarea {
            width: 90%;
            margin: 0 5% 5% 5%;
        }

        & .submit {
            background-color: #fff;
            border-color: #7f9cd8;
            width: 100px;
            height: 25px;
            margin-left: 5%;

            &:hover {
                background-color: #7f9cd8;
                color: #fff;
            }
        }
    }
}

.infoBar {
    padding: 40px 50px 40px 30px;

    background-color: #2d4492;
    color: #fff;
    font-size: large;
}

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

    .contactForm {
        margin: 40px;
    
        & fieldset {
            & input:not(.submit) {
                left: 45%;
            }
            & select {
                left: 55%;
            }
        }
    }

    .infoBar {
        padding: 20px 25px 20px 30px;

        & h3, p {
            margin: 0;
        }
    }
}

/* settings for dark mode */
@media (prefers-color-scheme: dark) { 
    .contactForm {
        & fieldset {
            & legend {
                color: #7f9cd8;
            }
            & input {
                color: #000;
            }
            & textarea {
                color: #000;
            }
            & .submit {
                color: #000;
                background-color: #fff;
            }
        }
    }
}