body{
   padding: 0;
   margin: 0;
}

header{
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 2;
}



nav ul{
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: black;
   display: flex;
   align-items: center;
}

nav li{
   list-style: none;
}

nav li a{
   display: block;
   color: aliceblue;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
}

nav li a:hover:not(.active){
    background-color: rgb(177, 48, 194);
    border: 1px solid rgb(177, 48, 194);
}

.active{
   background-color: orange;
   border: 1px solid orange;
}

.lang-switch{
   display: flex;
   align-items: center;
   gap: 6px;
   margin-left:auto;
   margin-right: 20px;
}

.lang-switch span{
   font-weight: bold;
   font-size: bold;
   color: wheat;
}

.switch{
   position: relative;
   display: inline-block;
   width: 50px;
   height: 26px;
}

.switch input{
   opacity: 0;
   width: 0;
   height: 0;
}

.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #bdc3c7;
   transition: .4s;
}

.slider::before {
   position: absolute;
   content: "";
   height: 20px;
   width: 20px;
   bottom: 4px;
   background-color: white;
   transition: .4s;
}

input:checked+.slider{
   background-color: #3498db;
}

input:checked+.slider:before{
   transform: translateX(24px);
}

.slider.round{
   border-radius: 34px;
}

.slider.round:before{
   border-radius: 50%;
}

main{
   scroll-snap-type: mandatory;
   scroll-behavior: smooth;

}

main section{
   height: 100vw;
   padding: 33px 0px 20px 10px;
   scroll-snap-align: start;
   font-size: x-large;
}

section.index{
   background-color: whitesmoke;
   height: 600px;
   background-image: url();
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   text-align: center;

}


section.about{
   background-image: url(/images/restaurante.png);
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   height: 1100px;
   font-size: x-large;
}
section.about2{
   background-color: rgba(0, 0, 0, 0.5);
   color: aliceblue;
   height: 850px;
   width: 750px;
   position: relative;
   margin: auto
   ;

}



section.news{
   background-image: url(/images/papelblanco.avif);
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   height: 1100px;
   text-align: center;
   position: relative;

}
.tablasushi{
   background-color: black;
  
   background-image: url(/images/sushitabla.webp);
   background-image:center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 450px;
   width: 600px;
   position: relative;
   margin-left: 400px;
   float: left;
   border-radius: 20px;
}
.tablasushi2{
   background-color: rgba(0, 0, 0, 0.5);
   height: 450px;
   width: 600px;
   margin-left: 1200px;
  margin-bottom: 700px;
   font-size: larger;
   
}
.tablacaldo{
   background-color: black;
   background-image: url(/images/ramen.webp);
   background-image:center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 450px;
   width: 600px;
   position: relative;
   margin-left: 400px;
   float: left;
   border-radius: 20px;
}
.tablacaldo2{
   background-color: rgba(255, 255, 255, 0.5);
   height: 450px;
   width: 600px;
   margin-left: 1200px;
  margin-bottom: 700px;
  font-size: large;
  color: black;
  
}

.tabla2{
   background-color: rgba(0, 0, 0, 0.5);
   height: 800px;
   width: 600px;
   margin-left: 1200px;
  margin-bottom: 700px;
  
 
  
  
}
.tabla1-2{
   background-image: url(/images/ramen.jpg);

}

section.sushi{
   background-image: url(/images/papelblanco.avif);
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   background-color:rgb(0, 0, 0) ;
   background-color:rgba(255,255 ,255 , 0.8);
   text-align: center;
   color: black;
   font-family: 'Times New Roman', Times, serif;
   font-size: x-large;
   height: 2000px;
}
section.otrosushi{
   background-color:rgba(0, 0, 0, 0.5) ;
                    
   flex-wrap: wrap;                
   justify-content: center;       
   gap: 30px;
   position: relative;
   top: 100px;
   margin: auto;
   height: 1600px;
   width: 1200px;
   background-attachment: fixed;
}

section.modissea{
   background-image: url(/images/hoja.avif);
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   background-color: burlywood;
   height: 1100px;

   color: aliceblue;
   text-align: center;
}
section.caldo{
   background-image: url(/images/hoja.avif);
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   background-color:rgb(0, 0, 0) ;
   background-color:rgba(255,255 ,255 , 0.8);
   text-align: center;
   color: black;
   font-family: 'Times New Roman', Times, serif;
   font-size: x-large;
   color: aliceblue;
   height: 2000px;
}

section.otrocaldo{
   background-color:rgba(255, 255, 255, 0.5) ;
    display: flex;                  
   flex-wrap: wrap;                
   justify-content: center;       
   gap: 30px;
   position: relative;
   top: 100px;
   margin: auto;
   height: 1600px;
   width: 1200px;
   background-attachment: fixed;
   
}
div.menu img{
   height: 200px;
   width: 200px;
   border-radius: 100px;
}


.contact h1
{
  padding-left: 35px;
  text-align: center;
}
.contact{
   height: 1000px;
   background-color: black;
   

}
.formu{
 
   background-color: #3498db;
   height: auto;
   width: 350px;
   margin: 60px auto 0px auto;    
   border-radius: 20px;
   padding: 20px;
}
.formu h1{
   margin-right: 50px;
}


.contact form{
   padding-top: 10px;
   width: 800px;
   height: 500px;
   margin: auto;
   
   
}

.contact  label{
   display: block;
   padding-top: 5px;
}

.contact input{
   margin-top: 10px;
   padding-bottom: 5px ;
}

.contact h1{
   text-align: center ;
}

.contact .btn{
   display: inline-block;
   margin-top: 20px;
   background-color: blue;
   color: aliceblue;
   padding: 7px 10px 7px 10px;
   border: 2px solid blue;
   border-radius: 5px;
   margin-top: 100px;
}

@media (min-width: 768px) and (max-width:1023px){
   section.about2 {
      width: 680px;
   }

   .tablasushi,
   .tablacaldo {
      float: none;
      margin: 20px auto;
      width: 680px;
   }

   .tablasushi2,
   .tablacaldo2 {
      width: 680px;
      margin: 20px auto;
   }

   section.otrosushi,
   section.otrocaldo {
      width: 700px;
   }

   .formu {
      width: 500px;
   }

   .contact form {
      width: 680px;
   }
}