@font-face {
     font-family: GothamBook;
     src: url(media/Gotham-Book7f34eb053257cab413dc.otf);
}

@font-face {
     font-family: GothamBlack;
     src: url(media/Gotham-Black520408fe3462b1d14d05.otf);
}

@font-face {
     font-family: GothamMedium;
     src: url(media/Gotham-Mediuma52599fa8cce74bab773.otf);
}

@font-face {
     font-family: GothamBookItalicBold;
     src: url(media/Gotham-UltraItalic5abd054d2b25ba33bb97.otf);
}

@font-face {
     font-family: GothamBlackItalic;
     src: url(media/Gotham-BlackItalic3a3952ba0ca9bf838527.otf);
}

* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     font-family: GothamBook;
     color: black;
     user-select: none;
}

body {
	user-select: none;
}
   
b {
     font-family: GothamMedium;
}

button {
     padding: 0.5em;
     cursor: pointer;
     text-transform: uppercase;
     background-color: #030303;
     border: none;
     font-size: 1.2rem;
     width: 70%;
     max-width: 200px;
     height: 50px;
     font-weight: bold;
     color: white;
     transition: background-color .6s;
}

button:disabled {
     background-color: white;
     color: #989898;
}

body {
     display: flex;
     width: 100vw;
     height: 100vh;
     margin: 0;
     overflow: hidden;
     justify-content: center;
     background-color: white;
}

.intro, .game, .discover {
     width: 100%;
     height: 100%;
     max-width: 500px;
}

.top-container {
     width: 100%;
     height: 25%;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
}

.top-container img {
     height: 30%;
     object-fit: contain;
}

.top-container .header, .top-container .header > * {
     position: relative;
     font-family: GothamMedium;
     text-transform: uppercase;
     font-size: 1.6rem;
     text-align: center;
}

.top-container .header .shadow {
     font-family: GothamMedium;
}

.top-container .header .shadow::after {
     content: "";
     position: absolute;
     font-family: GothamMedium;
     opacity: 0.08;
     font-size: 2.4rem;
}

.top-container .header.step-one .shadow::after {
     content: "who";
     top: -34%;
     left: 6.5%;
}

.top-container .header.step-two .shadow::after {
     content: "day";
     top: -38%;
     right: 6%;
}

.top-container .header.step-three .shadow::after {
     content: "boss";
     bottom: -38%;
     left: 20%;
}

.top-container .header.step-four .shadow::after {
     content: "prefer";
     bottom: -38%;
     right: 12.5%;
}

.top-container .header .shadow::after {
     content: "";
     position: absolute;
     font-family: GothamMedium;
}

.middle-container {
     height: 60%;
}

.bottom-container {
     height: 15%;
     display: flex;
     justify-content: center;
     align-items: center;
}

.intro .middle-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.container .step.step-one {
     width: 80%;
}

.game.step-one .step:not(.step-one),
.game.step-two .step:not(.step-two),
.game.step-three .step:not(.step-three),
.game.step-four .step:not(.step-four)
{
     display: none;
}

.game .bottom-bg {
     width: 100vw;
     height: 75%;
     position: absolute;
     top: 25%;
     background-color: #4B2B18;
     z-index: -1;
     right: 0;
     left: 0;
} 

.game .middle-container {
     width: 100%;
     height: 60%;
     display: flex;
     flex-direction: column;
     align-items: center;
}

.game .middle-container .levels {
     width: 80%;
     height: 10%;
     display: grid;
     justify-content: center;
     column-gap: 3%;
     grid-template-columns: repeat(4, 22%);
     padding-top: 1%;
}

.game .middle-container .levels span {
     max-height: 5px;
     background-color: white;
     border-radius: 5%/70%;
}

.game.step-one .middle-container .levels span:nth-child(1) {
     max-height: 6px;
     background-color: black;
}

.game.step-two .middle-container .levels span:nth-child(2) {
     max-height: 6px;
     background-color: black;
}

.game.step-three .middle-container .levels span:nth-child(3) {
     max-height: 6px;
     background-color: black;
}

.game.step-four .middle-container .levels span:nth-child(4) {
     max-height: 6px;
     background-color: black;
}
.game .middle-container .container {
     width: 100%;
     height: 90%;
     display: flex;
     justify-content: center;
     align-items: center;
}

