@font-face {
    font-family: "Oswald-fallback";
    src: local("Arial Narrow");
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -0.15px;
    word-spacing: -0.1px;
}

body {
    background-color: rgb(1, 53, 6);
    width: 100vw;
}

a {
    cursor: pointer;
    text-decoration: none;
    color: beige;
}

.line-holder {
    display: flex;
    justify-content: center;
}

.line {
    border-top: 1px solid beige;
    width: 960px;
    margin: auto;
}

.title {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.nav {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.nav>div {
    padding: 0px 20px
}

.mary-photo {
    width: 440px;
    height: 700px;
    object-fit: contain;
    object-position: center center;
    margin: 20px;
}

.blurb {
    width: 500px;
    min-width: 500px;
    margin: 20px;
}

.main {
    display: flex;
    justify-content: center;
    align-items: center;
}

.oswald-main {
    font-family: "Oswald", 'Oswald-fallback', sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-size: 22px;
    color: beige;
}


.inter-heading {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
    color: beige;
}

@media screen and (max-width: 768px) {
    .main {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .mary-photo {
        height: 400px;
    }

    .blurb {
        width: 380px;
        min-width: 380px;
    }

    .blurb-text {
        font-size: 20px;
    }

    .inter-heading {
        font-size: 20px;
    }

    .mary-home {
        font-size: 30px;
    }

    .line {
        width: 50%;
    }
}