:root {
    --background-fallback-color: rgb(55, 138, 211);
}

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

body {
    display: grid;
    height: 100dvh;
    grid-template-columns: 312px 1fr;
    font-family: 'Roboto', sans-serif;
    position: relative;
    color: #fff;
}

body:not(.public) {
    background-color: var(--background-fallback-color);
    background-image: url('../../img/wds_star.svg'), /* overlay */
    url('../../img/bg1.jpg');
    background-size: 800px auto, cover;
    background-position: calc(100% + 300px) center, center, center;
    background-repeat: no-repeat, no-repeat;
}

body:not(.public)::before,
body:not(.public)::after {
    content: "";
    position: fixed;
    inset: 0;
    background-color: var(--background-fallback-color);
    background-image:
        url('../../img/wds_star.svg'), /* overlay */
        url('../../img/bg1.jpg');
    background-size: 800px auto, cover;
    background-position: calc(100% + 300px) center, center, center;
    background-repeat: no-repeat, no-repeat;
    z-index: -1;
    animation: bg-slideshow 12s infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 5s; /* half of total duration */
    opacity: 0;
}


@keyframes bg-slideshow {
    0%, 100% {
        opacity: 1;
        background-image: 
            url('../../img/wds_star.svg'), /* overlay */
            url('../../img/bg1.jpg');
    }

    25% {
        opacity: 1;
        background-image: 
            url('../../img/wds_star.svg'), /* overlay */
            url('../../img/bg2.jpg');
    }

    50% {
        opacity: 1;
        background-image: 
            url('../../img/wds_star.svg'), /* overlay */
            url('../../img/bg3.jpg');
    }

    75% {
        opacity: 1;
        background-image: 
            url('../../img/wds_star.svg'), /* overlay */
            url('../../img/bg4.jpg');
    }
}

body.public {
    grid-template-columns: minmax(400px, 1fr) 1fr;
    height: unset;
    min-height: 100dvh;
    color: #000;
}

aside {
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
}

body:not(.public) aside {
    border-right: 1px solid #ffffff60;
}

main#main {
    min-width: 0;
    min-height: 100dvh;
    overflow-y: auto;
    padding: 32px 32px 24px;
}

body.public {
    background-color: var(--background-fallback-color);
    background-image: url('../../img/photos/car-and-chargestation-garage-landscape.jpg');
    background-size: cover;
    animation: none;
    overflow-y: auto;
}

body.public #main {
    background-color: transparent;
    overflow-y: unset;
}

body.public aside {
    padding: 50px;
    background-color: transparent;
    overflow-y: unset;
    height: unset;
    min-height: 100dvh;
}

body.public .content-container{    
    background: rgba(255, 255, 255, 0.85);
    min-height: 100%;
    padding-bottom: 50px;
    max-width: 850px;
}

#main .full-size-image {
    height: calc(100% + 56px);
    margin: -32px -32px -32px 0;
}

#main .full-size-image img {
    height: 100%;
    width: 100%;
}

@media (max-width: 768px) {
    body {
        grid-template-columns: 1fr !important;
    }

    aside#navigation {
        position: fixed;
        bottom: 0;
        height: 65px;
        width: 100%;
        min-height: unset;
        overflow: hidden;
        box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
    }

    main#main {
        height: calc(100dvh - 65px);
        min-height: unset;
        padding: 20px;
    }


    body.public aside {
        padding: 0px;
        background-color: transparent;
    }
}

#logo {
    max-width: 100%;
}

.min-h-600{
    height: 600px;
}