body{
     margin: auto;
     height: auto;
     width: 100%;
}

@font-face {
      font-family:"mont" ;
      src: url(../font/Montserrat-Medium.ttf);
}

@font-face {
      font-family:"red" ;
      src: url(../font/Redressed-Regular.ttf);
}

html{scroll-behavior: smooth;
}

header{
     background-image: url(../images/bgsmoka.png);
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     width: 100%;
}

#logo{
}

#centre{
        display: flex;
        align-items: center;
}

#circle { 
   width: 43vh;
   height: 43vh;
   background :whitesmoke; 
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   border-color: #252525;
   border-style: solid;
   box-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ffff0073, 0 -10px 20px #ff800078, 0 -18px 40px #0400007D;
  
}

nav{
    position: fixed;
    width: 100%;
    background-color: #252525;
    margin-top: 0;
    z-index: 1;
    height: 60px;
    border-bottom: whitesmoke;
    border-style: solid;
}

.navlist{
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  gap: 2%;
  width: 100%;
}

nav a{
      color: white;
      font-size: 11px;
      text-decoration: none;
      font-family: "mont";
}

nav a:hover{
             color: #92ff33;;
}

nav li:hover{
       transform: translateY(-5px);
  }

li{
   list-style: none;
}

#title{
       display: flex;
       flex-direction: column;
       align-items: end;
       align-self: flex-end;
       margin-block: 19%;
}

#titre{
       display: flex;
       justify-content: center;
}

h1{
   font-size: 180px;
   color: #252525;
   font-family: "red";
   margin: 0;
  text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ffff0073, 0 -10px 20px #ff800078, 0 -18px 40px #0400007D;
}

#title p{
   color: #252525;
   font-family: "red";
   font-size: 25px;
   margin: 0;
   text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ffff0073, 0 -10px 20px #ff800078, 0 -18px 40px #0400007D;
}

h2{
   font-size: 60px;
   color: #991515;
   font-family: "red";
}

#bg{
    background-color: whitesmoke;
    height: 130vh;
    padding-top: 5%;
}

#ABOUT{
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
}

#ABOUT p{
         font-size: 20px;
         color: #991515;
         font-family: "mont";
         width: 90%;
         line-height: 265%;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 5%;
}

#cards {
    height: 400px;
    border-radius: 4px;
    width: 90%;
    display: flex;
    gap: 5px;
    padding: 6px;
}

#cards .card-items {
    height: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex:1;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    text-decoration: none;
    color: white;
    filter: grayscale(100%);
    transition: all .5s;
    border-color: #d00000;
    border-style: solid;
}


#cards .card-items:hover{filter:none;
                        flex:3;}


#cards .card-items h1{color:white;
                        transform: rotate(-90deg);
                        transition: all .5s;
                    }

#cards .card-items:hover h1{transform:rotate(0);}

#cards .card-items:nth-child(1) {
    background-image: url(../images/3.png);
}

#cards .card-items:nth-child(2) {
    background-image: url(../images/4.png);
}

#cards .card-items:nth-child(3) {
    background-image: url(../images/5.png)
}

#cards .card-items:nth-child(4) {
    background-image: url(../images/6.png);
}

#cards .card-items:nth-child(5) {
    background-image: url(../images/1\ 1.png);
}

#cards .card-items:nth-child(6) {
    background-image: url(../images/2.png);
}

#MENU{
      height: 120vh;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      background-size: cover;
      background-image: url(../images/bgbowl.png);
      gap: 9%;
      
}

#take{
      display: flex;
      justify-content: center;
      flex-direction: row; 
      justify-content: space-between;
}

#take img{
            width: 30%;
            cursor: pointer;
}

#take img:hover {
  transform: translateY(-20px);
}

footer{
       background-color: #252525;
       width: 100%;
}

#social{
        display: flex;
        align-items: center;
        gap: 3%;
        padding-block: 6%;
}

#social img{
            transition: transform 250ms;
            cursor: pointer;
            width: 5%;
}

#social img:hover {
           transform: translateY(-10px);
}

span{
     font-size: smaller;
}

#fesse{
}

a{
    color: white;
}
#CONTACT{
        display: flex;
        flex-direction: column;
}

#nom{
     font-size: 65px;
     font-family:"red";
     color: white;
     text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ffff0073, 0 -10px 20px #ff800078, 0 -18px 40px #0400007D;

}

#adress{
        font-size: 15px;
        font-family: "mont";
        line-height: 233%;
        color:white;
}

#mapro{
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: space-evenly;
       width: 100%;
       justify-content: center;
       gap: 6%;
       padding-block: 5%;
}

#map{
     border-style: solid;
     border-color: white;
     display: flex;
}

#copy{
      font-size: 10px;
      font-family: "mont";
      color: white;
      margin-block: auto;
      margin-left: 1%;
}
 

/* RESPONSIVE */

