/* Responsive Styles - Media Queries */

@media (max-width: 850px) {
    nav > a {
        font-size: 1em;
        padding-right: 4%;
    }
    
    .header-text {
        font-size: 4.5em;
    }

    .page-body,
    .page-header {
        padding-left: 2%;
        padding-right: 2%;
    }

    .media-container {
        width: 100%;
        height: 450px;
        display: none;
    }

    .content {
        font-size: 1em;
    }
}

@media (min-width: 850px) {
    .header-text {
        font-size: 5em;
    }

    .page-body,
    .page-header {
        padding-left: 2%;
        padding-right: 2%;
    }

    .media-container {
        width: 100%;
        height: 450px;
    }

    .content {
        font-size: 1.3em;
    }
}

@media (min-width: 1024px) {
    .header-text {
        font-size: 6em;
    }

    .page-body,
    .page-header {
        padding-left: 15%;
        padding-right: 15%;
    }

    .media-container {
        width: 100%;
        height: 450px;
    }

    .content {
        font-size: 1.3em;
    }
}

@media (min-width: 1250px) {
    .header-text {
        font-size: 7em;
    }

    .page-body,
    .page-header {
        padding-left: 20%;
        padding-right: 20%;
    }
}

@media (min-width: 1500px) {
    .page-body,
    .page-header {
        padding-left: 22%;
        padding-right: 22%;
    }
}

@media (min-width: 1680px) {
    .header-text {
        font-size: 7em;
    }

    .page-body,
    .page-header {
        padding-left: 25%;
        padding-right: 25%;
    }
}

@media (min-width: 2100px) {
    .header-text {
        font-size: 8em;
    }

    .page-body,
    .page-header {
        padding-left: 28%;
        padding-right: 28%;
    }

    .content {
        font-size: 1.5em;
    }

    nav>a {
        font-size: 2em;
        padding-right: 4%;
    }
}

@media (min-width: 2500px) {
    .page-body,
    .page-header {
        padding-left: 30%;
        padding-right: 30%;
    }
}

@media (prefers-color-scheme: dark) {
    .landing-card {
        background-color: #f5ebd3;
        color: #102116;
    }

    .landing-card-subtitle {
        color: #192c20;
    }
}

@media (prefers-color-scheme: light) {
    body {
        height: 100%;
        background-color: #eaecf6;
        color: #021174;
        padding: 0;
        margin: 0;
    }

    a {
        color: #021174;
    }

    .landing-card {
        background-color: #081253;
        color: #eaecf6;
    }

    .landing-card-subtitle {
        color: #eaecf6;
    }

    .nav-item {
        border: 2px solid black;
        box-shadow: 10px 4px 0px #021174;
        background-color: #eaecf6;
        color: #021174;
    }

    .nav-item:hover {
        animation: none;
        color: #eaecf6;
        background-color: #021174;
        border: 2px solid #021174;
    }

    .no-hover {
        box-shadow: none;
    }

    .no-hover:hover {
        animation: none;
        color: black;
    }

    .blog-date {
        color: #021174;
    }

    blockquote {
        color: #021174;
    }
}