@font-face {
    font-family: 'retro';
    src: url('fonts/retro-gaming.ttf') format('truetype');
}

@media screen and (max-width: 1049px) {
    :root {
      --image-count: 2;
      --duration: 8s;
    }

    .carousel-general {
        width: 100%;
        background-color: rgb(36,35,35);
        padding-top: 2%;
        padding-bottom: 4%;
    }

    .carousel {
        background-color: rgb(36,35,35);
        width: 80%;
        overflow: hidden;
        background: #000;
    }

    .carousel-track {
      display: flex;
      width: calc(100% * var(--image-count));
      animation: slide var(--duration) steps(var(--image-count)) infinite;
    }

    .carousel-track img {
      width: 50%;
      object-fit: cover;
      flex-shrink: 0;
      margin: auto;
      background: #000;
    }

    @keyframes slide {
      to {
        transform: translateX(calc(-100% * (var(--image-count) - 1)));
      }
    }
    
    .takaviser_competences {
        display: flex;
        background-color: rgb(36,35,35);
    }

    .section_presentation_competences {
        width: 80%;
        padding-bottom: 2%;
    }

    .takaviser_competences .competences p, .takaviser_competences .competences div, .takaviser_competences .competences h3 {
        font-family: 'retro';
        margin-bottom: 10%;
    }

    .takaviser_competences .competences h3 {
        color:#D04A4A;
    }
        .takaviser_competences {
        display: flex;
    }
    
    .takaviser_competences {
        display: flex;
        flex-direction: column;
    }
    body {
        background-image: url('img/briques.webp');
        background-size: cover;
    }

    .mission-torpedo {
        background-image: url("img/briques.webp");
        background-size: cover;
    }

    .mission-torpedo-galerie {
        background-color: rgb(36,35,35);
    }

    .mission-torpedo-galerie img {
        width: 80%;
        margin-bottom:2%;

    }
    .logo_quiz_game {
        display: block;
        margin: auto;
        width: 100%;
    }

    .presentation_bonus {
        display:none;
        flex-direction: column;
        justify-content: center;
        width: 90%;
    }

    .information {
        margin: auto;
    }

    .information img {
        display:block;
        padding: 3%;
    }

    .details_quiz_game {
        width: 100%;
        padding-bottom: 2%;
        margin-bottom: 2%;
        color: white;
        text-align: center;
    }

    .informations_quiz_game {
        display: flex;
        flex-direction: column;
        padding-top: 1%;
        background-color: rgb(36,35,35); 
        padding-bottom: 3%;
    }

    .infos_details_quiz_game {
        padding-top:2%;
        margin: auto;
        width: 90%;
        margin-bottom:6%;
    }

    .infos_details_quiz_game img {
        display:block;
        padding: 3%;
    }

    .infos_details_quiz_game h3 {
        padding: 1%;
    }

    .infos_details_quiz_game p {
        text-align:center;
        color: white;
    }

    .infos_details_quiz_game div {
        display: flex;
    }

    /* PRESENTATION */
    .presentation_quiz_game {
        display: flex;
        flex-direction: column;
        margin-top: 2%;
        width: 100%;
        padding-top: 5%;
        padding-bottom: 5%;
        background-color: rgb(36,35,35); 
    }

    .presentation_quiz_game img {
        width: 80%;
    }

    .presentation_quiz_game .infos_age {
        width: 95%;
    }

    .presentation_quiz_game p {
        padding-top: 5%;
        text-align: center;
        color: white;
        width: 90%;
        margin-left: 1%;
        margin: auto;
    }

    .titre_quiz_game {
        color: #D04A4A;
    }

    .infos_age_femmes_enceintes {
        display: flex;
        width: 100%;
        flex-direction: column;
        margin-top: 2%;
    }

    .infos_age_femmes_enceintes .age, .infos_age_femmes_enceintes .femmes_enceintes  {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .infos_age_femmes_enceintes .femmes_enceintes img {
        width: 40%;
    }

    .infos_age_femmes_enceintes .age img {
        width:42%;
    }

    #pc {
        display: none;
    }

    /* THEMES QUIZ GAME */
    .presentation_themes_quiz_game {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 2%;
        background-color: rgb(36,35,35);
        padding-bottom: 5%;
    }

    .presentation_themes_quiz_game div {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .presentation_themes_quiz_game iframe {
        width: 98%;
        padding-top: 5%;
    }

    .presentation_themes_quiz_game img {
        padding: 1%;
    }

    /* COMPETENCES / COMMENT CA MARCHE*/
    .competences_commentcamarche_quiz_game {
        display:flex;
        flex-direction: column;
        margin: auto;
        color: white;
    }

    .competences_quiz_game {
        margin-top: 2%;
        width: 100%;
        flex-direction: column;
        background-color: rgb(36,35,35);
        padding-top: 5%;
        padding-bottom: 5%;
    }

    .tableau_competences_quiz_game {
        display: none;
    }

    .display_competences_quiz_game {
        display: block;
        width: 95%;
        padding-top: 5%;
    }

    .test2 {
        border: 10px solid red;

    }

    .competences_quiz_game h3 {
        color: #D04A4A;
    }

    .commentcamarche_quiz_game {
        margin-top: 2%;
        padding-bottom: 5%;
        width: 100%;
        text-align: center;
        background-color: rgb(36,35,35);
    }

    .commentcamarche_quiz_game h3 {
        color: #D04A4A;
        padding-top: 5%;
    }

    /* RESERVER */
    .reserver_quiz_game {
        display: block;
        text-align:center;
        width: 30%;
        padding: 1%;
        text-decoration:none;
        color: white;
        background-color: #D04A4A;
        margin-top: 4%;
    }

    .reserver_quiz_game:hover {
        background-color: #d04a4aa6;
        transition: .4s;
    }
}

@media screen and (min-width: 1050px) {    
    :root {
      --image-count: 2;
      --duration: 8s;
    }

    .carousel {
      width: 50%;
      overflow: hidden;
      margin: auto;
      background: #000;
    }

    .carousel-track {
      display: flex;
      width: calc(100% * var(--image-count));
      animation: slide var(--duration) steps(var(--image-count)) infinite;
    }

    .carousel-track img {
      width: 50%;
      object-fit: cover;
      flex-shrink: 0;
      margin: auto;
      background: #000;
    }

    @keyframes slide {
      to {
        transform: translateX(calc(-100% * (var(--image-count) - 1)));
      }
    }
    .section_presentation_competences {
        width: 40%;
        padding-bottom: 2%;
    }
    .takaviser_competences {
        display: flex;
    }

    .takaviser_competences .competences p, .takaviser_competences .competences div, .takaviser_competences .competences h3 {
        font-family: 'retro';
        margin-bottom: 10%;
    }

    .takaviser_competences .competences h3 {
        color:#D04A4A;
    }

    .forescape {
        margin: auto;
        width: 80%;
    }
    body {
        background-size: cover;
        background-attachment: fixed;
        background-image: url('img/briques.webp');
    }
    .mission-torpedo {
        background-image: url("img/briques.webp");
        background-size: cover;
    }

    .mission-torpedo-galerie img {
        width: 20%;
        margin-bottom: 2%;
    }

    .logo_quiz_game {
        display:block;
        margin:auto;
        width: 60%;
    }

    .presentation_bonus {
        width: 60%;
    }

    .presentation_bonus .bonus {
        display:flex;
        justify-content:center;
        width: 90%;
    }

    .presentation_bonus .testbonus div {
        width: 30%;
    }

    .information {
        margin: auto;
    }

    .information img {
        display:block;
        padding: 3%;
    }

    .details_quiz_game {
        background-color: rgba(0,0,0,0.4); 
        width: 60%;
        padding-bottom: 2%;
        margin-bottom: 2%;
        color: white;
        text-align: center;
        margin-top: 2%;
        font-family: 'Courier New', Courier, monospace;
    }

    .informations_quiz_game {
        display: flex;
        padding-top: 1%;
    }

    .infos_details_quiz_game {
        margin: auto;
        width: 20%;
    }

    .infos_details_quiz_game img {
        display:block;
        padding: 3%;
    }

    .infos_details_quiz_game h3 {
        padding: 1%;
        margin-top: 6%;
        
    }

    .infos_details_quiz_game p {
        text-align:center;
        color: white;
    }

    .infos_details_quiz_game div {
        display: flex;
    }

    /* PRESENTATION */
    .presentation_quiz_game {
        display: flex;
        margin-top: 2%;
        width: 95%;
    }

    .presentation_quiz_game img {
        width: 100%;
    }

    .presentation_quiz_game .infos_age {
        width: 40%;
    }

    .presentation_quiz_game p {
        text-align: center;
        color: white;
        font-size: 1.2vw;
        width: 50%;
        margin-left: 1%;
    }

    .titre_quiz_game {
        color: #D04A4A;
    }

    .infos_age_femmes_enceintes {
        display: flex;
        width: 100%;
        margin-top: 2%;
    }

    .infos_age_femmes_enceintes .age, .infos_age_femmes_enceintes .femmes_enceintes  {
        display: flex;
        flex-direction: column; 
        font-size: .9vw;
        width: 100%;
    }

    .infos_age_femmes_enceintes .femmes_enceintes img {
        width: 40%;
    }

    .infos_age_femmes_enceintes .age img {
        width:30%;
    }

    #mobile {
        display: none;
    }
    /* THEMES QUIZ GAME */
    .presentation_themes_quiz_game {
        display: flex;
        flex-wrap: wrap;
        width: 90%;
        margin-top: 2%;
    }

    .presentation_themes_quiz_game div {
        display: flex;
        flex-wrap: wrap;
        width: 40%;
    }

    .presentation_themes_quiz_game iframe {
        width: 50%;
    }

    .presentation_themes_quiz_game img {
        padding: 1%;
    }

    /* COMPETENCES / COMMENT CA MARCHE*/
    .competences_commentcamarche_quiz_game {
        display:flex;
        padding-top: 2%;
        margin: auto;
        color: white;
    }

    .competences_quiz_game {
        width: 60%;
        flex-direction: column;
    }

    .competences_quiz_game h3 {
        color: #D04A4A;font-size: 1.3vw;
    }

    .display_competences_quiz_game {
        display: none;
    }

    .commentcamarche_quiz_game {
        width: 40%;
        text-align: center;
        margin-right: 1%;
    }

    .commentcamarche_quiz_game h3 {
        color: #D04A4A;
        font-size: 1.3vw;
    }

    /* RESERVER */
    .reserver_quiz_game {
        display: block;
        text-align:center;
        width: 30%;
        padding: 1%;
        text-decoration:none;
        color: white;
        background-color: #D04A4A;
        margin-top: 2%;
    }

    .reserver_quiz_game:hover {
        background-color: #d04a4aa6;
        transition: .4s;
    }
}


.menu {
    background-color: black;
}
  
.presentation_quiz_game p {
    font-family: 'retro';
}

.titre_quiz_game {
    font-family: 'retro';
}

.age, .femmes_enceintes {
    font-family: 'retro';
}

h3 {
    font-family: 'retro';
}