@font-face {
    font-family: 'point_softextra_bold';
    src: url('../fonts/pointsoft-webfont.woff2') format('woff2'),
         url('../fonts/pointsoft-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: 'point_softextra_bold';
    height: 100%;
}

footer {
    margin-top:10px;
    padding-bottom:75px;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
}

#menu ul li a img {
    width: 25px;
}

.labelNav{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#menu ul li a {
    text-decoration: none;
    color: black;
}

#logo img {
    display: none;
}

nav {
    position: fixed;
    width: 100%;
    bottom:0;
    background-color: white;
    z-index:500;
    border-top: solid 15px white;
}

#active {
    color:#09625A;
}

/*INDEX*/
/*INDEX*/
/*INDEX*/
#splashscreenhome {
    position:fixed;
    width: 100%;
    height: 100%;
    background-color: #e9f4ea;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    -webkit-animation: splashcreen 1s ease-out forwards;
            animation: splashcreen 1s ease-out forwards;
}

#splashscreenhome img {
    -webkit-animation: splashscreenimg 0.7s;
            animation: splashscreenimg 0.7s;
}


#section1 {
    background-image: url(../images/patternbg.jpg);
    width: 100%;
    height: 500px;
}

#intro {
    text-align: center;
    margin-bottom:40px;
}

#camp {
    width: 100%;
    height: 320px;
    overflow: hidden;
}

#campimg {
    width: 400px;
}

#treeimg {
    position: relative;
    top: -280px;
    right:-320px;
}

#section2 {
    background: linear-gradient(#f1faff, white);
    width: 100%;
    height: auto;
}
#wave1 {
    /*border: solid 1px red;*/
    position: relative;
    top:-20px;
    width: 100%;
}

#hcards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px;
}

.hcard {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #afdaee;
    border-radius: 20px;
    width: 260px;
    height: 150px;
}

.hcard img {
    width: 180px;
    position: relative;
    top:-20px;
    -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));
            filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));
}

.hcard a {
    position:relative;
    bottom:0px;
    text-decoration: none;
    color: black;
}

.game {
    width: 200px;
    background-color: #eae1b2;
    border-radius: 20px;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game .gameimg {
    width: 100%;
    background-color: #afdaee;
    border-radius: 20px 20px 0 0;
    height: 150px;
}

.game .gameimg img {
    width: 200px;
    height: 135px;
    position: relative;
    /*left:-40px;*/
    -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));
            filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));
}

.game p {
    font-size: 12pt;
    padding:10px 10px 0 10px;
}

#gamelist {
    display: flex;
    /*flex-direction: column;*/
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap:30px;
}

#gamesdiv {
    margin-top:40px;
}

#gamesdiv h2 {
    text-align: center;
}

#coucou {
    display: none;
}

#acnh.gameimg {
    background-image: url(../images/nhbg.jpg);
    background-size: cover;
}

#acnl.gameimg {
    background-image: url(../images/nlbg.jpg);
    background-size: cover;
}

#acww.gameimg {
    background-image: url(../images/wwbg.jpg);
    background-size: cover;
}

#acpc.gameimg {
    background-image: url(../images/pcbg.jpg);
    background-size: cover;
}

#aclgttc.gameimg {
    background-image: url(../images/lgttcbg.jpg);
    background-size: cover;
}

#acgc.gameimg {
    background-image: url(../images/gcbg.jpg);
    background-size: cover;
}

/*LISTING*/
/*LISTING*/
/*LISTING*/

