@font-face {
  font-family: Locator-Black;
  src: url('../fonts/Locator-Black.otf');
}

@font-face {
  font-family: Locator-Bold;
  src: url('../fonts/Locator-Bold.otf');
}

@font-face {
  font-family: Locator-Light;
  src: url('../fonts/Locator-Light.otf');
}

@font-face {
  font-family: Locator-Medium;
  src: url('../fonts/Locator-Medium.otf');
}

@font-face {
  font-family: Locator-Regular;
  src: url('../fonts/Locator-Regular.otf');
}

:root {
  --light-grey:#ececec;
  --dark-grey:hsl(0, 0%, 67%);
  --green:#4CAF50;
  --red:#FF5252;
  --black-transparent:rgba(0,0,0, 0.8);
  --transition-time:0.4s;
}

* {
  box-sizing: border-box;
  margin:0;
  padding: 0;
  color: white;
  font-family: Locator-Light;
}

[hidden] {
  display:none !important;
}

body {
  width: 100vw;
  height:100svh;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background-image: url('../images/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

main {
  width: 90vw;
  max-width: 400px;
}

.redirect-qr {
  width: 100lvw;
  height: 100lvh;
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
}

.redirect-qr > img.background {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.redirect-qr > img.logo {
  position: absolute;
  top: 6%;
  left: 10%;
  width: 25%;
}

.redirect-qr > .text-container {
  position: absolute;
  top: 29%;
  left: 10%;
  display: flex;
  flex-direction: column;
}

.redirect-qr > .text-container > span:nth-child(1) {
  font-size: 3rem;
}

.redirect-qr > .text-container > span:nth-child(2) {
  font-size: 1.8rem;
}

.redirect-qr > img.qr {
  position: absolute;
  width: 25%;
  height: 48%;
  top: 46%;
  left: 10%;
  object-fit: contain;
}

.home, .how-to-play, .how-to-play-panel, .game, .pause, .end-game, .claim-reward, .reward {
  position: relative;
  width: 100%;
  height: 100svh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.how-to-play {
  overflow: unset;
}

button.btn-roche-posay {
  width: 80%;
  height: 30%;
  max-height: 50px;
  max-width: 70%;
  color: white;
  font-weight: bold;
  border: 2px solid white;
  background-color: #F1810D;
  font-size: 2rem;
  text-shadow: 1px 2px 2px #aa5200;
  font-family: Locator-Regular;
}

.text-roche-posay {
  color: #f1810d;
}

.text-gradient-roche-posay {
  background: -webkit-linear-gradient(#f5e026, #dc7609);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-center {
  text-align: center;
}

.text-small {
  font-size: 0.8rem;
}

.text-medium {
  font-size: 1.2rem;
}

.text-large {
  font-size: 1.5rem;
}

.text-light {
  font-family: Locator-Light;  
}

.text-medium-lrp {
  font-family: Locator-Medium;  
}

.text-regular {
  font-family: Locator-Regular;  
}

.text-bold {
  font-family: Locator-Bold;  
}

.text-bold-black{
  color: black;
}

/* .text-bold {
  font-weight: bold;
} */

.text-black-shadow {
  text-shadow: 1px 1px 2px #AA5200;
}

.top-container {
  width: 90%;
  height: 3%;
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 6%;
  z-index: 999;
}

.top-container > * {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 1.4rem;
  height: 100%;
}

.top-container > * > img {
  height: 100%;
}

.top-container > .left-panel {
  width: 20%;
}

.top-container > .timer {
  width: 30%;
}

.top-container > .score {
  width: 30%;
}

.bottom-container {
  width: 100%;
  height: 20%;
  position: absolute;
  bottom: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.other-bottom-container{
  bottom: 2%;
  width: 100%;
  height: 20%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

img {
  max-width: 100%;
}

.logo {
  position: absolute;
  top: 3%;
  width: 70%;
}

.home > .save-your-skin {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 60%;
}

.how-to-play > .tuto-step {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  position: relative;
}

.how-to-play > .tuto-step.step-2 > .finger-tap {
  position: absolute;
  width: 25%;
  transform: rotateZ(-30deg);
  right: 0;
  top: 65%;
}

.how-to-play > .tuto-step > img.photo {
  width: 80%;
}

.how-to-play > .tuto-step.step-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.how-to-play > .tuto-step.step-3 > .bad-profile-tuto {
  position: absolute;
  width: 75%;
}

.how-to-play > .tuto-step.step-3 > img:nth-of-type(1) {
  bottom: 15%;
}

.how-to-play > .tuto-step.step-3 > img:nth-of-type(2) {
  bottom: 17%;
}

.how-to-play > .tuto-step.step-3 > img:nth-of-type(3) {
  bottom: 19%;
}

.how-to-play > .tuto-step.step-3 > img:nth-of-type(4) {
  bottom: 19%;
}

.how-to-play > .tuto-step.step-3 > img.swiped-right:nth-of-type(4) {
  transform: rotateZ(30deg) translateX(20%) translateY(-30%);
}

.how-to-play > .tuto-step.step-3 > img.swiped-left:nth-of-type(3) {
  transform: rotateZ(-30deg) translateX(-20%) translateY(-30%);
}

.how-to-play > .tuto-step.step-3 > .bad-answer-popup-tuto {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 5%;
  width: 80%;
  height: 250px;
}

.how-to-play > .tuto-step.step-3 > .bad-answer-popup-tuto > .text-container {
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 45%;
  position: absolute;
}

.how-to-play > .tuto-step.step-3 > .bad-answer-popup-tuto > img {
  position: absolute;
  width: 100%;
}

.how-to-play > .tuto-step.step-3 > .bad-answer-popup-tuto > .text-container > span.text-large {
  font-size: 1.4rem;
}

.how-to-play > .tuto-step.step-3 > .bad-answer-popup-tuto > .text-container > span.text-small {
  font-size: 0.9rem;
}

.how-to-play > .tuto-step.step-3 > .finger-tap {
  position: absolute;
  width: 25%;
  transform: rotateZ(-30deg);
  right: 20%;
  top: 60%;
}

.text-extra{
  font-size: 3rem;
}

.how-to-play-panel {
  display: flex;
  justify-content: center;
  align-items: center;
}

.how-to-play-panel > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 90%;
  height: 70%;
  position: relative;
  background-color: #F0810D;
  border-radius: 30px;
  border: 2px solid white;
  top: 0%;
}

.how-to-play-panel > .container > .quit-how-to-play-panel-btn {
  border-radius: 50px;
  background-color: #ffffffd6;
  width: 10vw;
  height: 10vw;
  color: #F1810D;
  text-align: center;
  font-weight: bold;
  padding-top: 0.5%;
  font-size: 1.4rem;
  position: absolute;
  top: -4%;
  left: -4%;
  font-size: 1.5rem;
  border: solid 2px white;
}

.swipe-guide {
  width: 80%;
  height: 35%;
}

.swipe-guide > div {
  font-size: 0.9rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.swipe-guide > div:first-of-type {
  margin-top: 5%;
}

.swipe-guide > div > span {
  font-size: 1rem;
}

.swipe-guide > div > div {
  font-size: 0.6rem;
}

.swipe-guide span u {
  color: white;
}

.swipe-guide * {
  color: black;
}

.swipe-guide > div > b {
  margin-right: 5%;
  font-size: 1.7rem;
}

.game {
  justify-content: end;
}

.game > * > .tuto-swipe {
  position: absolute;
  z-index: 99;
  bottom: 0%;
  right: -20%;
  width: 40%;
}

.game .good-answer-feedback {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 15%;
  width: 60%;
  height: 20%;
}

.game .bad-answer-feedback {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 15%;
  width: 60%;
  height: 15%;
}

.game .bad-answer-popup, .game .bad-answer-tuto-popup {
  position: absolute;
  width: 65vw;
  height: 12vh;
  top: 0%;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game .bad-answer-popup > * {
  position: absolute;
}

.game .bad-answer-popup > img {
  height: 100%;
  object-fit: contain;
}

.game .bad-answer-popup span {
  white-space: nowrap;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 5%;
}

.game .bad-answer-tuto-popup .text-container {
  display: flex;
  flex-direction: column;
  margin-top: 8%;
}

.game .bad-answer-tuto-popup > * {
  position: absolute;
}

.game .bad-answer-tuto-popup span {
  white-space: nowrap;
}

.game .bad-answer-tuto-popup span.text-large {
  font-size: 1.2rem;
}

.game .bad-answer-tuto-popup span.text-small {
  font-size: 0.7rem;
}

.game .good-answer-feedback button.btn-roche-posay {
  width: 100%;
  max-width: 100%;
  font-size: 0.8rem;
}

.game .good-answer-feedback span {
  white-space: nowrap;
  margin-top: 5%;
}

.pause {
  backdrop-filter: blur(10px);
  z-index: 999;
  width: 90%;
  position: absolute;
  overflow: unset;
}

.pause img {
  width: 20%;
}

.pause span {
  text-shadow: 1px 1px 2px #bd8791;
  font-weight: bold;
  font-size: 3.5rem;
  margin-top: 5%;
  margin-bottom: 5%;
}

.pause button.btn-roche-posay {
  max-width: 45%;
}

.end-game .score-panel {
  display: flex;
  flex-direction: column;
  font-size: 5rem;
  margin-top: 10%;
}

.end-game .score-panel .score-value {
  font-size: 4rem;
  margin-top: -10%;
}

.end-game .video-preview {
  height: 35%;
  width: 50%;
  object-fit: contain;
}

.end-game button.btn-roche-posay {
  max-height: 40px;
  max-width: 90%;
  font-size: 0.9rem;
  white-space: nowrap;
  margin-top: 5%;
  margin-bottom: 5%;
}

video.opening-video, video.meet-dermato-video {
  width: 100lvw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: fill;
}

.video-dermato-container {
  position: absolute;
  width: 100vw;
  height: 100svh;
  top: 0;
  left: 0;
}

.video-dermato-container:before {
  content: attr(time-left);
  position: absolute;
  font-family: Locator-Regular;
  background: #F1810D;
  border-radius: 15px;
  top: 10px;
  left: 10px;
  z-index: 1;
  height: 20px;
  width: 50px;
  font-weight: bold;
  text-align: center;
  line-height: 22px;
  font-size: 0.9rem;
}

.claim-reward  .video-preview {
  height: 55%;
  width: 85%;
  object-fit: contain;
}

.claim-reward button.btn-roche-posay {
  max-height: 50px;
  max-width: 60%;
  font-size: 1.2rem;
  white-space: nowrap;
  margin-top: 5%;
  margin-bottom: 5%;
}

.reward .gift {
  width: 40%;
  margin-top: 10%;
  margin-bottom: 5%;
  height: 30%;
  object-fit: contain;
}

.reward .tooltip {
  position: absolute;
  bottom: 5%;
  font-size: 0.6rem;
}

.reward button.btn-roche-posay {
  max-height: 40px;
  max-width: 75%;
  font-size: 1.2rem;
  white-space: nowrap;
  margin-bottom: 5%;
}

.profiles {
  width:70%;
  position: relative;
  height:300px;
  margin-bottom: 20%;
}

.profile {
  position: absolute;
  left:0px;
  top:0px;
  width:100%;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  cursor:pointer;
  background-image: url('../images/mole-border.png');
  background-size: cover;
  background-position: center center;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.profiles::before {
  content:'';
  color:var(--dark-grey);
  display:flex;
  align-items: center;
  justify-content: center;
  height:100%;
}

.profile.healthy.tuto > .profile-image {
  background-image: url('../images/mole-tuto.png') !important;
}

.profile.healthy.tuto.bad-answer > .profile-image {
  background-image: url('../images/mole-tuto-bad.png') !important;
}

.profile.unhealthy.tuto > .profile-image  {
  background-image: url('../images/melanone-tuto.png') !important;
}

.profile.unhealthy.tuto.bad-answer > .profile-image  {
  background-image: url('../images/melanone-tuto-bad.png') !important;
}

.profile.tuto.bad-answer .profile-image::before {
  background-image: none !important;
}

.profile-image {
  position: relative;
  height: 0;
  padding-bottom:100%;
  background-size: cover;
  background-position: center center;
}

.profile-image::before {
  content:'';
  position: absolute;
  background-size: cover;
  background-position: center center;
  background-image: url('../images/mole-border.png');
  width: 103%;
  height: 103%;
  top: -2%;
  left: -1%;
}

.profile.good-answer .profile-image::before {
  background-image: url('../images/mole-border-right.png');
}

.profile.bad-answer .profile-image::before {
  background-image: url('../images/mole-border-wrong.png');
}

.profile-healthy-answer {
  transition: var(--transition-time);
  transform:translateX(300px) translateY(50px) rotate(60deg);
}

.profile-unhealthy-answer {
  transition: var(--transition-time);
  transform:translateX(-300px) translateY(50px) rotate(-60deg);
}

.profile-back {
  transition:var(--transition-time);
}