.wrapper {
    background-image: url('/content/images/background.jpg');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 

    position: fixed;
    width: 100%;
    height: 100%;

    display: grid;
            grid-gap: 20px;
            grid-template-columns: minmax(0, 200px) 3fr;
  	    grid-template-rows: 10% 1fr 10%;
            grid-template-areas:
                "header header"
                "sidebar contents"
                "footer footer";

}

@media screen and (max-width: 500px) {
    .wrapper {
        grid-template-columns: 2fr; 
  	grid-template-rows: 10% 1fr 10%;
	grid-template-areas:
            "header"
            "contents"
            "footer";
    }

    .sidebar_left { 
    	width: 0%;
 	grid-area: contents;
    }
	
   .hamburger-icon { display: block; width: 100%; text-align: center;margin-top: 5%;}
   .ui-navbar {display: none; }
}

@media screen and (min-width: 200px) {
    	
   .hamburger-icon { display: none; width: 0%;}
  
   .ui-navbar {
	display: flex;
    	list-style-type: none;
    	justify-content: space-between; 
    	padding-right: 60px;
   }
   .sidebar_left { 
    	grid-area: sidebar; 
	width: 100%;
   }

}


header {
    grid-area: header;
    width: 98%;
    background-color: darkgrey;
    top: 2%;
}

main {
    background-color: rgba(211, 211, 211, 0.7);
    grid-area: contents;
    width: 97%;
   overflow-y: auto;max-height: 800px;
}

footer {
    grid-area: footer;
    background-color: darkgrey;
   width: 98%;
}
body {
	background-color: lightgrey;
}

table {
	padding:10px;
	margin:5px;
	border: 2px solid;
	border-style:solid;
}
thead {
	background-color: darkgrey;
	position: sticky;
	top: 0;
}
th {
	
	padding:10px;
	margin:15px;
	text-align:center;

}
tbody {
	background-color: white;
}
tr,td {
	padding:10px;
	margin:5px;
	text-align:center;
}

.titel {
	font-size: 1.5em;
	font-weight: bold;
}