@font-face {
    font-family: 'cantarellregular';
    src: url('../../assets/fonts/cantarell-regular-webfont.woff2') format('woff2'),
            url('../../assets/fonts/cantarell-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

* {
    padding: 0;
    margin: 0;
}
body {
    font-family: 'cantarellregular', Arial, Helvetica, sans-serif;
}

main {
    position: absolute;
    margin-top: calc( 4.2 * var( --cubit ) ) 0;
    margin-bottom: calc( 5 * var( --cubit ) ) 0;
    top: calc( 4.1999 * var( --cubit ) );
    height: calc( 100% - calc( 4.2 * var( --cubit ) ) );
    right:0;
    left:0;
    background: linear-gradient( 120deg, rgba( var( --c4n ), .6 ) 50%, rgba( var( --c5n ), .6 ) ), url("../../assets/img/background/unsplash_forest01.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow:hidden;
    z-index: 1;
}

main.weatherPage {
    height: calc( 100% - calc( 2 * calc( 4.2 * var( --cubit ) ) ) );
}

main > div.app-page, main > div.slide-out {
    position: absolute;
    top: 0;
    height: 100%;
}

main > div.app-page {
    left: 0;
    right: 0;
}

@media screen and ( min-width: 992px )  {
    main.weatherPage { height: calc( 100% - calc( 4 * var( --cubit ) ) ); }
}

/* CSS to display focused content and hide unfocused content */

main.weatherPage > :not( div#weatherPage ),
main.graphPage > :not( div#graphPage ),
main.utilityPage > :not( div#utilityPage ),
main.adPage > :not( div#adPage ) { display: none; }

:not( main.weatherPage ) + nav#nav { display: none; }

div#container main.weatherPage > div#location,
div#container main.weatherPage > div#menu,
div#container main.utilityPage > div#location,
div#container main.utilityPage > div#menu { display: initial; }