* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

#page-logo-title-sub,
header nav ul li,
figcaption {
font-family: 'Archivo Narrow', sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

body { 
    font-family: 'Archivo', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    }

 
#page-logo {
    font-family: 'Archivo Black', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}



body {
 // min-height: 100vh;
  display: flex;
//  flex-direction: column;
}

header {
  //position: fixed;
  width: 100%;

  position: sticky;
  z-index: 100;
  /* z-index on sticky has to be set!  https://stackoverflow.com/a/46541425 */
  
  //height: 120px;
  top: 0;
}
/*
position: fixed;
width: 100%;
left: 0;
bottom: 0;      
text-align: center;
*/

main {
flex: 1;
overflow: auto;
z-index: 0; /* leafjet problem on top*/
}

footer {    
  position: sticky;
  width: 100%;
  left: 0;
  bottom: 0;      
  text-align: center;
}



// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700

.archivo-narrow-400 {
  font-family: "Archivo Narrow", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.archivo-400 {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.archivo-black-regular {
    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
body {
  //background-color: #c8d6be;
  background-color: #fffddd;
	min-height: 100vh;
	position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  }
  
  
body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	//background: rgba(0, 0, 0, 0.5);
	z-index: -1;
  }


header,footer {
  background: url("../../img/background/grass.jpg") repeat;
	padding: 0.5rem 0;
  }

footer, footer a  { color: #fff;}



footer {
  font-size: .8rem;
}

footer p { 
    margin: 0.2rem 1rem;    
}

footer div {
    display: inline-block;
    padding: 3px 3px;
    background-color: rgba(0,0,0, 0.7);    
}

footer span {     
    margin: 0 10px;
}

.page-container {  
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	padding: 0rem 1.5rem;  
  }
  

/*  NAVIGATION  */

header nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  

header nav ul {
	display: flex;
	list-style-type: none;
  }
  
header nav ul li {
    /*
	margin: 0rem 0.4rem;	
	padding: 0.5rem 0.5rem;
    */

    margin: 0rem 0.2rem;	
	padding: 0.5rem 0.2rem;

    align-items: center;
	-moz-border-radius: 1rem;
    -webkit-border-radius: 1rem;
    background-color: rgba(0,0,0,.2);
  }

header nav ul li a {
    /* padding: 0.7rem 1rem; */
    padding: 0.7rem .25rem; 

	text-decoration: none;
	font-size: 1.5rem;
	/*letter-spacing: 2.5px;*/    
	color: #fff;	
}


.header-info-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#jackpot-section {
	font-size: .8rem;
	color: #fff;	
  display: inline-block;
  max-width: 35%;
  margin-top: 2px;
}

#jackpot-section div {
  display: inline-block;
  background-color: rgba(0,0,0,.5);
  padding: 2px 5px;
  font-weight: bold;
}

#userinfo-section {
  display: inline-block;
  background-color: rgba(0,0,0,.5);
  padding: 2px 5px;
  color: #fff;  
  text-align:center;
  font-size: .8rem;  
}

#userinfo-section .avatar {
  display: inline-block;
  //background-color: rgba(0,0,0,.5);
  //padding: 2px 5px;
  //font-weight: bold;
  //color: #fff; 
  padding: 2px 5px;
  text-align:left;
}

#userinfo-section .avatar img {
  max-width: 30px;
  max-height: 30px;    
  vertical-align: middle;
}

.avatar-large img {
  max-width: 100px;
  max-height: 100px;    
  vertical-align: middle;
}


#userinfo-section .avatar .initials-avatar {
  width: 30px;
  height: 30px;
  font-size: 15px; 
}

#userinfo-section .infobox{
  text-align: left;
  display: inline-block;
  vertical-align:middle;
}

#userinfo-section .username {
  display: inline-block;
  padding: 2px 5px;
  font-weight: bold;
  text-align:center;
  font-size: 12px; 
}

#userinfo-section a {
  text-decoration: none;
  color: #FFF;
}

#userinfo-section a:hover {
  text-decoration: underline; 
}


#userinfo-section .position {
  display: inline-block;
  padding-top: 2px 5px;
}
#userinfo-section .points {
  display: inline-block;
  padding-top: 2px 5px;
  text-align:center;
}


#countdown-section {
	font-size: .8rem;
	color: #fff;	
}