section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    
}
.carte {
    background-color: white;
    border-radius: 10px;
    border: solid 10px white;
    width: 140px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.itemImg {
    width: 130px;
    height: 180px;
    border-radius: 5px;
    background-color: chocolate;
    display: flex;
    align-items: center;
    justify-content: center;
}

.itemImg img{
    width: 110px;
    z-index:100;
} 

.reflet {
    width: 130px;
    height: 180px;
    position: absolute;
    z-index:3;
    background-image: linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
    background-blend-mode: overlay;
    background-position: 50% 50%;
    background-size: 160%;
    -webkit-filter: brightness(1) contrast(1);
            filter: brightness(1) contrast(1);
            transition: all .33s ease;
    mix-blend-mode: color-dodge;
    opacity: .75;
}

.datacarte {
    position: fixed;
    bottom:0;
    width: 100%;
    height: 70%;
    background-color: #e0d7b0;
    color: #855b24;
    padding:10px;
    z-index: 900;
    border-radius: 20px 20px 0 0;
    display: none;
}

.dataheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close {
    width: 50px;
}

.iteminfos {
    display: flex;
    gap: 10px;
    height: 35px;
    justify-content: space-between;
}

.iteminfos h3 {
    font-size: 12pt;
}

.dimensions img {
    width: 35px;
}

.customisable img {
    width:45px;
}
.theme, .customisable, .dimensions {
    display: flex;
    flex-direction: row;
    gap:5px;
    align-items: center;
}

.theme img {
    background-color: #855b24;
    padding:2px;
    border-radius: 5px;
    width: 35px;
}

.labelprix, .prix, .labelcondition {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.labelprix, .labelcondition {
    justify-content: space-between;
}
.prix img {
    width: 35px;
}

.itemrecipe {
    background-color: #ece3c0;
    border-radius: 10px;
}

.materiel1, .materiel2, .materiel3 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding:10px;
}

.materiel2 {
    background-color: #e0d7b0;

}

.labelmateriel {
    display: flex;
    flex-direction: row;
    gap:5px;
    align-items: center;
}

.labelmateriel img {
    width: 35px;
}

@-webkit-keyframes datacarteopen {
    0% {
        transform: translateY(100%); ;
    }
    100%{
        transform: translateY(0%);
    }
}

@keyframes datacarteopen {
    0% {
        transform: translateY(100%); ;
    }
    100%{
        transform: translateY(0%);
    }
}

@-webkit-keyframes datacarteclose {
    0% {
        transform: translateY(0%);
    }
    100%{
        transform: translateY(100%);
    }
}

@keyframes datacarteclose {
    0% {
        transform: translateY(0%);
    }
    100%{
        transform: translateY(100%);
    }
}

#splashscreenlisting {
    background-color: #e39367;
    position:fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-animation: splashcreen 1s ease-out forwards;
            animation: splashcreen 1s ease-out forwards;
}

#splashscreenlisting img {
    -webkit-animation: splashscreenimg 0.7s;
            animation: splashscreenimg 0.7s;
}

@-webkit-keyframes splashscreenimg {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    50% {
        transform: scale(1.1) rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes splashscreenimg {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    50% {
        transform: scale(1.1) rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@-webkit-keyframes splashcreen {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    
    }
}

@keyframes splashcreen {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    
    }
}

/*RECHERCHE*/
/*RECHERCHE*/
/*RECHERCHE*/
#mainrecherche {
    padding-top:50%;
}

#mainresultatrecherche h1, #mainresultatrecherche h2 {
    text-align: center;
    color:#5B3E15;
    margin:0;
}

#recherchesplash {
    background-color: #b3bfff;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:999;
    -webkit-animation: splashcreen 1s ease-out forwards;
            animation: splashcreen 1s ease-out forwards;
}

#recherchesplash img {
    -webkit-animation: splashscreenimg 0.7s;
            animation: splashscreenimg 0.7s;
}

#titrerecherche {
    display: flex;
    justify-content: center;
    align-items: center;
}

#titrerecherche h1 {
    font-size:18pt;
    color:#5B3E15;
}

#titrerecherche img {
    width: 50px;
}

form, #recherchelabel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:#5B3E15;
}

form{
    padding-top:30px;
}

input[type="text"] {
    width: 350px;
    height: 75px;
    border-radius: 55px;
    border: solid 3px #f0e8c9;
    padding: 5px;
    font-size:20pt;
    font-family: 'point_softextra_bold';
    padding:15px;
    color: #73674c;
}

input[type="submit"] {
    width: 150px;
    height: 50px;
    margin-top: 30px;
    border-radius: 25px;
    border: solid 2px #6cbdb0;
    background-color: #1F4C44;
    color: white;
    font-family: 'point_softextra_bold';
    font-size: 12pt;
    cursor: pointer;
}

/*BACK-OFFICE*/
/*BACK-OFFICE*/
/*BACK-OFFICE*/
#mainadmin {
    background-color: #c8daf8;
    padding-top:160px;
}
#boutonsbackoffice {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom:20px;
}

.boutonajouter {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow:hidden;
    justify-content: space-around;
    min-width:150px;
    max-width:150px;
    min-height: 150px;
    max-height: 150px;
    background-color: #fff9e6;
    border-radius:20px;
}

