@media only screen 
  and (max-device-width: 844px) 
  and (orientation: landscape) {

    /* Styles for iPhones in landscape mode */
    .background {
        height: calc(100vh - 50px) !important;
    }

    main {
        height: calc(100vh - 50px) !important;
        min-height: calc(100vh - 50px) !important;
    }

    main .logo {
        /* margin-top: 12px !important; */
        width: 30% !important;
        max-width: 11rem !important;
    }

    main .slogan {
        margin-bottom: 0 !important;
    }
    
    footer {
        height: 50px !important;
        /* background-color: cadetblue; */
    }

    @supports (height: 100svh) { /* Check if 100svh is supported */

        .background {
            height: calc(100svh - 50px) !important;
        }

        main {
            height: calc(100svh - 50px) !important;
            min-height: calc(100svh - 50px) !important;
        }
    }
}