@import url('https://fonts.googleapis.com/css2?family=Ephesis&family=Montserrat:wght@100;300;400;500;700;900&family=Sriracha&display=swap');

*{  
    box-sizing: border-box;
    margin:0;
    padding:0;
    width: auto; 
}

html{
    scroll-behavior: smooth;
}

body{
    background-color: black;
}

/*Nav section*/
.container-nav{
    padding: 0% 5%;
     width: auto;
    border-bottom: 1px solid white;
}

.navbar-collapse{
    width: auto;
    margin: auto;
    height: 80px;
    position: relative;
    z-index: 1000; 
    background-color: black;
    padding: 1% 0%; 
}

.navbar-collapse ul{
    list-style-type: none;
    animation-name: moveIndown;
    animation-duration: 3.5s;
    padding: 0;
}

.navbar-collapse ul li a{
    position: relative;
    text-decoration: none;
    font-size: 2rem;
    font-family: 'Sriracha';
    color:#e4e6eb;
}

.navbar-collapse ul li a:hover{
    text-shadow: 0px 0px 30px white, 1px 1px 0px blueviolet; 
}

.nav-item{
    padding: 0 45px;
}

.index{
    display: none;
}

#photo{
    position: relative;
    width:8.75rem;
    border-radius:200px;
    z-index: 1000; 
    box-shadow: 0px 0px 10px white;
    top:5%;
}


@media screen and (min-width: 1921px) and (max-width: 2560px){
        .menu, .navbar-collapse{
            padding: 01% 0%;  
            height: auto;
            margin: auto;
        }
    
        .navbar-collapse ul {
            position: relative;
            margin: auto;
        }
    
         .navbar-collapse ul li a{
            font-size: 3.5rem;
            text-align: center;
            padding: 0 1rem;
        }

}

@media screen and (min-width: 1401px) and (max-width: 1920px){
         .navbar-collapse{
            padding: 01% 0%;  
            height: auto;
            margin: auto;
        }
    
          .navbar-collapse ul {
            position: relative;
            margin: auto;
        }
    
          .navbar-collapse ul li a{
            font-size: 2rem;
            text-align: center;
            padding: 0 1rem;
        }

}

@media screen and (min-width:1025px) and (max-width: 1400px){
    
        .navbar-collapse{
            padding: 1% 0%;  
            height: auto;
            margin: auto;
            text-align: center;
        }
    
        .navbar-collapse ul {
            position: relative;
            margin: auto;
        }
    
        .navbar-collapse ul li a{
            font-size: 2rem;
            text-align: center;
            padding:0;
        }

}

@media screen and (min-width:821px) and (max-width:1024px){
     .navbar-toggler{
            position: relative;
            margin-left: 95%;
        }
        .navbar-collapse ul{
            animation: none;
            
        }
    
        .navbar-collapse{
            padding: 1% 0%;  
            height: auto;
            text-align: center;
        }

        .navbar-collapse ul li a{
            font-size: 1.6rem;
        }
    
        #photo{
            display: none;
        }
    
        .index{
            display: block;
        }

}
  
@media screen and (min-width:300px) and (max-width:820px){
        .navbar-toggler{
            position: relative;
            margin-left: 85%;
        }
        .navbar-collapse ul{
            animation: none;
        }
    
        .navbar-collapse{
            padding: 1% 0%;  
            height: auto;
            right: 20%;
        }

        .navbar-collapse ul li a{
            font-size: 1.5rem;
            line-height: 1.5;
        }
    
        .navbar-nav{
            width: 15rem;
            height: auto;
            padding: 0;
        }    
    
        #photo{
            display: none;
        }
    
        .index{
            display: block;
        }
}


/*Section Portfolio*/

.intro-porfolio{
    width: auto;
    margin: auto;
    height: 200px;
    position: relative;
    display: flex;
    justify-content: center;
}

.text-portfolio{
    width:1340px;
    color: #e4e6eb;
    font-size: 1.5rem;
    font-family: 'Sriracha';
    margin: auto;
    margin-top: 5%;
    text-align: center;
}

.choix-portfolio{
    width: auto;
    height:1000px;
    margin: auto;
    display: flex;
    margin-top: 5%;
    background-image: url(../assets/pngwingfleurs.png);
    background-repeat: no-repeat;
    background-position: center;
}


