body {
  background-color: #0f0f0f;
  color: rgb(255, 255, 18);
  font-size: 100%;
  font-family: Helvetica;
}

::-moz-selection {
  color: #fff;
  background-color: red;
}

::selection {
  color: #fff;
  background-color: rgb(255, 0, 0);
}

header {
  background-color: #0f0f0f;
  font-size: 5.6vw;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

#titleMobile {
  display: none;
}

a {
  color: #ffff12;
  text-decoration: none;
}

a:hover {
  background-color: #ffff12;
}

#boutonInfos {
  cursor: pointer;
}

#boutonInfos:hover {
  background-color: #ffff12;
}

.boutons {
  position: sticky;
  bottom: 0;
  display: block;
  background-color: #0f0f0f;
  width: 100vw;
}

.boutons button {
  background-color: inherit;
  color: #ffff12;
  border: none;
  font-size: 300%;
  font-family: Helvetica;
  cursor: pointer;
  margin-right: 1em;
  padding: 0;
}

.circle {
  position: relative;
  left: 0;
  top: 0.03em;
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border: 4px solid #ffff12;
  border-radius: 50%;
  background-color: transparent;
  margin-right: 0.2em;
}

@media screen and (min-width: 800px) {
  .boutons button:hover .circle {
    background-color: #ffff12;
  }
}


.boutons button.active .circle {
  background-color: yellow;
}

.allTatts {
  display: flex;
  flex-flow: row wrap;
  width: 100vw;
  height: auto;
  min-height: 70vh;
  user-select: none;
  margin-bottom: 50px;
}

.tattoo {
  height: 400px;
  width: auto;
  position: relative;
}

.tattoo::after {
  position: absolute;
}

.container {
  cursor: pointer;
}


.tattoo-container {
  height: 100%;
}


.tattoo img {
  height: 100%;
  width: auto;
}

.taken {
  position: relative;
}

.taken::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 50%;
}

/* ************** CHECKBOXES ****************** */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 25px;
  width: 25px;
  background-color: #000;
  border-radius: 50%;
  border: 3px solid yellow;
  cursor: pointer;
}

@media screen and (min-width: 800px) {
  .container:hover input~.checkmark {
    background-color: yellow;
  }
}

/* On mouse-over, add a grey background color */
/* .container:hover input ~ .checkmark {
  background-color: yellow;
} */

/* When the checkbox is checked, add background */
.container input:checked~.checkmark {
  background-color: yellow;
}

.infos {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  /* cursor: url("data:image/svg+xml,%3Csvg id='CROIX' xmlns='http://www.w3.org/2000/svg' width='30px' height='30px' viewBox='0 0 25 25'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ffff12;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='25 2.86 22.14 0 12.5 9.64 2.86 0 0 2.86 9.64 12.5 0 22.14 2.86 25 12.5 15.36 22.14 25 25 22.14 15.36 12.5 25 2.86'/%3E%3C/svg%3E") 30 30, pointer; */
}

.infos p {
  font-size: 400%;
}

#fleche-infos {
  width: 50px;
  height: auto;
  fill: yellow;
}

@media screen and (max-width: 800px) {

  header {
    font-size: 9.5vw;
  }

  #titleMobile {
    display: block;
  }

  #titleWeb {
    display: none;
  }

  .boutons {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
  }

  .boutons button {
    margin-right: 0px;
    font-size: 8vw;
  }

  .circle {
    border: 0.5vw solid #ffff12;
  }


  .tattoo {
    height: auto;
    max-width: 500px;
  }

  .tattoo-container {
    height: auto;
    max-width: 500px;
  }

  .tattoo img {
    height: auto;
    width: 100vw;
    max-width: 500px;
  }

  .allTatts {
    margin-bottom: 200px;
  }

  .infos p {
    font-size: 9vw;
  }
}

/***
 *          .
 *      .x88888x.                      ..
 *     :8**888888X.  :>        u.     888>         u.
 *     f    `888888x./   ...ue888b    "8P    ...ue888b
 *    '       `*88888~   888R Y888r    .     888R Y888r
 *     \.    .  `?)X.    888R I888>  u888u.  888R I888>
 *      `~=-^   X88> ~   888R I888> `'888E   888R I888>
 *             X8888  ~  888R I888>   888E   888R I888>
 *             488888   u8888cJ888    888E  u8888cJ888     .
 *     .xx.     88888X   "*888*P"     888E   "*888*P"    .@8c
 *    '*8888.   '88888>    'Y"        888E     'Y"      '%888"
 *      88888    '8888>               888E                ^*
 *      `8888>    `888                888E
 *       "8888     8%                 888P
 *        `"888x:-"                 .J88" "
 *         ...     ..                                  ..
 *      .=*8888x <"?88h.                             dF
 *     X>  '8888H> '8888                 u.    u.   '88bu.             u.
 *    '88h. `8888   8888        .u     x@88k u@88c. '*88888bu    ...ue888b
 *    '8888 '8888    "88>    ud8888.  ^"8888""8888"   ^"*8888N   888R Y888r
 *     `888 '8888.xH888x.  :888'8888.   8888  888R   beWE "888L  888R I888>
 *       X" :88*~  `*8888> d888 '88%"   8888  888R   888E  888E  888R I888>
 *     ~"   !"`      "888> 8888.+"      8888  888R   888E  888E  888R I888>
 *      .H8888h.      ?88  8888L        8888  888R   888E  888F u8888cJ888
 *     :"^"88888h.    '!   '8888c. .+  "*88*" 8888" .888N..888   "*888*P"
 *     ^    "88888hx.+"     "88888%      ""   'Y"    `"888*""      'Y"
 *            ^"**""          "YP'                      ""
 *
 */