* {vertical-align: baseline;font-weight: inherit;font-family: inherit;font-style: inherit;font-size: 100%;border: 0 none;outline: 0;padding: 0;margin: 0; box-sizing: border-box;}
:root{/*blue orange theme*/
    --color-main: #111C59;
    --color-main-light:#182881;
    --color-bg: #F5EDEA;
    --color-secondary: #F25C05;;
    --color-accent: #9A031E;
    --color-text: #D5E1EF;
    --color-text-inv: #353741;
    --color-blue-gradient: linear-gradient(176deg, var(--color-main-light), var(--color-main));
    --color-gray-gradient: linear-gradient(120deg, #343A4F, #0F1620);
    --color-blue-gradient-straight: linear-gradient(180deg, var(--color-main-light), var(--color-main));
    --color-gray-gradient-straight: linear-gradient(180deg, #343A4F, #0F1620);
    --color-trio: 17, 28, 89;   /*NOT IN USE*/
    --font-heading: 'Cinzel';
    --font-normal: 'Quicksand';
    --font-accent: 'Cinzel';
    --radius: 5px;
}
[data-theme="blue"] { /*blue orange theme*/
    --color-main: #111C59;
    --color-main-light:#182881;
    --color-bg: #F5EDEA;
    --color-secondary: #F25C05;;
    --color-accent: #9A031E;
    --color-text: #D5E1EF;
    --color-text-inv: #353741;
    --color-blue-gradient: linear-gradient(176deg, var(--color-main-light), var(--color-main));
    --color-gray-gradient: linear-gradient(120deg, #343A4F, #0F1620);
    --color-blue-gradient-straight: linear-gradient(180deg, var(--color-main-light), var(--color-main));
    --color-trio: 17, 28, 89;
}
[data-theme="red"] { /*blue orange theme*/
    --color-main: #3D0104;
    --color-main-light:#660106;
    --color-bg: #F5EDEA;
    --color-secondary: #DDCA7D;;
    --color-accent: #9A031E;
    --color-text: #EEEEEE;
    --color-text-inv: #353741;
    --color-blue-gradient: linear-gradient(176deg, var(--color-main-light), var(--color-main));
    --color-gray-gradient: linear-gradient(120deg, #343A4F, #0F1620);
    --color-blue-gradient-straight: linear-gradient(180deg, var(--color-main-light), var(--color-main));
}
[data-theme="purple"] { /*purple salmon theme*/
    --color-main: #260319;
    --color-main-light:#45062E;
    --color-bg: #F5EDEA;
    --color-secondary: #F79E8D;;
    --color-accent: #86BBD8;
    --color-text: #FFF7F0;
    --color-text-inv: #353741;
    --color-blue-gradient: linear-gradient(176deg, var(--color-main-light), var(--color-main));
    --color-gray-gradient: linear-gradient(120deg, #343A4F, #0F1620);
    --color-blue-gradient-straight: linear-gradient(180deg, var(--color-main-light), var(--color-main));
}
[data-theme="green"] { /*green theme*/
    --color-main: #0C2603;
    --color-main-light:#194606;
    --color-bg: #F5EDEA;
    --color-secondary: #F0b914;;
    --color-accent: #7798AB;
    --color-text: #DCEADD;
    --color-text-inv: #353741;
    --color-blue-gradient: linear-gradient(176deg, var(--color-main-light), var(--color-main));
    --color-gray-gradient: linear-gradient(120deg, #343A4F, #0F1620);
    --color-blue-gradient-straight: linear-gradient(180deg, var(--color-main-light), var(--color-main));
}
small{font-size: 75%}
b,strong{font-weight: bold}
body{
  height: 100%;
}
html{
  height: 100%;
}
#wrapper {
  min-height: 100%;
  width: 100%;
  display: flex; flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
}
#maincontent{margin: 20px; margin-top: 0;}

body{
	font-family: var(--font-normal),sans-serif;
	font-size: 16px;
	color:var(--color-text);
    background-image: linear-gradient(90deg, #414850, #131720);
    /*background-color: var(--color-bg);
    background-image: url("/bilder/bg.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;*/
    line-height: 125%;
}
h1,h2,h3{
    font-family: var(--font-normal),sans-serif; 
    margin:10px 0;
    color:var(--color-secondary);
    line-height: 110%;
    font-weight: bold;
}

h1.accented{font-family: var(--font-accent); margin: 4px 0;}
h1{font-size:28px;color:var(--color-secondary); font-weight: bold;font-family: var(--font-heading); margin-top: 40px;}
h2{font-size:24px;} 
h3{font-size:20px;}
a{
    text-decoration: none; 
    color: var(--color-secondary);
}
a:hover{color:var(--color-text);}
input[type="checkbox"]{width: 25px; height: 25px;}
@media (max-width:769px){
    #wrapper {margin: 5px;}
    #container{flex-direction: column;}
}

/*----------------------------
MENU
-------------------------------*/
  #mainmenu{text-align: left; min-height: 52px;background-image: var(--color-blue-gradient-straight);
padding: 0 10px;}
  #mbars{height: 60px; float: right;margin-right: 20px !important;}
  #mainmenu ul{display:flex; display: none; flex-direction: column;}
  #mainmenu li{display:block;
    background-image: var(--color-blue-gradient-straight);
    padding:10px;
    border-top:1px solid rgb(255,255,255,0.2);
  }
  #mainmenu li,
  #mainmenu li a,
  #mainmenu li a:visited
  {color:#FFFFFF;
    text-transform: uppercase;}
  #mainmenu li ul{display: none; position: unset; margin: 10px -10px -10px -10px; font-size: 13px;}
  #mainmenu li ul li{ padding-left: 20px; }
  #mainmenu .caret{height: 10px;padding: 0 0 0 15px}
  @media(min-width: 1025px){
    #mbars{display: none}
    #mainmenu {text-align: left;
    display: flex;
    align-items: center;
    
    height: 65px;
    border-bottom: 1px solid var(--color-main);
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.3);
  }
    #mainmenu img{margin-top: 5px;}
    #mainmenu ul{display: flex; flex-direction: row; z-index: 9999;
    position: unset;
    justify-content: flex-start;
    width: 100%;
    align-items: center;
    height: 65px;}
    #mainmenu li{
      color: var(--color-main-light);
      position: relative;
    font-size: 18px;
     font-family: var(--font-normal);
    font-weight: bold;
    text-transform: none;
    display: unset;
    background-color: unset;
    border-top:6px solid transparent;
    /*cursor: pointer;*/
    padding: 0;
    padding-left: 20px;
    line-height: 58px;
    box-sizing: border-box;
    transition: all 0.3s ease-in;
    }
    #mainmenu li{padding:  0 20px;}
    #mainmenu li:hover{border-top: 6px solid var(--color-secondary); cursor: pointer;}
    #mainmenu li:hover ul{display: block}
    #mainmenu li, #mainmenu li a, #mainmenu li a:visited {
    color: var(--color-turquoise);
    text-transform: none;
    }
    #mainmenu li:hover, #mainmenu li:hover a{color:var(--color-secondary);}
    #mainmenu li ul{display:none;position: absolute;
    left: 10px;
    top: 49px;
    background-image: var(--color-blue-gradient);
    min-width: 140px;box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
    }
    #mainmenu li ul li{ font-family: var(--font-normal); font-weight:normal; color:#FFF;line-height: 35px;
      border-top: 1px solid rgb(255,255,255,0.3); display: block; padding:0; padding-left: 10px; font-size: 13px; transition: all 0.2s}
    #mainmenu li ul li:hover{border-top:1px solid rgb(255,255,255,0.3);border-left: 6px solid #FFF;}
    #mainmenu li:hover ul li a,#mainmenu li ul li:hover a{color:#FFF;}
    #mainmenu li ul li a{color:#FFFFFF;text-transform: uppercase;    font-size: 13px;}
  }