/*  --- sort+grøn tema --- */
html { scroll-behavior: smooth; } /*  virker ikke i safari, nov2023 | transition top:0? */ 

body { background-color: #141414; }  /* hvid tema: #eee; */

#side {
    max-width: 1280px;
	margin: 0 auto;
	background: black;	/* hvid tema: white; */
	font-size: 18px;
	line-height:1.4;
	padding: 5px;
    color: white;	/* hvid tema: black; */
	font-family: Arial, Helvetica, sans-serif;
   }
      
	a:link {
    color: white;	/* hvid tema: black; */
    text-decoration:underline;
   }
	a:visited {
    color: gray;	/* sort tema: -> lysegrå || hvid tema: -> mørkegrå */
    text-decoration:underline;
   }
	a:hover {
    color: green;
    text-decoration:none;
   }         
   
/* -------  footer.inc  -------------  */   
   footer a:link {
   color: white;
   text-decoration:none;
   }
   footer a:visited {
   color: white;
   text-decoration:none;
   }
   footer a:hover {
   color: black;
   text-decoration:none;
   font-style:italic;  
   }     
   
/* ---------  toppen.inc  -----------  */   
nav {
	/* background-color:green; */
	background-color: rgba(0,128,0,0.5);	
	border-top:2px solid black; 
	border-bottom:2px solid black; 	
	color:white; 	/* tema hvid: black */
	text-align:center; 
	font-size:20px; 
	line-height:30px;
    position:sticky;
	top:0px;
	z-index:10;	
    transition: top 0.3s; /* Transition effect when sliding down (and up): skjul/vis menu) */	
    }   
	
section { margin:10px; padding:10px; border-radius:6px; box-shadow:0px 0px 15px 2px gray inset; background-color:#282828; color:white; } /* =bg-lysesort */

#menu{
	background-color: green;  /* grønt bælte */
	border-style: solid;
	border-width: 1px 0px 1px 0px;
	border-color: #d5d5d5;
	margin: 0px 15px 5px 15px;
	line-height: 30px; /* bestemmer højden af menu-linjen og centrerer teksten */
	text-align: center;
}
	
.menuknap{
 	padding: 7px 20px;  /* ud til menu-border */ 
	color: white;	/* tema hvid: black; */
	transition: color 0.15s linear;
   }	
	
a.menuknap:link, a.menuknap:visited {
    color: white;	/* tema hvid: black; */
	text-decoration:none;
   }
a.menuknap:hover {
    color: black;	/* tema hvid: white; */
	text-decoration:none;
    font-style:italic;
   }   
a.menuknap:active {
    color: blue;
	text-decoration:none;
   }
a.menuvis{
    color: red; /* test - virker ikke?! */
	text-decoration:underline;	
	font-style: italic;
	font-weight: 600;
}	
/* -------------------------------- */

button  { 
    cursor: pointer;
    /* width:  70px; */
	height: 25px;
    font-size: 16px;	
    margin: 5px;	
    border-style: solid; 
    border-color: #305000;
	border-width: 1px 2px 2px 1px;
	color: white;
	transition: color 0.15s linear;
    background-color: green;	
	font-weight: bold;
	font-family: helvetica, arial, sans serif;
    text-align:  center; 
   }
button:hover  { color: black;}
button:active{ border-width: 2px 1px 1px 2px;}   

/*  --------------------------------------------------------------------------------------------------------------- */   
/* ***** https://www.youtube.com/watch?v=d34GsFz-HkY  How To Create a Cool Parallax Scrolling Effect For Your Websites
   eksempel:  https://www.nasa.gov/specials/artemis/   **** */
	  
   /* Create a Parallax Effect */ 
   /* virker bedst, hvis billedet/baggrunden er midt på siden, så man kan få set både top og bund ... */
    .bgimg-0, .bgimg-1, .bgimg-2, .bgimg-3 {
	 background: no-repeat;   
	 background-size: cover;
	 background-attachment: fixed;
	 /* background-position: center top; */
	 height: 400px;
	 border-radius:10px;
   }
   /* top image ( fødder, smalt ) */
	.bgimg-0 {
    background-image: url('pic/toppen.jpg');
    max-height: 90px;
	background-position: center top; 	
	border-radius:0px;
	}   
   /* 1. image ( musik + ingerlise ) - også i midten */
	.bgimg-1 {
    background-image: url('pic/bg1.jpg');
    height: 400px;
	background-position: center center; 	
	}
	/* 2. image (kreds, menuet) - kun nederst */
	.bgimg-2 {
    background-image: url('pic/bg8.jpg');
	background-position: center bottom; 	
    height: 300px;
	}
	/* 3. image (birger-video) - kun nederst*/
	.bgimg-3 {
    background-image: url('pic/bg4c.jpg');
	background-position: center bottom; 	
    height: 400px;
	}

/* Turn off parallax scrolling for tablets and phones 
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6 {
     background-attachment: scroll;
     min-height: 150px;
    }
  } */
/*  ---------------------------------------------------------------------- */   

header { font-size:36px; text-align:center; line-height:70px; padding:5px } 
.fixed_links { width:50px; position:fixed; right: 5px; z-index:3; } 

@media screen and ( max-width: 1280px ) { section {border:0px; } }

@media screen and ( max-width: 600px ) { 
   .bgimg-1, .bgimg-2, .bgimg-3 {
     background-attachment: scroll;
     height: 160px;
    }
	.bgimg-0 { height: 80px; }
 }
 @media screen and ( max-width: 540px ) { 
 	#side { padding:0px; }
	nav { font-size: 18px; }
	section { margin:2px; border:0px; padding:1px; }
    .fixed_links {width:40px; }	
	artikel { margin:5px 0px; padding:5px; }
 } 
 @media screen and ( max-width: 460px ) { 
	header { font-size:30px; }
 }  
 @media screen and ( max-width: 360px ) { 
	header { font-size:24px; }
 } 
 @media screen and ( max-width: 290px ) { 
	header { font-size:24px; line-height:36px; }
 } 
 
.fed { font-weight:bold; }
.font120 { font-size:120%; }
.kursiv { font-style: italic; }
.center { text-align:center; }
.venstre{ text-align:left; }
.graa {color:gray;}
.blaa {color:blue;}
.red {color:red;}
.green {color:green;}
.gul {color:yellow;} 
.top_tittel { font-size:130%; font-weight:bold; text-align:center; }
.bg-gul { background-color:yellow; color:black; }
.bg-graa { background-color:gray; }
/* .bg-lysesort { background-color:#e8f0e8; color:black; border: 1px solid #ddd;}  tema hvid */
.bg-lysesort { background-color:#282828; color:white}  /* =farven i section */
.bg-hvid { background-color:white; color:black; }

 /* ---  bruges vist ikke længere -> slettes  */   
#fod {
	border-style: solid;
	border-width: 1px 0px 0px 0px;
	margin: 0px 15px 0px 15px;
    padding: 5px;
	font-size: 13px;
    text-align: center;
	clear: both;
   }