@media screen and (max-width: 1400px) {

body{
     margin: auto;
     height: auto;
     width: 100%;
}

@font-face {
      font-family:"mont" ;
      src: url(../font/Montserrat-Medium.ttf);
}

@font-face {
      font-family:"red" ;
      src: url(../font/Redressed-Regular.ttf);
}

html{scroll-behavior: smooth;
}

header{
     background-image: url(../images/bgsmoka.png);
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     width: 100%;
}

#logo{
}

#centre{
align-items: center;
}

#circle { 
   width: 32vh;
   height:  32vh;
   background :whitesmoke; 
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   border-color: #252525;
   border-style: solid;
   box-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ffff0073, 0 -10px 20px #ff800078, 0 -18px 40px #0400007D;
  
}

nav{
    position: fixed;
    width: 100%;
    height: 17vh;
    background-color: #252525;
    margin-top: 0;
    z-index: 1;
    border-bottom: whitesmoke;
    border-style: solid;
}

.navlist{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  line-height: 120%;
  width: 80%;
    
}

nav a{
      color: white;
      font-size: 9px;
      text-decoration: none;
      font-family: "mont";
}

nav a:hover{
             color: #92ff33;;
}

nav li:hover{
       transform: translateY(-5px);
  }

li{
   list-style: none;
}

#title{
       display: flex;
       align-self: center;
       margin-block: 5%;
}


#titre{
       display: flex;
       justify-content: center;
       flex-direction: column;
       padding-top: 34%;
       align-items: center;
}

h1{
   font-size: 90px;
   color: #252525;
   font-family: "red";
   margin: 0;
  text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ffff0073, 0 -10px 20px #ff800078, 0 -18px 40px #0400007D;
}

#title p{
   color: #252525;
   font-family: "red";
   font-size: 10px;
   margin: 0;
   text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ffff0073, 0 -10px 20px #ff800078, 0 -18px 40px #0400007D;
}

h2{
   font-size: 25px;
   color: #991515;
   font-family: "red";
}

#bg{
    background-color: whitesmoke;
    height: 120vh;
}

#ABOUT{
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      padding-bottom: 10%;

}

#ABOUT p{
         font-size: 12px;
         color: #991515;
         font-family: "mont";
         width: 90%;
         line-height: 370%;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#cards {
    height: 250px;
    border-radius: 4px;
    width: 90%;
    display: flex;
    gap: 5px;
    padding: 6px;
}

#cards .card-items {
    height: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex:1;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    text-decoration: none;
    color: white;
    filter: grayscale(100%);
    transition: all .5s;
    border-color: #991515;
    border-style: solid;
}


#cards .card-items:hover{filter:none;
                        flex:3;}


#cards .card-items h1{color:white;
                        transform: rotate(-90deg);
                        transition: all .5s;
                    }

#cards .card-items:hover h1{transform:rotate(0);}

#cards .card-items:nth-child(1) {
    background-image: url(../images/1.jpg);
}

#cards .card-items:nth-child(2) {
    background-image: url(../images/2.jpg);
}

#cards .card-items:nth-child(3) {
    background-image: url(../images/3.jpg)
}

#cards .card-items:nth-child(4) {
    background-image: url(../images/4.jpg);
}

#cards .card-items:nth-child(5) {
    background-image: url(../images/5.jpg);
}

#cards .card-items:nth-child(6) {
    background-image: url(../images/6.jpg);
}

#MENU{
      height: 45vh;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      background-size: cover;
      background-image: url(../images/bgbowl.png);
}

#take{
      display: flex;
      justify-content: center;
      flex-direction: row; 
      justify-content: space-evenly;
}

#take img{
            width: 30%;
            cursor: pointer;
}

#take img:hover {
  transform: translateY(-20px);
}

footer{
       background-color: #252525;
       width: 100%;
       display: flex;
       justify-content: center;
       flex-direction: column;
}

#social{
        display: flex;
        align-items: center;
        gap: 6%;
        padding-block: 6%;
}

#social img{
            transition: transform 250ms;
            cursor: pointer;
            width: 5%;
}

#social img:hover {
           transform: translateY(-10px);
}

span{
     font-size: 9px;
}

#fesse{
}

a{
    color: white;
}
#CONTACT{
        display: flex;
        flex-direction: column;
}

#nom{
     font-size: 45px;
     font-family:"red";
     color: white;
     text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ffff0073, 0 -10px 20px #ff800078, 0 -18px 40px #0400007D;

}

#adress{
        font-size: 10px;
        font-family: "mont";
        line-height: 233%;
        color:white;
        padding-block: 15%;
}

#mapro{
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 6%;
}

#map{
     border-color: white;
     border-style: solid;
     display: flex;
     width: 80%;
}

#copy{
      font-size: 10px;
      font-family: "mont";
      color: white;
      margin-block: auto;
      margin-left: 1%;
}


}