.game .middle-container .container .step {
     width: 100%;
     height: 100%;
}

.container .step.step-one, .container .step.step-two {
     display: flex;
     width: 80%;
     height: 80%;
     justify-content: space-evenly;
     align-items: center;
}

.game .middle-container .container .step-one .choice {
     position: relative;
     width: 35%;
     background-color: white;
     text-transform: uppercase;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     aspect-ratio: 1/1;
}

.game .middle-container .container .step-one .choice.choosed {
     background-color: black;
}

.game .middle-container .container .step-one .choice span {
     pointer-events: none;
}

.game .middle-container .container .step-one .choice.choosed span {
     color: white;
     font-family: GothamMedium;
}

.switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 30px;
     position: absolute;
     top: 3%;
     right: 0%;
     transform: scale(0.7);
}
   
.switch input { 
     opacity: 0;
     width: 0;
     height: 0;
}
   
.slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 34px;
     background-color: black;
     -webkit-transition: .4s;
     transition: .65s;
}
   
.slider:before {
     position: absolute;
     content: "";
     height: 22px;
     width: 22px;
     left: 6px;
     bottom: 4px;
     border-radius: 50%;
     background-color: white;
     -webkit-transition: .4s;
     transition: .65s;
}

.game .middle-container .container .step-one .choice .slider:after {
     position: absolute;
     content: "";
     height: 20px;
     width: 18px;
     left: 8px;
     bottom: 0px;
     background-image: url(media/check13738b9dbfaa18ec8630.png);
     background-size: contain;
     background-repeat: no-repeat;
     opacity: 0;
     transition: .35s;
}

.game .middle-container .container .step-one .choice.choosed .slider:after {
     opacity: 1;
}
   
.game .middle-container .container .step-one .choice.choosed input + .slider {
     background-color: white;
}

.game .middle-container .container .step-one .choice.choosed input + .slider:before {
     background-color: black;
     -webkit-transform: translateX(26px);
     -ms-transform: translateX(26px);
     transform: translateX(26px);
}

input[type="range"] {
     width: 100%;
     max-width: 20px;
     height: 100%;
     border-radius: 90%/5%;
     background: black;
     outline: none;
     writing-mode: bt-lr; /* IE */
     -webkit-appearance: slider-vertical; /* Chromium */
}

input::-moz-range-track {
     background: #ccc;
     border: 0;
}

input::-moz-focus-inner { 
     border: 0; 
}
   
.game .middle-container .container .step-two {
     height: 100%;
     width: 60%;
}

.game .middle-container .container .step-two .values {
     height: 100%;
     display: flex;
     flex-direction: column-reverse;
     justify-content: space-between;
}

.game .middle-container .container .step-two .values > span {
     color: white;
     text-transform: uppercase;
}

.game .middle-container .container .step-two .day-slider {
     height: 100%;
     width: 60%;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
}
   
input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 15px;
     height: 15px;
     background: white;
     border-radius:50px;
     cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
     background-color: black;
     border-radius: 0.5rem;
     height: 0.5rem;  
}

input[type="range"]::-moz-range-thumb {
     border: none;
     border-radius: 50%;
     background-color: #ffffff;
     height: 0.9rem;
     width: 0.9rem;
}

input[type="range"]::-moz-range-track {
     background-color: #000000;
     border-radius: 0;
     height: 0;
}

input[value="1"] + .values span:nth-child(1),
input[value="2"] + .values span:nth-child(2),
input[value="3"] + .values span:nth-child(3),
input[value="4"] + .values span:nth-child(4)
{
     font-family: GothamBlack;
}

.container .step.step-three {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}

