/*Should work on both ios and android*/
@supports (-webkit-touch-callout: none) or (not (-moz-touch-callout: none)) {
    body {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        background: url(../assets/images/desktop.svg) no-repeat center;
        background-size: cover;
        font-family: "staffwide", "publicsans", "Helvetica Neue","Helvetica","Roboto","Arial", sans-serif;
        color: #252703 !important;
    }

    #page-header {
        padding: .5rem 0;
        display: grid;
        justify-content: space-around;
        background-color: #FFFF;
    }

    .site-branding {
        width: 290px;
        height: 40px;
    }

    #main {
        display: grid;
        text-align: center;
        padding: 0 2rem;
    }

    h1 {
        font-size: 4rem;
        inline-size: 30rem;
        justify-self: center;
        padding-bottom: 2rem;
    }

    h5 {
        font-size: 1.5rem;
        margin: .5rem;
    }

    .site-buttons {
        display: grid;
        gap: 1rem;
        justify-self: center;
        margin: -2rem;
    }

    .button {
        background-color: #FFFFFF;
        border: 1px solid #252703;
        font-size: .8rem;
        cursor: pointer;
        padding: .8rem 7rem;
        text-decoration: none;
        color: #252703 !important;
    }

        .button::before, .button:active, .button::after, .button:visited {
            color: #252703 !important;
            text-decoration: none;
        }

    @media only screen and (max-width: 1199px) {
        body {
            background: url(../assets/images/mobile.svg) no-repeat center;
            background-size: cover;
        }

        h1 {
            font-size: 2.5rem;
            inline-size: auto;
            padding-bottom: 1.5rem;
        }

        h5 {
            font-size: 1rem;
        }

        .site-buttons {
            margin: -1.5rem;
        }
    }
}