/* HTML */ 

* {
    margin:0;
    padding:0;
}

html {
    position:relative;
    height: 100%;
    width:100%;
    background-color: white;
}

body {
    font-family: arial;
    font-size:14px;
    color: black;
}

/*Header */

header {
    position:fixed;
    left:2.5%;
    top:0px;
    width:95%;
    margin:auto;
    display:flex;
    flex-direction: row;
    background-color: white;
}

header div { 
    padding: 10px;
    flex-grow: 1;
	flex-shrink:1;
}

header img {
    height:70px;
}

#headerlinks {
    text-align:left;
}

#headerrechts {
    text-align:right;
}

/*NAV*/

nav {
    position: fixed;
    top:80px;
    left:2.5%;
    width:95%;
    margin:auto;
    height: 80px;
    z-index:100;
}

nav div{
    width:100%;
    background-color:lightgrey;
    height: 50px;
}

/* MAIN*/ 

main {
    height:100%;
    width:80%;
    margin:auto;
    padding: 150px 0px 20px 0px;
    box-sizing:border-box;
}


h1 {
    font-family: Verdana;
    font-size: 32px;
    font-weight: bold;
    margin:auto;
    padding-top:20px;
    padding-bottom: 20px;
    text-align: center;
}

h2 {
    font-family: Verdana;
    font-size: 26px;
    margin:auto;    
    font-weight: bold;
    padding-top:10px;
    padding-bottom: 10px;
    text-align: center;
}

div#gegenstaende{
    display:flex;
    flex-wrap:wrap;
    margin:auto;
}




div#gegenstaende a{
    display:block;
    flex-grow:1;
    flex-shrink:1;
    flex-basis:40%;
    margin:30px 20px 30px 20px;  
    border: 2px solid;
    border-color: #c1c0be;
    background-color: #ffbd4a;
    border-radius: 8px;
    text-align:center;
    color: black;
    font-size:32px;
    line-height:150px;
    text-decoration: none;     
   
    }
 
div#gegenstaende a:hover {
    background-color: #ffe44c;
}


/* FOOTER*/ 

footer {
    position:fixed;
    left:2.5%;
    top:97%;
    width:95%;
    height:30px;
    margin:auto;
    display:flex;
    flex-direction: row;
    background-color: white;
    z-index:100;
}

footer a{
    text-decoration: none;
    font-size:14px;
    color: black; 
    text-align: center;
    background-color:rgba(173, 179, 174, 0.596);
    margin: 2px;
    padding: 5px;
    flex-grow:1;
	flex-shrink:1;
}

footer a:hover {
    background-color: #a19d9d;
}


   
@media (max-width:1200px){
    header img {height:40px;}
    nav {height:50px; 
        top:60px;}
    nav div {height:25px;}
    main {padding: 100px 0px 10px 0px;}
    h1 {font-size: 28px;
        margin-top:10px;
        margin-bottom:15px;}
    h2 {font-size:20px;
        margin-top:7px;
        margin-bottom:7px;}
    div#gegenstaende a {
            font-size:20px;
            line-height:100px;
            flex-basis:80%; 
        }
    footer {height:28px;}
    footer a {font-size:10px;}
    }