#countdown-section .countdown-clock {
  display: inline-block;
  background-color: rgba(0,0,0,.5);
  padding: 2px 5px;
}





/* SUBNAV */

main nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  

main nav ul {
	display: flex;
	list-style-type: none;
  flex-wrap: wrap;
  }
  

main nav ul li {
  font-size: 1.3rem;  /* like H3 */
  line-height: 1.7;

    /*
	margin: 0rem 0.4rem;	
	padding: 0.5rem 0.5rem;
    */

  margin: 0rem 0.5rem 0.5rem 0rem;	
	padding: 0.2rem 0.2rem;

  align-items: center;
 
  background-color: rgba(0,0,0,.5);


  -moz-border-radius: .5rem;
  -webkit-border-radius: .5rem;
}




main nav ul li a  {
  padding: 0 .2rem;
	text-decoration: none;	
	color: #fff;	
}
main nav ul li.subnav-active  {
  background-color: rgba(255,0,0,1);
}
}



/* 
MAIN
*/



main {
	display: flex;
	/* align-items: center; */
	justify-content: center;
	//min-height: 80vh;    
    color: #11190c;
  }

 /*
main h1,
main h2,
main h3 {
	line-height: 1.7;
    margin: 1rem 0;
}
*/
main h1 {
	font-size: 1.7rem;
	line-height: 1.7;
    margin: 1rem 0 0 0;
  }

main h2 {
	font-size: 1.5rem;
	line-height: 1.7;
  margin: 0.9rem 0 0 0;
  }

main h3 {
	font-size: 1.3rem;
	line-height: 1.7;
    margin: 0.8rem rem 0 0 0;
  }

  
.txt h2 span {
	background: #3150d0;
	border-radius: 5px;
  }


main table.p {    
}
  
main table.p th,
main table.p td {
    padding: 0.1rem 2rem 0.1rem 0rem;
}

main table.p th:last-child,
main table.p td:last-child {
    padding-right: 0;
  }

main ul,
main p,
main table.p td,
main table.p th  {
	font-size: 1rem;
	line-height: 1.5;
}  

main ul,
main p {
	margin: 0.7rem 0;
	//width: 50%;
  }

main ul li {
	margin: 0 1rem;
}



  .btn {
	font-size: 1.3rem;
	color: #fff;
	cursor: pointer;
	display: none;
  }

#page-menu-show {
    background: url("../../img/menu/icons8-menu-white-48.png");
    padding:5px;
}


#page-menu-show,
#page-menu-close {
    border:none;
    background-color: transparent;
	background-size: cover;
	background-position: center;
    width: 48px;
    height: 48px;  
}


#share-button-small {  
  display: none;
}

#share-button-large {
  display: inline-block;
}




table { 
  border-collapse: collapse;
  }
  


div.icon { display: inline-block;}





	
#pagetitle {
	background-color: green;
	color: red;
	vertical-align:middle;
	line-height: 156px;
	font-size: 80px;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
}


#page-logo {
	display: flex;    
	//justify-content: center;
	//align-items: center;
	color: #fff;
}

#page-menu,
#page-logo-image,
#page-logo-title {
/* https://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css */
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}


#page-logo-image {
  display: inline-block;
}
#page-logo-title {
  display: inline-block;
}

#page-logo-image img {
	height: 60px;
  width: 60px;
	object-fit: cover;
	margin-right: 10px;
  }
  
#page-logo-title-main {
	font-size: 1.6rem;
  color: #FFF;
  }

#page-logo-title-sub {
	font-size: 1.13rem;  
  color: #FFF;
  }

#page-logo a {  
  text-decoration: none !important; 
} 



  
/*
#page-login-form {
  margin-top:5px;
}
*/

/*
 https://medium.com/@starryepiphany/fitting-and-center-aligning-images-both-vertically-and-horizontally-with-and-without-cropping-in-61e77fa0aef9
 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption?retiredLocale=de
 */