/*Section page integration multimedia*/

.section-integration{
    width: auto;
    margin: auto;
    margin-top: 180px;
    margin-left: 10%;
    text-align: center;
    animation-name: moveInleft;
    animation-duration: 5s;
}

.section-integration a{
    font-size: 70px;
    font-family: 'Ephesis';
    text-decoration: none;
    font-weight: bolder;
    color:#e4e6eb;
}

.section-integration a:hover{
    color: rgba(57, 0, 96, 1);
}


/*Section page gateaux*/

.section-gateaux{
    width: auto;
    margin: auto;
    margin-top: 540px;
    margin-right: 10%;
    text-align: center;
    animation-name: moveInRight;
    animation-duration: 5s;
}

.section-gateaux a{
    font-size: 70px;
    font-family: 'Ephesis';
    text-decoration: none;
    font-weight: bolder;
    color:#e4e6eb;
}

.section-gateaux a:hover{
    color: rgba(57, 0, 96, 1);
}

@keyframes moveInleft {
    0% {
        opacity: 0;
        transform: translateX(-300px);
    }

    80% {
        transform: translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(300px);
    }

    80% {
        transform: translateX(-10px);
    }
    
    100% {
        opacity: 1;
        transform: translate(0);
    }

}

@media screen and (min-width: 1921px) and (max-width: 2560px){
        .text-portfolio{
        font-size: 2.3rem;
        padding: 10px 30px;
    }

    .choix-portfolio{
        height: 900px;
    }
    
    .section-integration{
        width: auto;
        margin: auto;
        margin-top: 8.5rem;
        margin-right: 5%;
        margin-left: 23%;
    }

    .section-integration a{
        font-size: 5rem;
        font-weight: 100;   
        line-height: 1.2;
    }
    
    .section-gateaux{
        width: auto;
        margin: auto;
        margin-top: 32rem;
        margin-left: 5%;
        margin-right: 2%;
    }

    .section-gateaux a{
        font-size: 5rem;
        font-weight: 100;
        line-height: 1.2;
    }
}

@media screen and (min-width: 1401px) and (max-width: 1920px){
  .text-portfolio{
        font-size: 1.7rem;
        
    }

    .choix-portfolio{
        height: 950px;
    }
    
    .section-integration{
        width: auto;
        margin: auto;
        margin-top: 10rem;
        margin-right: 5%;
        margin-left: 10%;
    }

    .section-integration a{
        font-size: 4.5rem;
        font-weight: 100;   
        line-height: 1.2;
    }
    
    .section-gateaux{
        width: auto;
        margin: auto;
        margin-top: 36rem;
        margin-left: 5%;
        margin-right: 2%;
    }

    .section-gateaux a{
        font-size: 4.5rem;
        font-weight: 100;
        line-height: 1.2;
    }
}

@media screen and (min-width:1025px) and (max-width: 1400px){
    .text-portfolio{
        width:auto;
        font-size: 1.6rem;
        padding: 10px 30px;
    }

    .choix-portfolio{
        height: 900px;
    }
    
    .section-integration{
        width: auto;
        margin: auto;
        margin-top: 8.5rem;
        margin-right: 5%;
        margin-left: 2%;
    }

    .section-integration a{
        font-size: 4.5rem;
        font-weight: 100;   
        line-height: 1.2;
    }
    
    .section-gateaux{
        width: auto;
        margin: auto;
        margin-top: 32rem;
        margin-left: 5%;
        margin-right: 2%;
    }

    .section-gateaux a{
        font-size: 4.5rem;
        font-weight: 100;
        line-height: 1.2;
    }
   

}

@media screen and (min-width:821px) and (max-width:1024px){
    .text-portfolio{
        width:auto;
        font-size: 1.6rem;
        padding: 10px 30px;
    }

    .choix-portfolio{
        height: 800px;
    }
    
    .section-integration{
        width: auto;
        margin: auto;
        margin-top: 4.5rem;
        padding-right: 30rem;
    }

    .section-integration a{
        font-size: 4rem;
        font-weight: 100;   
        line-height: 1.2;
    }
    
    .section-gateaux{
        width: auto;
        margin: auto;
        margin-top: 10rem;
        padding-left: 30rem;
    }

    .section-gateaux a{
        font-size: 4rem;
        font-weight: 100;
        line-height: 1.2;
    }
    
     @keyframes moveInleft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    80% {
        transform: translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    80% {
        transform: translateX(-10px);
    }
    
    100% {
        opacity: 1;
        transform: translate(0);
    }

}

}
  
