body{
    background-color: rgb(11, 11, 26);
    color: aliceblue;
}
.cursor{
  position:fixed;
  top:50%;
  left:50%;
  width:8px;
  height:8px;
  border-radius: 50%;
  background: #ffffff;
  /* box-shadow: #ffffff 5px 5px 5px 5px; */
  opacity:100%;
  transition: 0.2s ease-out;
  transform: translate(-50%,-50%);
  z-index:-100;
}

#main-index{
    display: grid;
    grid-template-columns: 100vw;
    grid-template-rows: 25vh 5vh 55vh 5vh;
    /* gap: 10px; */
    
}
#section-1{
    display: flex;
    justify-content: space-between;
    padding: 3vh 8vw 0 8vw ;
}


#logo-azha{
  height:20vh;
  padding-top: 15px;
}
#port-folio{
  font-size: 30px;
  font-family: 'Spectral';  
  padding: 30px;
 
}
#port-folio a {
   color: #ffffff;
  text-decoration: none;
  transition: all 600ms;

}
#port-folio a:hover{
  text-shadow: rgb(255, 255, 255) 0px 0 10px;
transition: all 600ms;
}

/* 
#section-2{
} */
#section-3{
    display: flex;
    justify-content: center;
}
#section-4{
    display: flex;
    justify-content: space-evenly;
    
}

#square{
  z-index: 2;
    width: 60vh;
    height: 60vh;
    margin: 5vh;
  }

  
  .en-vedette{
    height: 60vh;
    width: 60vh;  
    overflow: hidden;
	 			-webkit-clip-path: polygon(50% 0, 100% 50%, 100% 50%, 50% 100%, 0 50%, 0 50%);
  			clip-path: polygon(50% 0, 100% 50%, 100% 50%, 50% 100%, 0 50%, 0 50%);
    background-color: yellowgreen;
    transition: all 1.5s;
  }
  .en-vedette:hover{
    transition: all 1.5s;
    scale: 108%;   
   }


  .image-menu{
    height: 60vh;
    position: absolute;
}

/* SLIDER  */
.slideshow {
  width:240vh;
  height:60vh;
  margin: 0 0 0 0;

 position: relative;
  animation-name: slide_animation ;
  animation-timing-function: ease-in-out;
  animation-duration:10s;
  animation-iteration-count:infinite;
  animation-direction:normal;
  animation-play-state: running;
}

.slide {
  position:relative;
  float:left;
  
}

.slideshow img{
  width: 60vh;  

}

@keyframes slide_animation {
  0% { right: 0%;}
  23% {right: 0%;}
  33% {right: 100%;}
  56% {right: 100%;}
  66% {right: 200%;}
  90% {right: 200%;} 
  100% {right: 0%;}
}



/* SLIDER END */



.waves {
    top: 50vh;    
    position:absolute;
    width: 100vw;
    height: 40vh;
    min-height:100px;
    max-height:150px;
    z-index: 1;
    
  }
  #gentle-wave{
    fill-opacity: 50%;
    stroke:white;
    stroke-width:.2px;
    stroke-linecap:round;
  }
  .parallax > use {
    animation: move-forever 25s cubic-bezier(0.55,0.5,0.45,0.5)     infinite;
  }
  .parallax > use:nth-child(1) {
    animation-delay: 0s;
    animation-duration: 4s;
  }
  .parallax > use:nth-child(2) {
    animation-delay: -5s;
    animation-duration: 7s;
  }

  @keyframes move-forever {
    0% {
     transform: translate3d(-90px,0,0);
    }
    100% { 
      transform: translate3d(85px,0,0);
    }
  }







  /*Shrinking for mobile*/
  @media (max-width: 850px) {
    .waves {
      width: 300vw;
      height: 80vh;
      min-height:100px;
      max-height:150px;
      
    }
    cursor{pointer-events: none;}
.en-vedette{
  width: 36vh;
  height: 36vh;
}
.slideshow {
  width:120vh;
  height:30vh;
  margin: 0 0 0 0;
}
.image-menu{
  height: 36vh;
}
.slideshow img{
  width: 36vh;  
}
#section-1{
  display: flex;
  justify-content: space-between;
  padding: 8vh 15vw 5vh 6vw;
}
#logo-azha{
  height: 15vh;
  padding-top: 10px;
}
#port-folio{
  font-size: 25px;
  font-family: 'Spectral';  
  padding: 20px;
 
}
  }

































  @font-face {
    font-family: 'Artifika';
    src: url('font/artifika/Artifika-Medium.woff2') format('woff2'),
        url('font/artifika/Artifika-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('font/spectral/Spectral-SemiBoldItalic.woff2') format('woff2'),
        url('font/spectral/Spectral-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('font/spectral/Spectral-Bold.woff2') format('woff2'),
        url('font/spectral/Spectral-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('font/spectral/Spectral-BoldItalic.woff2') format('woff2'),
        url('font/spectral/Spectral-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('font/spectral/Spectral-Regular.woff2') format('woff2'),
        url('font/spectral/Spectral-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('font/spectral/Spectral-ExtraLight.woff2') format('woff2'),
        url('font/spectral/Spectral-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('font/spectral/Spectral-Medium.woff2') format('woff2'),
        url('font/spectral/Spectral-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('pages/font/spectral/Spectral-ExtraLightItalic.woff2') format('woff2'),
        url('pages/font/spectral/Spectral-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('pages/font/spectral/Spectral-MediumItalic.woff2') format('woff2'),
        url('pages/font/spectral/Spectral-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('pages/font/spectral/Spectral-LightItalic.woff2') format('woff2'),
        url('pages/font/spectral/Spectral-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('pages/font/spectral/Spectral-Light.woff2') format('woff2'),
        url('pages/font/spectral/Spectral-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('pages/font/spectral/Spectral-SemiBold.woff2') format('woff2'),
        url('pages/font/spectral/Spectral-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('pages/font/spectral/Spectral-ExtraBold.woff2') format('woff2'),
        url('pages/font/spectral/Spectral-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Spectral';
    src: url('pages/font/spectral/Spectral-ExtraBoldItalic.woff2') format('woff2'),
        url('pages/font/spectral/Spectral-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
  }