body {
    margin: 0;
    padding: 0;
    background-color: rgb(239, 196, 255);
}

header{

    display: grid;
    position: fixed;
    grid-template-columns: 1fr 100px 100px 100px;
    grid-template-rows: 80px;
    width: 100%;
    z-index: 5;
    background-color: rgb(239, 196, 255);
    top: 0;
    left: 0;

    
}

.logo{

    top: 8px;
    left: 14px;
    grid-column: 1/2;
    grid-row: 1/1;
    position: relative;
    
    
    background-size: 1000px 2000px;
    z-index: 10;
    
}

.logo{

    max-width:286px;
    position: relative;
}

.MainImage{
 
   top: 55px;
   left: 6px;
   position: relative;
   
   

   
  
   
    
}

.TitleImage{
    width: 100%;
    
}
.menuText{
    top:15px;
    position: relative;
    font-family: 'Roboto';
    font-style: light;
    font-size: 32px;
    text-align: right;
    left: 180px;

    color: rgb(76, 24, 93);

 

}

.Stapferhaus{

    font-family: 'Roboto';
    top: 32px;
    position: relative;
    font-size: 32px;
    text-align: left;
    color: rgb(76, 24, 93);
    

    grid-column: 1/2;
    grid-row: 1/1;
    left: 314px;
       
}



.horizontalLine{
    width: 2000px;
    height: 18px;
    background-color:rgb(76, 24, 93);
    margin-top: 70px;
    margin-bottom: 0px;
    margin-left: 314px;
    
    position: absolute;
    
  
}

.Circles{

    
    font-family: 'Roboto';
    font-size: 32px;

    display: grid;
    grid: 150px / auto auto auto;
   
    
    
    top: 300px;
    left: 210px;

    position: relative;
    color: white;
   
}
.Item1{
    position: center;
    border-radius: 50%;
    background-color: rgb(76, 24, 93);
    width: 200px;
    height: 200px;
    
    
}

.text1{

    font-family: 'Roboto';

    position: relative;
    float: left;
    width: 25%;
    font-size: 20px;
    color: rgb(76, 24, 93);

    left: 82px;
    top: 750px;
}

.images1{
  position: relative;
  float: left;
  
  top: 750px;
  left: 180px;
  
}