@media screen and (min-width:300px) and (max-width:820px){
        .text-portfolio{
        width:auto;
        font-size: 1.3rem;
        padding: 10px 20px;
    }

    .choix-portfolio{
        height: 800px;
        width: 100%;
        text-align: center;
    }
    
    .section-integration{
        margin-top: 7rem;
        margin-left: 0;
    }

    .section-integration a{
        font-size: 3rem;
        font-weight: 100; 
        line-height: 1.3;
    }
    
    .section-gateaux{
        margin-top: 0;
    }

    .section-gateaux a{
        font-size: 3rem;
        font-weight: 100;
        line-height: 1.3;
    }
    
    @keyframes moveInleft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    80% {
        transform: translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    80% {
        transform: translateX(-10px);
    }
    
    100% {
        opacity: 1;
        transform: translate(0);
    }

}
}



/* Section Intégration Multimédia */

.sections1{
    width: auto;
    height: auto;
    position: relative;
    display: block;
}

.sections2{
    width: auto;
    height: auto;
    position: relative;
    display: block;
}

.sections3{
    width: auto;
    height: auto;
    position: relative;
    display: block;
}

.sessiontitre{
    height: 9.375rem;
    font-size: 9.6875rem;
    font-family: 'Ephesis';
    color: #e4e6eb;
    text-shadow: 1px 1px 20px blueviolet;
    text-align: center;
    padding:0px 0px 50px 0px;
    margin-top: 50px;
}

.pagecontain{
    width: 87.5rem;
    height: auto;
    position: relative;
    margin: auto;
    margin-top: 20px;
}

.pagecontainer{
     padding: 60px 0px 60px 0px;
}

.pages{
    width: 87.5rem;
    height: 53.125rem;
    position: relative;
    margin: auto;
    box-shadow: 1px 1px 25px grey, 0px 0px 15px white;
}

#video{
    width: 80rem;
    height: 50rem;
    display: flex;
    justify-content: center;
}

.textvideo{
    color: #e4e6eb;
    font-size: 1.75rem;
    font-family: 'sriracha';
    line-height: 1.5;
    text-align: center;
    margin-top: 20px;
   
}

.textsite{
    color: #e4e6eb;
    font-size: 2.1875rem;
    font-family: 'sriracha';
    text-align: center;
    padding-top: 20px;
}


@media screen and (min-width:1025px) and (max-width: 1400px){
.sessiontitre{
        height: 9.375rem;
        font-size: 9rem;
    }

    .pagecontain{
        width: auto;
        height: auto;
    }

    .pages{
        width: 100%;
        height: 100%;
    }

    #video{
        width: 100%;
        height: 100%;
    }

    .textvideo{
        font-size: 1.9rem;
    }

    .textsite{
        font-size: 2.2rem;
    }
}

@media screen and (min-width:821px) and (max-width:1024px){
.sessiontitre{
        height: 9.375rem;
        font-size: 7rem;
    }

    .pagecontain{
        width: auto;
        height: auto;
    }

    .pages{
        width: 100%;
        height: 100%;
    }

    #video{
        width: 100%;
        height: 100%;
    }

    .textvideo{
        font-size: 1.3rem;
    }

    .textsite{
        font-size: 1.5rem;
    }

}
  
@media screen and (min-width:300px) and (max-width:820px){
    .sessiontitre{
        height: 8.375rem;
        font-size: 6rem;
    }

    .pagecontain{
        width: auto;
        height: auto;
    }

    .pages{
        width: 100%;
        height: 100%;
    }

    #video{
        width: 100%;
        height: 100%;
    }

    .textvideo{
        font-size: 1.3rem;
    }

    .textsite{
        font-size: 1.5rem;
    }
}

 

/* Section Gâteaux Personnalisés */

.nav-cake{
    margin: 0;
}

.nav-cake #photo{
   width: 14rem;
}