.step.step-three .boss-man-slider {
     width: 80%;
     height: 80%;
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.step.step-three .boss-man-info {
     width: 100%;
     height: 15%;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
}

.step.step-three .boss-man-slider .mans {
     width: 65%;
     height: 95%;
     overflow: hidden;
     display: flex;
     align-items: center;
     position: relative;
}

.step.step-three .boss-man-slider .mans > img {
     width: 100%;
     object-fit: cover;
     position: absolute;
     opacity: 0;
     transition: opacity .3s;
     aspect-ratio: 1/1;
}

.step.step-three .boss-man-slider .mans[value="1"] > img:nth-child(1),
.step.step-three .boss-man-slider .mans[value="2"] > img:nth-child(2),
.step.step-three .boss-man-slider .mans[value="3"] > img:nth-child(3),
.step.step-three .boss-man-slider .mans[value="4"] > img:nth-child(4)
{
     opacity: 1;
}

.step.step-three .boss-man-slider .arrow {
     width: 15%;
     object-fit: contain;
     opacity: 1;
     transition: opacity .3s;
     cursor: pointer;
}

.step.step-three .boss-man-slider .arrow.disabled {
     opacity: 0.3;
}

.step.step-three .boss-man-slider .left-arrow {
     transform: rotateZ(180deg);
}

.step.step-three .boss-man-info .type-of-man {
     text-transform: uppercase;
     color: white;
     font-family: GothamMedium;
}

.step.step-three .boss-man-info .nb-man {
     color: white;
     font-size: 0.7rem;
}

.container .step.step-four {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}

.container .step.step-four .pair {
     width: 80%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
}

.container .step.step-four .pair .choice {
     width: 100%;
     height: 35%;
     display: flex;
     justify-content: center;
     align-items: center;
     text-transform: uppercase;
     font-size: 1.2rem;
     color: black;
     background-color: white;
     position: relative;
     overflow: hidden;
     /* transition: background-color 0.7s ease-in-out; */
}

.container .step.step-four .pair.second-choice .choice {
     height: 25%;
}

.container .step.step-four .pair .choice img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     display: none;
     transition: opacity 0.7s ease-in-out;
     pointer-events: none;
}

.container .step.step-four .pair .choice span {
     z-index: 1;
     pointer-events: none;
}

.container .step.step-four .pair .choice.selected {
     background-color: black;
}

.container .step.step-four .pair .choice.selected img {
     display: unset;
     opacity: 1;
}

.container .step.step-four .pair .choice.selected span {
     color: white;
     font-family: GothamMedium;
}

.container .step.step-four .pair:nth-child(1) .choice:nth-child(1) img {
     width: 60%;
     right: 0;
     left: auto;
}

.container .step.step-four .pair:nth-child(1) .choice:nth-child(2) img {
     top: 50%;
}

.container .step.step-four .pair:nth-child(2) .choice:nth-child(1) img {
     width: 30%;
     right: 0;
     left: auto;
}

.container .step.step-four .pair:nth-child(2) .choice:nth-child(2) img {
     width: 30%;
}

.container .step.step-four .pair:nth-child(2) .choice:nth-child(3) img {
     width: 20%;
     right: 5%;
     left: auto;
}

.container .step.step-four .pair:nth-child(2) .choice:nth-child(4) img {
     width: 30%;
     left: 5%;
}

.discover {
     display: flex;
     flex-direction: column;
     align-items: center;
}

.discover .header {
     font-family: GothamMedium;
     text-transform: uppercase;
     font-size: 1.6rem;
     text-align: center;
}

.discover .middle-content {
     width: 100%;
     height: 83%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-evenly;
}

.discover .top-container {
     height: 15%;
}

.discover .top-container img {
     height: 60%;
}

.discover .middle-content .description {
     width: 65%;
     display: flex;
     text-align: center;
     justify-content: center;
     font-size: 0.6rem;
     line-height: 1.05rem;
     /* white-space: nowrap; */
}

.discover .middle-content .discover-bottle {
     width: 65%;
     height: 50%;
     position: relative;
}

.discover .middle-content .discover-bottle img.bg {
     width: 100%;
     height: 100%;
     object-fit: contain;
}

.discover .middle-content .discover-bottle img.bottle {
     position: absolute;
     width: 50%;
     height: 50%;
     object-fit: contain;
     top: 25%;
     right: 25%;
     transform: scale(1.4);
}

.discover .middle-content .boss-bottled {
     font-family: GothamMedium;
     font-size: 1.2rem;
}

.discover .middle-content .boss-bottled span {
     font-family: GothamMedium;
     color: #987147;
}

.discover .middle-content button {
     font-size: 1rem;
}