/* allgemeines */
* {
    box-sizing: border-box;
}

body {
    /*background-color: rgba(39, 73, 51, 0.884);*/
    background-image: url("pics/backgroundiam.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;    
    height: 100%;
    
        
}

p {
    font-size: 20px;
    font-family:Arial, Helvetica, sans-serif;
}

h1 {
    text-align: center;
    font-family:Arial, Helvetica, sans-serif;
}

h2 {
    text-align: center;
    font-family:Arial, Helvetica, sans-serif;
}

ul {
    text-align: left;
    font-size: 25px;
    font-family:Arial, Helvetica, sans-serif;

}

li{
    font-family:Arial, Helvetica, sans-serif;
}

/*header*/



/* Navigation Bar */
.navbar {
    float: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: auto;
    padding-right: auto;
    max-width: 480px;
}


.navbar ul{
    list-style-type: none;  
    overflow: hidden; 
    background-color: rgb(248, 248, 255, 0.2);
    border-radius: 10px;
}

.navbar li{
    float: left;
}

.navbar li a{
    display: block;
    padding: 10px;
    text-decoration: none;
    color: rgb(56, 29, 9);
    font-family:Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: bold;
    text-align: center;  
}

/* Change the link color to black on hover */
li a:hover {
    color: rgb(0, 0, 0, 0.3);
    background-color:rgb(248, 248, 255, 0.1);
  }
/*Reihe*/

.row {
    margin-left: 20px;
    margin-right: 20px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}


/*singleblock*/

.singleblock {
    float: none;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    background-color:rgb(237, 240, 224, 0.2);
    border-radius: 10px;
    padding: 20px;    
}
.singleblock a{
    color: rgb(56, 29, 9);
}

.singleblock ul {
    text-align: left;
}
.singleblock h3{
    text-align: center;
}




/*About Me*/
.about {
    float: none;
    max-width: 1000px; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;  
}

.about.left {
    float: left;
    width: 30%;     
}

.about.right {
    float: left;
    width: 70%;
    background-color:rgb(237, 240, 224, 0.2);
    border: solid px;
    border-radius: 10px;
    padding: 20px;
    text-align: left;
      
}

.about img {
    border-radius: 10px;
}

/*Angebot*/


.angebot {
    float: none;
    max-width: 1000px;   
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    
}
.angebot.left {
    float: left;
    width: 50%;
    background-color: rgb(237, 240, 224, 0.2);
    border-radius: 10px;
    padding-left: 20px;
    padding-right: 20px;
    
}
.angebot.right {
    float: left;
    width: 50%;
    background-color: rgb(237, 240, 224, 0.2);
    border: solid px;
    border-radius: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.angebot ul{
    font-size: 25px;
}
.angebot h2 {
    text-align: center;
    /*background-color: rgb(237, 240, 224, 0.5);*/
}

@media screen and (max-width: 720px) {
    .angebot.left{
        width: 100%;         
    }
    .angebot.right{
        width: 100%;
    }
    .about.left{
        width: 100%;
    }
    .about.right{
        width: 100%;
    }
    .row {
        margin-left: 0;
        margin-right: 0;
    }
}

.footer{
    float: none;
    margin-left: auto;
    margin-right: auto; 
    padding-left: auto;
    padding-right: auto;
    max-width: 255px;   
   
}


.footer ul{
    list-style-type: none;  
    overflow: hidden;
    background-color: rgb(248, 248, 255, 0.2);
    border-radius: 10px;
}

.footer li{
    float: left;
}


.footer li a{
    display: block;
    padding: 10px;
}

/* Change the link color to black on hover */
li a:hover {
    color: rgb(0, 0, 0);
    background-color:rgb(248, 248, 255, 0.2);
  }