:root {
    --app-height: 100vh;
}
/* fix iOS bug not displaying 100% correctly */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1080px) and (orientation : landscape) {
    :root {
        --app-height: 668px;
    }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1080px) and (orientation : portrait) {

    :root {
        --app-height: 924px;
    }
}
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
    :root {
        --app-height: 320px;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
    :root {
        --app-height: 568px;
    }
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    :root {
        --app-height: 320px;
    }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    :root {
        --app-height: 480px;
    }
}