﻿.container { 
  height:98vh; 
  display: grid; 
  grid-template-rows: 50px 1fr 40px; 
  grid-template-columns: 10% 80% 10%; 
} 

header { 
  /* background:gray; */
  grid-column-start:1; 
  grid-column-end:4; 
  grid-row-start:1; 
  grid-row-end:2; 
  
  text-align: center;
} 

menue {
  /* background:gray; */
  grid-column-start:1; 
  grid-column-end:2; 
  grid-row-start:2; 
  grid-row-end:3; 
	margin-left: 10px;
	text-align: left;
}

article { 
  /* background:gray; */ 
  grid-column-start:2; 
  grid-column-end:3; 
  grid-row-start:2; 
  grid-row-end:3; 
  border: none;
} 

login { 
  /* background:gray; */
  grid-column-start:3; 
  grid-column-end:4; 
  grid-row-start:2; 
  grid-row-end:3; 
  
	text-align: center;
} 

footer { 
  /* background:gray; */
  grid-column-start:1; 
  grid-column-end:4; 
  grid-row-start:3; 
  grid-row-end:4; 
  
  text-align: center;

}


h1 {
	font-size:22px;
  color:black;
  font-family: Arial;
}

h2 {
	font-size:18px;
  color:black;
  font-family: Arial;
}

h3 {
	font-size:12px;
  color:black;
  font-family: Arial;
  line-height: 100%
}

h4 {
	font-size:12px;
  color:black;
  font-family: Arial;
  line-height: 1%
}      






/* Remove default bullets */                                                        
ul, #myUL {                                                                         
  list-style-type: none;                                                            
}                                                                                   
                                                                                    
/* Remove margins and padding from the parent ul */                                 
#myUL {                                                                             
  margin: 0;                                                                        
  padding: 0;                                                                       
}                                                                                   
                                                                                    
/* Style the caret/arrow */                                                         
.caret {                                                                            
  cursor: pointer;                                                                  
  user-select: none; /* Prevent text selection */    
  font-size:12px;
  color:black;
  font-family: Arial;
  line-height: 100%                               
}                                                                                   
                                                                                    
/* Create the caret/arrow with a unicode, and style it */                           
.caret::before {                                                                    
  content: "\25B6";                                                                 
  color: black;                                                                     
  display: inline-block;                                                            
  margin-right: 6px;                                                                
}                                                                                   
                                                                                    
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */                
.caret-down::before {                                                               
  transform: rotate(90deg);                                                         
}                                                                                   
                                                                                    
/* Hide the nested list */                                                          
.nested {                                                                           
  display: none; 
  font-size:12px;
  color:black;
  font-family: Arial;
  line-height: 100%                                                                       
}                                                                                   
                                                                                    
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {                                                                           
  display: block;                                                                   
}                                                                                   