/* Ein CSS zur Gestaltung von Kopfbereich und der Vor- und Zurück-Navigation innerhalb des Archivs von jesusistderweg.de / solo */

@media screen {

    h1 {
        text-align: left;
    }

    p.right {
        text-align: right;
    }
    h2.arcive {
        text-align: center;
        color: #ffffff;
    }

    h3 {
        color: black;
        text-align: left;
        color: #1c0d6d;
        text-decoration: underline
    }

    .back-forward {
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .back a,
    .forward a {
        background-color: azure;
        border-style: solid;
    }

    .back-forward a {
        color: #150086;
    }

    .back-forward a:hover {
        color: darkgreen;
    }

    .link-arch-main {
        background-color: #348462;
        color: white;
        text-decoration: none;
        display: block;
        margin: auto;
    }

    .link-arch-main:hover {
        background-color: white;
        color: #348462;
    }
}


@media only screen and (max-width: 480px) and (orientation: portrait) {


    header h1 {
        padding: 1.9rem 0 0.4rem;
    }
    p.right {
        padding: 0
    }

    h2.arcive {
        padding: 1.5rem 0.5rem 0.4rem;
    }

    .back-forward {
        position: relative;
        top: 0.9rem;
        font-size: 1rem;
        height: 1.8rem;
        width: 100%;
        max-width: 516px;
        margin: 1.0rem auto;
    }

    .back a,
    .forward a {
        border-radius: 0.3rem;
	border-width: 0.1rem;
        padding: 0.5rem 0.7rem;
        margin: 10vw;
    }

    .link-arch-main {
        width: 7.3rem;
        padding: 0.9rem;
        margin: 1.1rem auto;
    }

}



@media screen and (min-width: 481px),
screen and (orientation: landscape) {

    header h1 {
        padding: 56px 10px 43px;
    }
    p.right {
        padding: 0
    }

    h2.arcive {
        padding: 39px 13px 0;
    }

    .back-forward {
        top: 14px;
        position: relative;
        font-size: 18px;
        height: 46px;
        width: 100%;
        max-width: 516px;
        margin: 23px auto;
    }

    .back a,
    .forward a {
        border-radius: 6px;
    }

    .back a {
        padding: 7px 16px;
        margin: 30px 80px;
    }

    .forward a {
        padding: 7px 16px;
        margin: 30px 64px;
    }

    .link-arch-main {
        width: 144px;
        padding: 12px;
        margin: 12px auto;
    }

}