.boutonajouter img {
    width: 90px;
    height: 90px;
}

.boutonajouter a {
    color:#615143;
    text-decoration: none;
    overflow: hidden;
    line-height: 20px;
}

.itemgestion {
    background-color: #fff9e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width:300px;
    border-radius:20px;
    margin:10px auto;
}

.itemgestiondetails {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;

justify-content: center;
}

.prixlabelgestion {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ingredientgestion {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:10px;
}

.ingredientsgestion {
    display: flex;
    flex-direction:row;
    align-items: center;
    gap:20px;
    justify-content: center;
}

.supmodifitemgestion{
    display:flex;
    flex-direction: row;
    gap:20px;
    justify-content: center;
    align-items: center;
}

.supmodifitemgestion a {
    color: #615143;
}

.labelmodif {
    display: flex;
    align-items: center;
    gap:5px;
    padding:3px;
    margin:5px 0;
   
}

.labelmodif a {
    color: white;
}

#labelmodifier {
    background-color:#428bca; border-radius:5px;
}

#labelsupprimer {
    background-color:#d9534f; border-radius:5px;
}

.recettegestion {
    background-color: #fff9e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width:300px;
    border-radius:20px;
    margin:10px auto;
    gap:20px;
}

.ingredientsliste {
    display: flex;
    flex-direction:column;
    align-items: center;
    gap:10px;
    justify-content: center;
}

.ingredientgestionpage {
    background-color: #fff9e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width:300px;
    border-radius:20px;
    margin:10px auto;
    gap:15px;
}

/*FOOTER*/
footer {
    text-align: center;
    border-top: solid 2px black;
}


@media screen and (min-width: 480px){
/*HEADER*/
/*HEADER*/
/*HEADER*/

.labelNav {
    display: flex;
    gap:10px;
    height: 30px;
    align-items: center;
    font-family: 'point_softextra_bold';
    margin-right: 20px;
    flex-direction: row;
}

.labelNav p {
    padding:2px 5px;
}

.labelNav p:hover, #active:hover {
    background-color: #09625A;
    color:white;
    border-radius: 15px;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    position: fixed;
    top:0;
    width: 100%;
    border:0;
}

#logo img {
    display: block;
    width: 100px;
    margin-left: 20px;
}

/*FOOTER*/
/*FOOTER*/
/*FOOTER*/
footer {
    padding-bottom:0;
}
/*INDEX*/
/*INDEX*/
/*INDEX*/
main {
    padding-top: 60px;
}

#section1 {
    background-image: url(../images/patternbg.jpg);
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    flex-wrap: nowrap;
}

#section2 {
    background: linear-gradient(#f1faff, white);
    width: 100%;
    height: auto;
}

#campimg {
    position: relative;
    width:550px;
    z-index:60;
    bottom:20px;
    overflow:visible;
}

#treeimg {
    position: relative;
    top: 35px;
    right: 100px;
    z-index: 61;
}

#camp {
    width: 50%;
    min-width: 712px;
    overflow: visible;
}

#intro {
    margin-bottom: 0;
    width: 50%;
}

#hcards {
    flex-direction: row;
    justify-content: end;
    margin-right: 100px;
    position: relative;
    top:-80px;
    flex-wrap: wrap;
}

.hcard img{
    transition : all 0.5s;
}

.hcard img:hover {
    transform:translateY(-10px);
    cursor:pointer;
}

#gamesdiv {
    margin-top:0;
}

/*LISTING*/
/*LISTING*/
/*LISTING*/
#mainListing, #listingrecherche {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

section {
    display: flex;
    width: 60%;
    margin-left:10px;
    padding-top:10px;
}

aside {
    width: 40%;
    padding-top:10px;
}

.datacarte{
    position: relative;
    height: 100%;
    border-radius: 0;
    z-index:0;
    top:-40px;
}

aside p {
    display: block;
    text-align: center;
}

/*RECHERCHE*/
/*RECHERCHE*/
/*RECHERCHE*/
#mainrecherche {
    padding-top:100px;
}
#mainresultatrecherche, #listingrecherche {
    padding-bottom:10px;;
}

/*BACK-OFFICE*/
/*BACK-OFFICE*/
/*BACK-OFFICE*/

}