body{
    background: linear-gradient(to right, #09A2F0 0%, #3634E4 100%);
}
/*header*/
section{
    padding-left: 35.16483516483517vh ;
    padding-right: 35.16483516483517vh ;
    min-height: 40vh;
    font-family: franklin-med;
}

header{
    background: linear-gradient(to right, #042049 0%, #03172D 100%);
}

header menu{
    background-color: none !important;
    background-repeat: no-repeat;
    position: absolute;
}

header div{
    width: 100%;
    height: 100vh;
    margin: 0;
}
header .video{
    position: absolute;
    bottom: 5vh ;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;

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

header h1{
    text-align: center;
    color: white;
    font-family: franklin-bold;
    font-size: 3rem;
}
header h1{
    text-align: center;
    color: white;
    font-family: franklin-bold;
    font-size: 3rem;
}


/*Jeux*/


section{
    display: grid;
    grid-template-columns: 35vh 35vh;
    grid-template-rows: 33%;
    grid-template-areas: 
      "a a a a a a"
      "c c c d d d"
      "c c c f f f";
}
section h2{
    grid-area: a;
    text-align: center;
    font-size: 2.5rem;
    font-family: franklin-bold;
    position: relative;
    top: 25%;
    letter-spacing: "3";
}
section:nth-child(even) h2{
    background: linear-gradient(to right, #09A2F0 0%, #3634E4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}
section:nth-of-type(odd){
    background-color: white;
}
section img, section i{
    grid-area: c;
}
section p{
    grid-area: d;
    text-align: justify;
}
section a, #button-lg{
    grid-area: f;
    text-align: center;

}
section:nth-child(odd){
    color: white;
}
section:nth-child(even) i{
    background: linear-gradient(to right, #09A2F0 0%, #3634E4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}
section img , section i{
    width: 12rem;
    font-size: 12rem;
    margin-left: 65%;
    margin-top: 2%;
}
section:nth-of-type(1){
    background-image: url("../../../img/nos-jeux/lg-grand.jpg");
    height: 50vh;
    background-repeat: no-repeat;
    background-position: 10% 0%;
    background-size: 30%;
}
.button-lg{
    border-radius:55px;
    background-image: linear-gradient(to right, #09A2F0 0%, #3634E4 100%) ;
    color: white;
    width: 100%;
    max-height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.button-lg:hover{
    transition: .5s;
    -webkit-transform: scale(0.9s);
    transform: scale(0.9);
}
section a {
    text-decoration: none;
}
.button-lg p{
    font-size: 1.5rem;
    font-style: franklin-semi;
}
section:nth-of-type(2){
    background-image: url("../../../img/nos-jeux/covid-grand.png");
    background-repeat: no-repeat;
    background-position: 15% 0%;
    background-size: 20%;
    
}
section:nth-of-type(3){
    background-image: url("../../../img/nos-jeux/target-grand.png");
    background-repeat: no-repeat;
    background-position: 15% 0%;
    background-size: 20%;
    
}
section:nth-of-type(4){
    background-image: url("../../../img/nos-jeux/taupe-grand.png");
    background-repeat: no-repeat;
    background-position: 15% 0%;
    background-size: 20%;
    
}
section:nth-of-type(5){
    background-image: url("../../../img/nos-jeux/switch-grand.png");
    background-repeat: no-repeat;
    background-position: 15% 0%;
    background-size: 20%;
    
}
section:nth-of-type(6){
    background-image: url("../../../img/nos-jeux/uhc-grand.png");
    background-repeat: no-repeat;
    background-position: 15% 0%;
    background-size: 20%;
    
}
section:nth-of-type(7){
    background-image: url("../../../img/nos-jeux/totem-grand.png");
    background-repeat: no-repeat;
    background-position: 12% 0%;
    background-size: 25%;
    height: 50vh;
}
.scenario{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.scenario h2{
    position: relative;
    top: 0;
}
.scenario a, .scenario a div{
    border-radius:55px;
    background-color: white ;
    color: white;
    width: 100%;
    max-height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    font-size:1.5rem;
}
.scenario a:hover, .scenario a div:hover{
    transition: .5s;
    -webkit-transform: scale(0.9s);
    transform: scale(0.9);
}
.scenario a div p{
background: linear-gradient(to right, #09A2F0 0%, #3634E4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }

    @media screen and (max-width: 1600px) {
        section{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-left: 5vw ;
            padding-right: 5vw ;
            background-size: 40% !important;
            padding-bottom: 5vh;
            padding-top: 5vh;
        }
        section img, section i{
            margin-left:inherit;
            padding-bottom: 2vh;
            padding-top: 2vh;
        }
        section h2{
            top:inherit;
        }
        section a{
            width: 100%;
            max-height: 70%;
        }
        .button-lg{
            padding-bottom: 1vh;
            padding-top: 1vh;
        }
      
      }