header{
   
    background-color: rgb(206, 206, 206);
    background-size: 30%;
    height: auto;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
}
@media(max-width:480px) {
    nav
    {
        display: none;
    }
}
@media(min-width:480px) {
    nav
    {
        display:flex;
        margin-left: 3vw;
        flex-grow: 1;
 
    }
}
body
{
    font-family: 'Yu Gothic';
    width: 100%;
    margin: 0px;
    

}
.Title{
    margin-left: auto;
    margin-right: auto;
}
nav > div
{
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 2vw;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgb(7, 17, 71);
    
    
}

nav>div:hover
{
    background-color:khaki;

}
a
{
    font-size: larger;
    color:white;
    font-weight: bold;
}

.photo{
    width: 7vw;
    border: 5px solid rgb(7, 17, 71);
    border-radius: 30%;
    margin: 1vw;
}
.logo{
    max-width: 10vw;
    margin-left: 2vw;
}
main
{
    background-image: url("../img/wallpaperZ.jpg");
    background-attachment: fixed;
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: stretch;
    height:70vmin; 
    flex-grow: 1 2;
    font-family: 'Yu Gothic';
    height: auto;
    
    overflow-x: hidden;

}

.buttonPlus{
    
    padding-left:2px;
    padding-right:2px;
}

input[type="button"]{
    font-size: 1vw;
    width: 20%;
    margin: 20px;
    padding: 20px;
    border-radius: 10px;
    background: none;
    border: 2px solid rgb(12, 11, 11);
    border-radius: 30px;
    
}

input[type="button"]:hover{
    border-color: white;
    color: white;
    background: linear-gradient(-45deg, #025a06, #dcc10d, #099dd3, #8c0c90);
    background-size: 400% 400%;
    animation: gradient 1s ease infinite;
}
input[type="button"]:focus{
    color: white;
    background: linear-gradient(-45deg, #12025a, #630a03, #03014e, #5f5e03);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}
.mytitle{
    align-items: center;
    justify-content: center;
    font-size: 2vw;
    background-color: rgb(238, 234, 234);
    width: 100%;
    margin: auto;
}
article
{
    background-color: rgba(255, 255, 255, 0.7);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
article > div {
    margin-bottom: 3vw;
}

.object {
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    overflow-x: hidden;
  }

.objectEnd{
    margin-bottom: 0vw;
}

.object:hover{
    border-top: 3px solid rgb(255, 255, 255);
    border-bottom: 3px solid rgb(255, 255, 255);

}




.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
  }
  
  .gallery > div {
    flex-basis: 20%;
    margin: 5px;
  }
  
  .gallery > div > img {
    width: 100%;
    height: auto;
    object-fit: cover;
  
    max-height: calc(100vw * 9 / 16); /* Hauteur maximale pour un ratio d'aspect de 16:9 */
  }

  
.gallery > img {
    width: 20%;
    max-width: 20%;
    margin: 5px;
    height: auto;
    object-fit: cover;
} 
aside
{
    background-color: rgba(7, 17, 71, 0.9);
    color: white;
    width: 100%;
    flex-shrink: 3;
    height: auto;
}
aside > div {
    align-items: center;
    justify-content: center;
    
    margin-left: 10px;
    margin-right: 10px;
}
.lieu{
    max-width: 20vw;
    margin-right: auto;
    margin-left: auto;
}
.loaderBack{
    position: fixed;
    background-color:gainsboro;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.loader {
    /* Finally, a use for "groove"! */
    left: 50%;
    border: 24px groove rebeccapurple;
    display: table-cell;
    border-radius: 999px;
    animation: spin 5s linear infinite;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
  }

img{
    max-width: 20vw;
}

footer
{
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: rgb(206, 206, 206);
    background-size: 30%;


}

p{
    text-align: center;
    width: 90%;
}

.myNav
{
    background-color: white;
    border: 1px solid black;
}
.myNav > a
{
    color: black;
}
.center{
    margin: auto;
    margin-top: 2%;
}
.row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: rgb(49, 49, 49);
    height: 100%;
    width: 100%;
    color: white;
}
.row > div > div {
    margin-top: 1vw;
    margin-bottom: 1vw;
    margin-right: 2vw;
    margin-left: 2vw;

}
.home{
    display: flex;
    flex-direction: row;

    
    justify-content: center;
    align-items: center;


}
.home > div {
    
    padding: 20%;
    margin: 20%;
  
    color: white;
    border: 5px solid white;
    border-radius: 30px;
}
#contact
{
    background-color: black;
}

.myanim {
    width: 5vw;
    position: relative;
    animation-name: example;
    animation-duration: 10s;
   animation-iteration-count: infinite;
  }
  
  @keyframes example {
    0%   { left:0px; top:0px;}
   
    50%  { left:70%; top:0px;}
  
    100% { left:0px; top:0px;}
  }

#logo{
    max-width: 2vw;
}
#mytitle{
    font-family: mediev;
}

#bullet{
    border: 4px solid white;
    padding: 10px;
    border-radius: 30px;
}
.download:hover{
    background-color: rgb(129, 8, 4) ;
    border-radius: 30px;
}

.available{
    display: flex;
}
.disabled{
   display: none;
}

#effect {
    background: linear-gradient(-45deg, #12025a, #630a03, #03014e, #5f5e03);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    color: white;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

a:hover, input{
    cursor: pointer;
}