.nav-cake ul li a{
    font-size: 3rem;
    margin: 0;
    text-align: center;
}

.nav-cake .nav-item{
    padding-top: 6rem;
}


h1{
    font-family: 'Ephesis';
    font-size:13rem;
    text-align:center;
    color:#e4e6eb;
    margin: auto;
    padding: 40px 20px;
    text-shadow: 1px 1px 20px blueviolet;
}

.intro-gateau{
    width: auto;
    height: 500px;
    font-family: 'Sriracha';
    font-size: 2.4rem;
    text-align:center;
    color:#e4e6eb;
    margin: auto;
    padding: 20px 175px;
}

#voici{
    font-size: 4rem;;
}


@media screen and (min-width: 1921px) and (max-width: 2560px){

}

@media screen and (min-width: 1401px) and (max-width: 1920px){

}

@media screen and (min-width:1025px) and (max-width: 1400px){
    h1{
            font-size:13rem;
        }

        .intro-gateau{
            width: auto;
            height: auto;
            font-size: 2.2rem;
            text-align:center;
            color:#e4e6eb;
            margin: auto;
            padding: 20px 55px;
        }

        #voici{
            font-size: 3.5rem;;
        }


}

@media screen and (min-width:821px) and (max-width:1024px){
    h1{
        font-size:11rem;
    }

    .intro-gateau{
        width: auto;
        height: auto;
        font-size: 2.1rem;
        text-align:center;
        color:#e4e6eb;
        margin: auto;
        padding: 20px 5px;
    }

    #voici{
        font-size: 3.5rem;;
    }

}
  
@media screen and (min-width:300px) and (max-width:820px){
    .nav-cake ul li a{
        font-size: 2.5rem;    
}
    .nav-cake .nav-item{
        padding: 0;
}
    
    h1{
        font-size:7rem;
    }

    .intro-gateau{
        width: auto;
        height: auto;
        font-size: 1.8rem;
        text-align:center;
        color:#e4e6eb;
        margin: auto;
        padding: 20px 10px;
    }

    #voici{
        font-size: 3rem;;
    }
}



#gallery{
    -webkit-column-count:4;
    -moz-column-count:4;
    column-count:4;
  
    -webkit-column-gap:20px;
    -moz-column-gap:20px;
    column-gap:20px;
}

@media (max-width:1200px){
#gallery{
    -webkit-column-count:3;
    -moz-column-count:3;
    column-count:3;
    
    -webkit-column-gap:20px;
    -moz-column-gap:20px;
    column-gap:20px;
    }
}
@media (max-width:800px){
  #gallery{
      -webkit-column-count:2;
      -moz-column-count:2;
      column-count:2;
    
      -webkit-column-gap:20px;
      -moz-column-gap:20px;
      column-gap:20px;
    }   
}
@media (max-width:600px){
  #gallery{
      -webkit-column-count:1;
      -moz-column-count:1;
      column-count:1;
    }  
}
#gallery img{
    width:100%;
    height:auto;
    margin: 4% auto;
    box-shadow:-3px 5px 15px #000;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.modal-img{
    width:100%;
    height:auto;
}
.modal-body{
    padding:0px;
}


/* Scroll back button */

#topbtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    font-family: 'sriracha';
    border: none;
    outline: none;
    background-color: blueviolet;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50px;
}

#topbtn:hover {
    background-color: #555;
}


/**/

footer{
    width: auto;
    height: 100px;
    margin: auto;
    position: relative;
    border-top: 1px solid white;
}

#footercontain{
    position: relative;
    width: auto;
    margin: auto;
    align-content: center;
    color: #e4e6eb;
    font-family: 'Sriracha';
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
    
}

#copyright{
    margin: auto; 
    margin-top: 2%;
}

#creepar{
    margin: auto;
    display: flex;
    justify-content: flex-end;
    margin-top: 2%;
}

@media screen and (min-width: 1921px) and (max-width: 2560px){
     #footercontain{
        font-size: 2.1em;
    }
}

@media only screen and  (max-width:1200px){}

@media only screen and  (max-width:800px){}
  
@media only screen and (max-width:600px){
    footer{
        width: 100%;
        height: auto;
        margin: auto;
        float:bottom;
    }
    
    #footercontain{
        font-size: 1rem;
    }
}