body, html{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

body{
    background-color: #fff;
    background: linear-gradient(#000 0px, #0000 70px), url(/dat/themes/day/textures/background.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat no-repeat;

    display: flex;
    flex-direction: column;
    align-items: center;

    font-family: 'nimbus';
}
@media (orientation: portrait){
    body {
        background-image: url(/dat/themes/day/textures/background-vertical.jpg);
    }
}

div{
    display: flex;
}


/* doc */
    .page {
        width: 100%;
        min-height: 100%;
        max-width: 1000px;

        flex-direction: column;
    }
        .screen{
            flex-direction: column;
            flex-basis: 100%;
            flex-grow: 0;
            flex-shrink: 0;
        }
            .head{
                width: 100%;
                flex-direction:  row;
            }
                .logo {
                    margin: 25px;
                    background-image: url(/dat/homepage/sliideappbeta.png);
                    background-size: contain;
                    background-position: left center;
                    background-repeat: no-repeat no-repeat;
                    flex-basis: 100%;
                    height: 48px;
                }
                .app-icon {
                    background-image: url(/dat/favi/bigv7.png);
                    width: 48px;
                    height: 48px;
                    background-size:  100% 100%;
                    flex-grow: 0;
                    flex-shrink: 0;
                    margin: 25px;
                    filter: drop-shadow(0px 2px 4px #0008) drop-shadow(0px 4px 8px #0004);
                    cursor: pointer;
                    transition: filter 0.2s;
                }
                    .app-icon:hover {
                        filter: drop-shadow(0px 2px 4px #fff8) drop-shadow(0px 4px 8px #ff04);
                    }

            .mid-section{
                width: 100%;
                flex-basis: 100%;
                flex-grow: 0;
                flex-shrink: 1;

                justify-content: center;
                align-items: center;

                flex-direction: column;
            }
                .headlabel{
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    height: 0px;
                    transform: translateY(50px);
                }
                    .headlabel > h2 {
                        color:#fff;
                        font-weight: lighter;
                        font-family: 'Genos';
                        font-size: 50px;
                        margin: 0px;
                        padding: 0px;
                        height: 40px;
                    }
                        .headlabel > h2 > b {
                            font-weight: 500;
                        }
                .lower-mid-section{
                    flex-direction: row;
                }
                    .sliide-embed{
                        margin: 25px;
                        flex-grow: 0;
                        flex-shrink: 0;
                        box-shadow: #fff8 0px 0px 4px;
                        border-radius: 8px;
                    }
                    @media (orientation: portrait) {
                        .sliide-embed{
                            display: none;
                        }
                    }
                    .buttons{
                        flex-basis: 100%;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                    }
                        .button{
                            width: 256px;
                            height: 64px;
                            margin: 10px;
                            background-size: 100% 100%;
                            cursor: pointer;
                            filter: drop-shadow(0px 2px 4px #0008) drop-shadow(0px 4px 8px #0004);
                            transition: filter 0.2s;
                        }
                            .button:hover{
                                filter: drop-shadow(0px 2px 4px #fff8) drop-shadow(0px 4px 8px #ff04);
                            }
                            .button.install{
                                background-image: url(./install-button.png);
                            }
                            .button.open{
                                background-image: url(./open-button.png);
                            }

            .spacer{
                flex-basis: 100px;
                flex-shrink: 0;
                flex-grow: 0;
                justify-content: center;
                align-items: center;
            }