/* styles for location page */
.locatitleImg {
    height: 300px;
    background-image: url(../images/towerofam.jpg);
    background-position: center;
    background-size: cover;

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

.content {
    font-size: larger;
}

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

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

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

.hist {
    margin: 0 4%;

    & h3 {
        margin-bottom: 0;
        margin-left: 2%;
    }

    & .rich {
        display: grid;
        grid-template-columns: 45% 55%;
        align-items: center;

        & .text {
            place-self: center;
            margin-left: 5%;

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

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

            place-self: center;
            margin: 2%;
            border-radius: 5px;
            height: 275px;
            width: 500px;
        }
    }

    & .map {
        position: relative;
        padding: 2%;

        color: #fff;
        border-radius: 5px;
        background-color: #2d4492;
        background-image: url(../images/uriel-xtgONQzGgOE-unsplash.jpg);
        box-shadow: 0 4px 8px 0 #2d449233, 0 6px 20px 0 #2d449230;

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

        & .mainmap {
            width: 100%;
        }

        & #submap {
            width: 50%;

            position: absolute;
            top: 22%;
            right: 0%;

            & img {
                width: inherit;
                
                border: 5px solid #000;
                border-radius: 5px;
                box-shadow: 0 4px 8px 0 #2d449233, 0 6px 20px 0 #2d449230;
            }
        }

        & .hide {
            display: none;
        }
    }
}

.cult {
    margin: 0 4%;
    
    & h3 {
        margin-bottom: 0;
        margin-left: 2%;
    }

    & .vib {
        display: grid;
        grid-template-columns: 45% 55%;
        align-items: center;

        & .text {
            place-self: center;
            margin-left: 5%;

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

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

            place-self: center;
            margin: 2%;
            border-radius: 5px;
            height: 275px;
            width: 500px;
        }
    }
}

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

            & img {
                margin-bottom: 5%;
                height: auto;
                width: 100%;
            }
        }

        & .map {
            & #submap {
                top: 34%;
            }
        }
    }

    .cult {
        & .vib {
            grid-template-columns: auto;

            & img {
                margin-bottom: 5%;
                height: auto;
                width: 100%;
            }
        }
    }
}

/* settings for dark mode */
@media (prefers-color-scheme: dark) {
    .hist {
        & .rich {
            & .text {
                & p:hover {
                    text-shadow: 0px 0px 1px #7f9cd8, 0 4px 8px #7f9cd890, 0 6px 20px #7f9cd880;
                }
            }
        }
    }
    
    .cult {
        & .vib {
            & .text {
                & p:hover {
                    text-shadow: 0px 0px 1px #7f9cd8, 0 4px 8px #7f9cd890, 0 6px 20px #7f9cd880;
                }
            }
        }
    }    
}