@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200&display=swap');

*{
    margin:0 ;
    padding: 0;
    font-family: 'Work Sans', sans-serif;
    color: wheat;
}






body{ 
 
background-color: rgb(0, 0, 0);
    
    
    }
    
    body header #logo{
    text-align: center;
        
       
        
    }

    body main #tel p{
        margin-top: -5px;
        text-align: center;
        color: white;
        font-size:50px;
        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }

    body main div#tel p a{
        text-decoration: none; border: 2px solid white; padding: 10px; border-radius: 10px;
    }

body main div#tel p a:hover{

    
    color: rgb(255, 255, 255);
    background-color: rgb(47, 47, 47);
    border: 2px solid rgb(47, 47, 47);
    transition: 0.1s ease-in;   
    font-size: 101%;
    box-shadow: 10px 10px 10px black;
    
}

body main #tel p{
          
    font-size:4.5vw;
   
}
    
    
    body header #line{
        height: 250px;
        width: 100%;
        position: absolute;
        background-color: rgb(133, 133, 133);
        top: 0px;
        z-index: -1;
        filter: opacity(40%);
    }


     header h1 {
        text-align: center;
        font-size: 3vw;
        color: rgb(188, 188, 188);

    }

body nav{ 
    background-color: black;
   
    margin: auto;
    text-align: center;
    width: 60%;
position: sticky;
position: -webkit-sticky;
top: 10px;
text-align: center;
height: auto;

border: 1px solid rgb(255, 255, 255);

}

body nav ul{
    margin: 5px;
    padding: auto;;
    
    
 

}

body nav ul li{
   opacity: 1;
    border: 1px solid rgb(255, 255, 255) ;
    border-radius: 10px;
    display: inline-block;
    margin: 3px;

}


body nav ul li:hover{
    color: black;
    border: 1px solid rgb(192, 102, 0);
    background-color: rgb(192, 102, 0);
}

body nav ul li a{
    text-decoration: none;
    font-size: 20px;
   padding: 5px;
   color: rgb(255, 255, 255);
}

body nav ul li a:hover {
    color: black;
   font-weight:bold;
 
    
}

Body main{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

Body main .Box{
   float: left;
   width: auto;
 
   margin: auto;
   text-align: center;

}

Body main .Box-Inv{
 
    width: auto;
  color: black;
    margin: auto;
    text-align: center;
 
 }


#top{
text-align: center;
}


Body main .BoxG{
    height: 50px;
    width: 300px;
    background-color: rgb(0, 136, 255);
    margin: auto;
    text-align: center;
}

span.text{
      height: 50px;
   width: auto;
 
   margin: auto;
   text-align: center;

    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    font-size: 23px;
}

span.text-Inv{
    height: 50px;
 width: auto;

 margin: auto;
 text-align: center;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: rgb(0, 0, 0);
  font-size: 23px;
}


span.info{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    font-size: 23px;
    float:left ;
}

span.bei{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: rgb(117, 117, 117);
font-size: 15px;

}

Body main .h2{
    text-align: center;
    padding: 20px;
    }
    
Body main .h3{
        text-align: center;
     padding: 20px;
    }

    
table{
    text-align: center;
    margin: auto;
}

table td{
    padding-top: 10px ;
}

Body main #Croques #Sauce{
    color: rgb(0, 0, 0);
    background-color: rgb(192, 102, 0);
    margin: auto;
    text-align: center;
    width: 50vw;
  
    border: 3px solid solid;
    margin-top:30px ;
    padding: 10px;
    font-size: 110%;

    border-radius: 20px;
 

}

#Sauce h2,p{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: black;
   
   
}


section#extra{
  
}

#Extra-Be{
    padding: 10px;
   font-size: large;
    width: 50vw;  margin: auto;
    text-align: center;
    border: 1px solid rgb(192, 102, 0);
}




#PAPA{
    font-family: "Times New Roman", Times, serif;
    color:  white;
}




section#Kids-Menu {
    margin: auto;
    text-align: center;
    height: auto;
    width: 40%;
    border: 1px solid rgb(192, 102, 0);
    padding: 10px;
    
}

section#Kids-Menu p {
 color: aliceblue;
 line-height: 29px;
    
}

p#boxi{
    border: 1px solid rgb(192, 102, 0);
    width: 20vw;
    margin: auto;
    
    text-align: center;
}

p#dressing{
    color: rgb(192, 102, 0);
    text-align: center;
    margin-bottom: 20px;
}

p#info-t{
    color: rgb(192, 102, 0);
    text-align: center;
    margin-bottom: 20px;
}




span.beiC{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: rgb(117, 117, 117);
font-size: 15px;
margin: 10px;

float: right;



}



p#info-P{
    margin: auto;
    text-align: center;
    color: rgb(192, 102, 0);
    margin-top: 15px;
}

p#info-M{
    margin: auto;
    text-align: center;
    color: rgb(59, 59, 59);
    margin-top: 15px;
}



#Tagesangebote{
  padding-left: 5px;
  padding-right: 5px;
    padding-bottom:30px ;
    border:1px solid rgb(192, 102, 0);
    width: 60vw;
    text-align: center;
    margin: auto;
}

#Mittagstisch{
 
    background-color: rgb(0, 0, 0);
    margin: auto;
    text-align: center;
    width: 60vw;
  
    border: 3px solid solid;
   padding-bottom: 30px;
    
    font-size: 110%;

    border-radius: 20px;
}


#price-mit{
   
    margin: auto;
    text-align: center;
    height: 3vw;
    width: 3vw;
  
    
}

#te-ta{
    padding:10px ;
    margin: auto;
    text-align: center;
    rotate: -15deg;
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 30px;
    margin-top: 20px;  
    background-color: rgb(192, 102, 0);
    border-radius: 100px; 
    width:100px ;
    height: 100px;
}

#te-ta p{
margin-top:10px ;
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 30px;
   
}


img#img-ar-mi{
    position: absolute;
    width: 100px;
 margin-top: -110px;
 margin-left: 50px;
 
}

#Upper-Info{
       
    padding: 40px; color: aliceblue; margin: auto; text-align: center;font-size: 20px;
   
}

#Upper-Info a{
     font-weight: bold;
     border: 1px solid white; padding: 5px;
     color: white;
}

#Upper-Info a:hover{
    background-color: rgb(192, 102, 0);
     border: 1px solid rgb(192, 102, 0);
     color: black;
     transition: 0.1s ease-in;
   
}


#Up-But{
    border-radius: 100px;
   
    height: 8vw;
    width: 8vw; 
    left: 87vw;
    bottom: 5vh;

 background-position: center;
 background-size: cover;
    position: sticky;
    z-index: 5;

    background-image: url('/Arrow.png');
    background-size: cover;

background-position: center;

    border: 2px solid rgb(192, 102, 0);
    box-shadow: 10px 10px 60px  rgb(192, 102, 0);

    
}








#aller{
    font-weight: bold;
    padding: 4px;
    font-size: 15px;
    border-radius: 100px;
    position: relative;
    margin: auto;
    margin-top: 20px;
   width: 275px;
    background-color: rgb(192, 102, 0);
 text-align: center;
    
    bottom: 0;


 
   text-align: center;
 

    
  
    background-size: cover;



   

    
}












@media only screen and (max-width: 730px){
   
    
   #Upper-Info {
    line-height: 50px;

   }
    




    body header #logo img{
        width: 60vw;
           
           
            
        }
        body header #line{
            height: 40vw;
            width: 100%;
            position: absolute;
            
            top: 0px;
            z-index: -1;
            filter: opacity(40%);
        }
}