@font-face {
    font-family: 'Pixellari';
    src: url('../fonts/Pixellari.ttf');
    src: url('../fonts/Pixellari.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pixellari.woff2') format('woff2'),
        url('../fonts/Pixellari.woff') format('woff'),
        url('../fonts/Pixellari.svg#Pixellari') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: Pixellari;
}

body {
    background-size: cover;
    margin: 0;
}

main {
    height: 100vh;
}

.character {
    position: relative;
}

.agent {
    position: absolute;
    width: 5%;
    height: auto;
    bottom: 29.7%;
    left: 40%;
    overflow: hidden;
    z-index: 3;
}

.cadre {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.decor {
    position: absolute;
    width: 100%;
    height: 77%;
    bottom: 26%;
}

.policier {
    position: absolute;
    height: auto;
    width: 6%;
    bottom: 29.7%;
    left: 50%;
    z-index: 3;
}

.dialogues {
    color: #fff;
    position: absolute;
    z-index: 5;
    font-size: 2em;
    top: 77%;
    left: 10%;
    width: 80%;
}

.petitcon {
    position: absolute;
    height: auto;
    width: 4%;
    top: 57.5%;
    left: 70%;
    z-index: 3;
}

.femmerandom {
    position: absolute;
    width: 5%;
    height: auto;
    bottom: 29.7%;
    left: 70%;
    z-index: 4;
}

.garsrandom {
    position: absolute;
    width: 5.5%;
    height: auto;
    bottom: 29.7%;
    left: 30%;
    z-index: 4;
    transform: scaleX(-1);
}

.prostitute {
    position: absolute;
    width: 6%;
    height: auto;
    bottom: 29.7%;
    left: 50%;
    z-index: 2;
}

.nPied{
    position: absolute;
    bottom: 29.5%;
    left: 21.1%;
    transform: scaleX(-1);
    width: 3.9%;
}

.nTete{
    position: absolute;
    z-index: 6;
    bottom: 43%;
    left: 2%;
    width: 2.3%;
}

.pclickInverse {
    transition: 150ms all ease;
}

.pclickInverse:hover {
    cursor: pointer;
    transform: scaleX(-1) scale(1.1);
    bottom: 31.2%;
}

.pclick {
    transition: 150ms all ease;
}

.pclick:hover {
    cursor: pointer;
    transform: scale(1.1);
    bottom: 31.2%;
}

.tony {
    position: absolute;
    height: auto;
    width: 6%;
    bottom: 29.7%;
    left: 50%;
    z-index: 3;
}

#fleche-suivante {
    position: absolute;
    height: auto;
    z-index: 5;
    top: 84%;
    left: 92%;
    width: 5%;
    cursor: pointer;
}

#fleche-precedente {
    position: absolute;
    height: auto;
    z-index: 5;
    top: 84%;
    left: 3%;
    width: 5%;
    cursor: pointer;
}

.flechePC{
    display: none;
}

.russe {
    position: absolute;
    width: 8%;
    height: auto;
    bottom: 29.7%;
    left: 30%;
    left: 50%;
    z-index: 3;
}

.enfant {
    position: absolute;
    z-index: 4;
    width: 3.5%;
    bottom: 29.7%;
    left: 57%;
}

.fille {
    position: absolute;
    z-index: 4;
    width: 3.7%;
    bottom: 29.7%;
    left: 50%;
}

.nascondino{
    position: absolute;
    z-index: 4;
    width: 5%;
    bottom: 29.7%;
    left: 25%;
    transform: scaleX(-1);
    display: none;
}

.touriste {
    position: absolute;
    width: 5%;
    transform: scaleX(-1);
    bottom: 29.7%;
    left: 75%;
    z-index: 3;
    cursor:pointer;
}

.btn-menu {
    text-align: center;
    text-decoration: none;
    padding: 11px 10px;
    color: #eee;
    transition: all 300ms ease;
}

.btn-menu-1 {
    position: absolute;
    top: 30%;
    left: 47%;
    font-size: 1.3em;
    font-family: Pixellari;
}

.btn-menu-2 {
    position: absolute;
    top: 40%;
    left: 46.1%;
    font-size: 1.3em;
    font-family: Pixellari;
}

.btn-menu:hover {
    color: #eee;
    background-color: grey;
}

.btn-burger {
    display: block;
    color: #fff;
    position: absolute;
    right: 2%;
    top: 2%;
    scale: 2;
    cursor: pointer;
    user-select: none;
    transition: transform 300ms ease;
    z-index: 7;
}

.menu-pause {
    display: none;
    position: absolute;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    background-color: black;
    opacity: 0.8;
    transition: all 300ms ease-out;
    z-index: 7;
}

.menu-pause li {
    display: block;
    flex-basis: 18%;
}

.choix {
    position: absolute;
    width: 50%;
    z-index: 8;
    bottom: 9%;
    left: 25%;
    transform: scale(1.3);
    display: none;
    justify-content: space-between;
}

.btn-choix {
    flex-basis: 40%;
    height: 70px;
    font-size: 1.5em;
    transition: 400ms ease all;
}

.btn-choix:hover {
    cursor: pointer;
    background-color: rgb(95, 95, 95);
    color: #fff;
}

.reaction{
    color: #6b6b6b;
}