@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,800&display=swap');
    @font-face {
        font-family: 'pokepixel';
        src: url('../police/pokemon_pixel_font.ttf') format('truetype'), url('../police/pokemon_pixel_font.eot') format('eot'), url('../police/pokemon_pixel_font.svg') format('svg'), url('../police/pokemon_pixel_font.woff') format('woff');
    }

    body {
        background-color: #ff503f;
        background-image: url(../image/pokefond.jpeg);
        background-size: 127% 127%;
        background-position: center;
        margin: 0;

        font-family: "pokepixel",'Poppins', sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-height: 100vh;
        height: 100vh;
        width: 100vw;
        color: white;
        overflow: hidden;
    }
    h1 {
        bottom: -20px;
        font-size: 1.5rem;
        position: absolute;
        display: flex;
        justify-content: center;
        width: 104vw;
        height: 33px;
        text-align: center;
        z-index: 7;
        background-color: #234D50;
        width: 100vw;
        transition: 0.44s;
}
    h1:hover{
        background-color: #FF503F;
    }
    h1:hover a{
        color:#F12448;
    }

    div,label{
        border-radius:7px;
        cursor:pointer;
    }

    div.pokydex{
      height: 93vh;
      width: 93vw;
      background-color: #F12448;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: -40px;
      cursor: cell;
    }

    div.pokydex img.titre {
        width: auto;
        height: 75px;
        position: relative;
        top: -4.33vh;
    }

    div.ecran{
        background-color: #E00A47;
        height: 77%;
        width: 95%;
        min-width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }

    label#pokelabel{
        display:flex;
        flex-direction: column;
        align-items: center;
        height: 40px;
        width:40px;
       margin:7px;
       margin-left: 5px;
        z-index: 3;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        transition: 0.44s;

            animation-duration: 0.44s;
            animation-name: cuty;
            animation-iteration-count: infinite;
            animation-direction: alternate;

    }
    label#reset{
        display: flex;
        justify-content: center;
        height: 76vh;
        align-items: center;
        width: 89vw;
        position: absolute;
        top: 15vh;
        opacity: 1;
        overflow: hidden;
        z-index: 1;
        margin: 0;
        padding: 0;
        background-color: #E00A47;

    }
    label#reset img{
    visibility: hidden;
    height: 0px;
    transition: 0.001s;
    }

    input{
        display: none;
    }

    input[type=radio]:checked + label#pokelabel {
    background-image: none;
    background-size: contain;
    background-position: top;
    cursor: auto;
    display: flex;
    position: absolute;
    /* margin-left: -5px;
    top: 20vh;
    left: 12%; */
    height: 70vh;
    min-width: 300px;
    width: 86vw;
    z-index: 1;
    margin-left: 10px;
    animation: none;
    }
    input[type=radio]:checked + label#reset img{
        visibility: visible;
   height:100%;
   width: 100%;
   object-fit: contain;
   margin:0;
   transition: 1s;
   cursor: cell;
    }

    label.bulbi{
        display: block;
        background-image: url("../image/001.png");
        background-color: #78C850;
    }

    label.salam{
        display: block;
        background-image: url("../image/004.png");
        background-color: #F08030 ;
    }

    label.carap{
        display: block;
        background-image: url("../image/007.png");
        background-color: #6890F0 ;
    }
    label.pika{
        display: block;
        background-image: url("../image/025.png");
        background-color:#FFC631;
    }
    label#pokelabel h2{
        display: none;
        font-size: 2.8em;
        line-height: 0.33em;
    }

    label#pokelabel img, label#pokelabel p{
        display: none;
        font-size: 1.77em;
        line-height: 1em;
        opacity: 0;
    }
    input[type=radio]:checked + label#pokelabel h2,input[type=radio]:checked + label#pokelabel img, input[type=radio]:checked + label#pokelabel p{
        display: flex;
        opacity: 1;
    }

    input[type=radio]:checked + label img{
        width: 175px;
        height: auto;
    }

    input[type=radio]:checked + label p {
    width: 35%;
    min-width: 250px;
    padding: 0 10px;
    height: auto;
    min-height: 100px;
    overflow-wrap: break-word;
    overflow: auto;
    overflow-x: hidden;
    z-index: 4;
    cursor: default;
}
    a{
        text-decoration: none;
        color:#FFC631;
        margin:0 3px;
    }
    a:visited{
        text-decoration: none;
        color:#ff503f;
    }

    ::-webkit-scrollbar {
        max-width: 26px;
        width: 8vw;
        transition: 0.44s;
      }

      /* Track */
      ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 2.22px #2d2d2d;
        border-radius: 7px;
        position: relative;
        right:0;

      }

      /* Handle */
      p::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.15);
        border-radius: 7px;
      }

      /* Handle on hover */
      p::-webkit-scrollbar-thumb:hover {
        background-color: #2d2d2d62;
      }

      ::selection{
        background-color: #ff503f;
        color: white;
      }

      /* Firefox */
      ::-moz-selection {
        background-color: #ff503f;
        color: white;
      }

      @keyframes cuty {
        from {
            background-position: 50% 50%;
        }

        to {
            background-position: 50% 0%;
        }
      }

      /* ---------------------------------
      audio
      --------------------------------- */
      .musicopening{
        display: flex;
        justify-content: flex-start;
        min-height: 35px;
        height: 35px;
        max-height: 35px;
        min-width: 35px;
        width: 35px;
        max-width: 35px;
        overflow:hidden;
        background-color: #F1f3f4;
        width: auto;
        position: relative;
        top:0;
        left: 0;
      }

      .musicopening audio{
      position:absolute;
      left:-8px;
      top:-10px;
      width: 300px;
      }
      div.after{
   margin-left: 5px;
      }
      .openning{
          display: flex;
          align-items:center;
          height: 35px;
          width: 55px;
          z-index: 7778;
          position: relative;
          left:-37.77vw;
          top:3vh;
      }


label audio{
  position: absolute;
  bottom: -125vh;
}
     #pokelabel audio{
       position: absolute;
       left:20px;
       visibility: hidden;
       opacity: 0;
       height: 0;
     }
     .battle audio{
      position: absolute;
      border:2.5px solid salmon;
      border-radius: 15px;
      display: block;
      height: 50px;
      width: 100vw;
      left: 0;
      bottom: -80px;
     }

      input[type=radio] + label#pokelabel audio{
          display: none;
          margin-top: 10px;
          opacity: 0.5;
      }
      input[type=radio]:checked + label#pokelabel audio{
          display: flex;
      }



      /* ------------------------------------------------
      ---------responsiv
      ------------------------------------------------- */
@media screen and (max-width: 700px) {

    h1 {
        bottom: -15vh;
        font-size: 1rem;
        position: absolute;
        display: flex;
        justify-content: center;
        width: 104vw;
        height: 33px;
        text-align: center;
        z-index: 7;
        background-color: #234D50;
        width: 100vw;
        transition: 0.44s;
}

    input[type=radio]:checked + label p {
        width: 35%;
        min-width: 275px;
        padding: 0 10px;
        height: auto;
        min-height: 100px;
        overflow-wrap: break-word;
        overflow: auto;
        overflow-x: hidden;
        z-index: 4;
        cursor: default;
}

}