/*
 .mobile-only { display: none;}
 .mobile-none { }
 */


 @media (max-width: 1200px) {
  header nav ul li {
    margin: 0rem 0.15rem;
    padding: 0.5rem 0.15rem;
  }
  header nav ul li a  {
    font-size:1.3rem;
    padding: 0.5rem 0.15rem;
  }
 }

 @media (max-width: 1000px) {
  header nav ul li {
    margin: 0rem 0.1rem;
    padding: 0.5rem 0.1rem;
  }
  header nav ul li a  {
    font-size:1.2rem;
    padding: 0.5rem 0.1rem;
  }
 }

 @media (max-width: 900px) {
  header nav ul li {
    margin: 0rem 0.1rem;
    padding: 0.5rem 0.1rem;
  }
  header nav ul li a  {
    font-size:1.1rem;
    padding: 0.5rem 0.05rem;
  }
 }

 @media (max-width: 800px) {
  header nav ul li {
    margin: 0rem 0.1rem;
    padding: 0.5rem 0.1rem;
  }
  header nav ul li a  {
    font-size:1rem;
    padding: 0.5rem 0rem;
  }
 }


 @media (max-width: 768px) {
/*
  .mobile-only { display: inline-block;}
  .mobile-none { display: none;}
*/
  #page-logo-image img {
    height: 30px;
    width: 30px;    
    margin-right: 6px;
    margin-top: 5px;
  }

  #page-logo-title-main {
    font-size: 1rem;
  }
  
  #page-logo-title-sub {
    font-size: .7rem;
  }

  #userinfo-section .username {
    font-family: 'Archivo Narrow', sans-serif;
  }


  #jackpot-section {
    font-size: .7rem;
    max-width: unset;
  }

  main h1 {
    font-size: 1.3rem;
    line-height: 1.4;
      margin: .5rem 0 0 0;
    }
  
  main h2 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 0.3rem 0 0 0;
    }
  
  main h3 {
    font-size: 1rem;
    line-height: 1.2;
      margin: 0.1rem rem 0 0 0;
    }
  
  
	p {
	  font-size: 0.9rem;
	}
  
	#share-button-small {
	  display: inline-block;
	}
  
  #share-button-large {
	  display: none;
	}
  
  header nav ul {
	  display: none;
	}
  
  main nav ul li {
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 1rem;  /* like H3 */
    line-height: 1.2;  
  }

  
  
  
	.btn {
	  display: block;
	}
  
	header nav ul {
	  display: flex;
	  flex-direction: column;
	  position: fixed;
	  width: 300px;
	  height: 100vh;
      
      background:
      /* top, transparent black, faked with gradient */ 
      linear-gradient(
        rgba(0, 0, 0, 0.5), 
        rgba(0, 0, 0, 0.5)
      ),
      
      url("../../img/background/grass.jpg") repeat;
      top: 70px;
	  left: -100%;
	  padding: 55px 0;
	  transition: all 0.5s ease-in;
	  z-index: 10;
	}
  
	header nav ul.display {
	  left: 0;
	  transition: all 0.5s ease-in-out;
	}
  
	header ul li a {
	  display: block;
	  margin: 3px 10px;
	}
  
    header nav ul li {
        margin: 0rem 0.3rem;
        align-items: center;
        padding: 0.1rem 0.3rem;
        -moz-border-radius: 1rem;
        -webkit-border-radius: 1rem;
        background-color: rgba(0,0,0,.2);
      }
    

    header nav ul li a {        
        font-family: 'Archivo', sans-serif;
        font-size: 1.5rem;
    }    


	.close-btn {
	  position: absolute;
	  top: 0;
	  left: 15rem;
	  margin: 5px;
	}

    #page-menu-close {
        background: url("../../img/menu/icons8-close-white-48.png");
    }
}
/* END OF MEDIA < 768 */









 @media (prefers-color-scheme: dark) {
    /* https://www.rechnerhaus.de/blog/css-dark-mode-mit-zwei-zeilen-code */ 
    /* 
    html { filter: invert(100%); }
    img { filter: invert(100%); }
    */

    //body { background-color: #11190c;}    
    body { background-color: #333B2E;}    
    main { color: #FFFFFF;}      
    
    main a {filter: invert(100%);}
    main a:hover {filter: invert(100%);}
    main a:visited {filter: invert(100%);}    
    
    /* reverse */ 
    main a img { filter: invert(100%); }
    main a div {  filter: invert(100%); }
    .dark-color-fixed {  filter: invert(100%); }

    main nav ul li {
      background-color: rgba(255,255,255,.8);
    }
    
  
  }