:root {
    --designfarbe: #4CAF50;
    --hintergrundfarbe: #f4f4f4;
}
body {
    font-family: Arial, sans-serif;
    background-color: var(--hintergrundfarbe);
    margin: 0;
    padding: 20px;
}
header {
    background-color: var(--designfarbe);
    color: var(--hintergrundfarbe);
    margin-top: 3vh;
    padding: 10px 0;
    text-align: center;
}
header h1{
    font-size: xx-large;
    color:white;         
}
a.header:link{
    text-decoration: none;
}

header img{
    z-index: 2;
    position: absolute;
    left: 3vw;
    top:4vh;
    max-width: 20vw;
}
nav{
    width:66%;
    margin-left: auto;
    margin-right: auto;    
}
nav ul{
    list-style: none;
    display: flex;
    justify-content: center;
}
nav ul li:hover,nav ul li:hover a{
    background-color: var(--designfarbe);
    color: var(--hintergrundfarbe);
}
nav ul li{
    padding: 1rem;
    color:var(--designfarbe);
}
nav ul li a{
    text-decoration: none;
    font-size: medium;
    color:var(--designfarbe);
}
/*nav ul li a:hover{
    color: var(--hintergrundfarbe);
}*/
main {
    background: white;
    padding: 20px;
    margin-top: 20px;
    width:66%;
    margin-left:auto;
    margin-right:auto;
}
h1{
    font-size: large;
}
h2{
    font-size: medium;
}
button{
    height:auto;
    font-size: large;            
    width:33%;
    margin-left:auto;
    margin-right:auto;
}
footer {
    text-align: center;
    margin-top: 20px;
}

@media (max-width: 600px) 
{ 
    main,  footer { padding: 10px; } 
    header {padding:1px;}
    main{width:90%;}
    body { padding: 10px; } 
    form { gap: 5px; } 
    button { padding: 5px; width:66%;} 
}