/* 320 - 480 Portrait */
@import url('style-mobile.css') screen and (max-width: 480px) and (orientation: portrait);
@import url('style-mobile-sml.css') screen and (max-width: 425px) and (orientation: portrait);
@import url('style-mobile-small.css') screen and (max-width: 320px) and (orientation: portrait);
@import url('style-mobile-medium.css') screen and (max-width: 375px) and (orientation: portrait);
@import url('style-mobile-large.css') screen and (max-width: 425px) and (orientation: portrait);


/* 481 -600 Landscape */

@import url('style-mobile.css') screen and (max-width: 1023px) and (orientation: landscape);

/* 681 - 768 Portrait */
@import url('style-mobile.css') screen and (max-width: 1024px) and (orientation: portrait);

/* 769 - 1024 Landscape */
@import url('style-desktop.css') screen and (min-width: 1024px) and (orientation: landscape);
@import url('nav-desktop.css') screen and (min-width: 1024px) and (orientation: landscape);

/* 1025 - 1280 / Laptop and Small Desktop */
@import url('nav-desktop-1080.css') screen and (min-width: 1080px) and (orientation: landscape);

/* 1281 - 1440 / Large desktop */
@import url('nav-desktop-1280.css') screen and (min-width: 1280px) and (orientation: landscape);

/* 1441+ /  Extra large desktop */



/* mobile - side drawer */
/* @import "../css/mobile.css" screen and (max-width: 768px) and (orientation: portrait); */


/* desktop */
/*
@import "../css/style-desktop.css" screen and (min-width: 768px); 
@import "../css/nav-desktop.css" screen and (min-width: 768px) and (orientation: landscape);
*/

/*
@import "../css/nav-wide-style.css" screen and (min-width: 768px) and (orientation: landscape);
*/

/* tablet - ipad */
/*
@import "../css/nav-drawer.css" screen and (min-width: 1024px) and (orientation: portrait);
*/
/* EXTRA */

@import "style-animation.css";
@import "../css/style-experimental.css";


@import "../css/dark-mode.css" screen and (prefers-color-scheme: dark);

    /*
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen  and (min-width: 1024px)" /> <!-- 45.5em --->
    <link rel="stylesheet" type="text/css" href="css/nav-desktop.css" media="screen and (min-width: 1024px) and (orientation:landscape)" />
    <link rel="stylesheet" href="css/header-2.0.css">
    */

.previewLabel {
    position: fixed;
    top: 16px;
    left: -46px;
    width: 160px;
    padding: 5px;
    rotate: -35deg;
    background-color: rgb(130, 0, 0);
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.7em;
    font-weight: 700;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}


:root {
    --red: #CC0224;
    --light-red: #b62727;
    --very-light-red: #FF7373;
    --dark-gray: #121212;
    --light-bg: #EEEEEE;
    --light-darker-bg: #cfcfcf;
    --header-bg: #2C2A2A;
    --header-bg-transparent: rgba(44, 42, 42, 0.84);
    --header-bg-darker: rgba(0, 0, 0, 0.84); /* alternative darker background */
}