/*
#00338D Blue
#EBB700 Gold
##013E74 Blue Lettering
##BF9B06 Gold shadow on text
#EBE6C0 Body Background
#1D4F99 Footer Background
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Highly recommended to keep layout sizing predictable */
}

.header-container {
    height: 20vw;
    width: 100%;
    background-image: linear-gradient(rgba(99, 99, 99, 0.7), rgba(144, 144, 144, 0.7)), url(images/Lucas_Ballfield.jpg);
    background-position: center;   /* Centers the image horizontally and vertically */
    background-repeat: no-repeat;  /* Prevents the image from tiling */
    background-size: cover;        /* Scales the image to fill the container */
}

.header-row {
    display: flex;
}

.header-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 5vw;
    font-weight: bold;
    color: #013e74;
    -webkit-text-stroke: 1px black;
    text-shadow: 2px 2px #bf9b06
}

.emblem {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.emblem img {
    width:20vw;
}

.main-content {
    background-color: #EBE6C0;
    padding: 40px 0;
}

.main-content figure {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 25px;
}

.main-content figure img {
    width: 70%;
    border-radius: 15px;
}

.main-content figure figcaption {
    width: 70%;
    text-align: center;
    padding-top: 10px;
    font-size: 20px;
}

.club {
    display: flex;
    padding-top: 25px;
}

.club .officers,
.club .meetings {
    width: 50%;
    padding-left: 10vw;
    font-size: 20px;
}

.club .officers h2,
.club .meetings h2 {
    padding-left: 50px;
    padding-bottom: 20px;
}

.club .officers ul li,
.club .meetings ul li {
    list-style: none;
    padding-bottom: 10px;
}

.footer {
    width: 100%;
    background-color: #1D4F99;
    padding-bottom: 45px;
}

.footer a:link {
    color: #EBE6C0;
}

.footer a:visited {
    color: #ffe521;
}

.footer a:hover {
    color: #857500;
}

.copy {
    padding: 40px;
    color: #EBE6C0;
    text-align: center;
    font-size: 20px;
}

.lower-copy {
    display: flex;
    color: #EBE6C0;
}

.contact {
    padding-left: 2vw;
}

.contact {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.contact ul li {
    list-style: none;
}

.contact h3 {
    padding-bottom: 15px;
}

.design-by {
    width: 50%;
    display: flex;
    justify-content: right;
    padding-right: 2vw;
}

@media only screen and (max-width: 767px) {
    .club {
        flex-direction: column;
    }

    .club .officers,
    .club .meetings {
        width: 100%;
        padding-bottom: 45px;
        padding-left: 0;
        font-size: 20px;
        text-align: center;
    }

    .club .officers h2,
    .club .meetings h2 {
        padding-left: 0;
    }

    .lower-copy {
        flex-direction: column;
    }

    .contact {
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 15px 0;
    }

    .design-by {
        width: 100%;
        justify-content: center;
        padding: 15px 0;
    }

    .copy {
        padding: 40px 0 20px 0;
    }
}