style.scss

/* LAYOUT GENERAL */

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  font-family: "Times New Roman", Times, serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #1d6185;
  background-image: url(assets/scribble-light.png);
}

header {
  @include flexInFlex;

  align-self: flex-start;
  width: 100vw;
  min-height: 120px;
  z-index: 1;
}

h1 {
  position: absolute;
  margin-left: 57%;
  z-index: -1;
  top: 2px;
  font-family: "HomemadeApple-Regular.ttf", serif;
  font-size: 3.5rem;
  line-height: 6rem;
  color: rgb(86, 192, 234);
  text-shadow: 3px 4px 5px #000;
  user-select: none;
}

.nomPatisserie {
  position: absolute;
  left: 64%;
  top: 140px;
  font-family: "HomemadeApple-Regular.ttf", serif;
  font-size: 6rem;
  line-height: 6rem;
  color: rgb(86, 192, 234);
  text-shadow: 3px 4px 5px #000;
  user-select: none;
  z-index: -1;
}

main {
  @include flexInFlex;
  margin: 0 auto;
  height: 90vh;
  width: 100vw;
}

/* COOKIE SIDE */

#zoneCookie {
  @include flexInFlex;
  justify-items: start;
  width: 50vw;
  height: 75vh;
}

.cookiePose {
  @include flexInFlex();
  position: absolute;
  z-index: 0;
  opacity: 0.6;
  left: 4rem;
}

.cookieBtn {
  position: absolute;
  margin: 15rem 6rem;
  background: none;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(145, 92, 182, 0.4);
  animation: rotation 50s infinite linear;
  /* Propriétés animation regroupées */
}

#zoneCookie img {
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
  opacity: 1;
}

#bonusTimeDisplay {
  position: absolute;
  visibility: hidden;
  margin: 16rem 7.3rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.5);
  color: yellow;
  font-size: 2rem;
  align-content: center;
  border-radius: 50%;
  height: 275px;
  width: 275px;
  z-index: 1;
  user-select: none;
}

#bonusBtn {
  position: absolute;
  background: none;
  border: none;
  z-index: 1;
  left: 85%;

  img {
    width: 150px;
  }

  cursor: grab;
  animation: rotation 50s infinite linear;
}

#costBonusDisplay {
  font-family: "Merriweather-Regular.ttf", serif;
  color: yellow;
  font-weight: 900;
  position: absolute;
  background: none;
  border: none;
  z-index: 1;
  left: 92%;
  top: -20px;
}

/* ZONE DROITE */

#zoneInfos {
  @include flexInFlex;
  flex-direction: column;
  width: 50vw;
  height: 75vh;
}

/* MULTIPLIER SHOP */

.multiplierShop {
  @include flexInFlex;
  z-index: 1;
  margin-left: 10%;
  margin-top: 18%;
  background-color: #174883;
  padding: 20px 40px;
  border-radius: 18px;
  border: 6px rgb(10, 157, 210);
  border-style: ridge;
  max-height: 100px;
  max-width: 650px;
  white-space: nowrap;
  background-image: url(assets/lined-paper-2.png);

  button {
    @include multiplierBtns();
    cursor: pointer;

    img {
      position: relative;
      margin: auto;
      max-height: 70px;
      object-fit: cover;
      justify-self: start;
    }
  }

  /* BUTTONS ACTIVE PROPERTIES */
  .tooltip .tooltiptext {
    @include tooltipMultiplierDesign();
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  #clickMultiplier {
    background-color: rgb(0, 155, 176);
    border-color: rgb(1, 85, 96);

    .tooltip .tooltiptext {
      margin-left: 15rem;
    }
  }

  #elmoMultiplier {
    background-color: rgb(187, 29, 29);
    border-color: rgb(102, 16, 16);

    .tooltip .tooltiptext {
      margin-left: -10rem;
    }
  }

  #birdieMultiplier {
    background-color: rgb(200, 190, 15);
    border-color: yellow;

    .tooltip .tooltiptext {
      margin-left: -17rem;
    }
  }

  #oscarMultiplier {
    background-color: rgb(40, 127, 40);
    border-color: rgb(0, 80, 17);

    .tooltip .tooltiptext {
      margin-left: -24rem;
    }
  }

  #groverMultiplier {
    background-color: rgb(0, 0, 197);
    border-color: rgb(0, 0, 107);

    .tooltip .tooltiptext {
      margin-left: -31rem;
    }
  }

  #ernieMultiplier {
    background-color: rgb(230, 136, 21);
    border-color: rgb(134, 78, 10);

    .tooltip .tooltiptext {
      margin-left: -37rem;
    }
  }

  img {
    @include imageMultiplierDesign();
  }

  #costClickMultiplierDisplay,
  #costElmoMultiplierDisplay,
  #costBirdieMultiplierDisplay,
  #costOscarMultiplierDisplay,
  #costGroverMultiplierDisplay,
  #costErnieMultiplierDisplay {
    @include costMultiplierDesign();
  }

  #countClickMultiplierDisplay,
  #countElmoMultiplierDisplay,
  #countBirdieMultiplierDisplay,
  #countOscarMultiplierDisplay,
  #countGroverMultiplierDisplay,
  #countErnieMultiplierDisplay {
    @include countMultiplierDesign();
  }

  button:disabled {
    background-color: rgb(1, 48, 48);
  }
}

/* SCORE DISPLAY */

.scoreDisplay {
  position: relative;
  font-family: "Merriweather-Regular.ttf", serif;
  font-size: 4rem;
  margin-left: 27%;
  margin-top: 18%;
  white-space: nowrap;
}

.clickPerSecondDisplay {
  position: relative;
  font-family: "Merriweather-Regular.ttf", serif;
  font-size: 1.5rem;
  margin-left: 27%;
  margin-top: 0;
  white-space: nowrap;
}

/* AUTO CLICK SHOP DISPLAY */

.autoclickShop {
  border-top: 5px ridge;
  border-top-color: rgb(10, 157, 210);
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 18vh;
  bottom: 25px;
  background-color: #174883;
  background-image: url(assets/lined-paper-2.png);

  button {
    @include autoclickerBtns();

    img {
      position: relative;
      margin: auto;
      max-height: 110px;
      object-fit: cover;
      justify-self: start;
    }
  }

  #costElmoDisplay,
  #costBirdieDisplay,
  #costOscarDisplay,
  #costGroverDisplay,
  #costErnieDisplay {
    @include costAutoclickerDesign();
  }

  #countElmoDisplay,
  #countBirdieDisplay,
  #countOscarDisplay,
  #countGroverDisplay,
  #countErnieDisplay {
    @include countAutoclickerDesign();
  }

  image {
    @include imageAutoclickerDesign();
  }
}

/* TOOLTIP */
.tooltip2 .tooltiptext2 {
  @include tooltipMultiplierDesign;
  visibility: hidden;
  z-index: 1;
}

.tooltip2:hover .tooltiptext2 {
  visibility: visible;
}

/* FOOTER */

footer {
  position: absolute;
  width: 100%;
  height: 30px;
  margin: 0 auto;
  bottom: 0px;
  background-color: #143f73;
  align-content: center;
}

legend {
  color: white;
  text-align: center;
}

legend a {
  color: yellow;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* INTRO TUTO POP UP */

.popUp {
  position: absolute;
  visibility: visible;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-image: url("assets/sesam_popup4.webp");
  background-size: cover;
  overflow: hidden;
}

.popUpText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #44903f;
  display: block;
  border: 0.9em solid #fad949;
  border-radius: 0.25em;

  box-sizing: border-box;
  text-shadow: 0.03125em 0.03125em 0 rgba(0, 0, 0, 0.25);
  line-height: 1;
  box-shadow: inset 0.6em 0.5em rgba(0, 0, 0, 0.25), 0.3em 0.3em #c6ab39,
    0.5em 0.3em 0.5em rgba(0, 0, 0, 0.25);
  padding-bottom: 1%;
}

.popUp h2 {
  position: relative;
  font-size: 4vw;
  font-family: "Barlow condensed", sans-serif;
  font-weight: 800;
  text-align: center;
  min-width: 3em;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  text-shadow: 0.025em 0.0625em 0 rgba(0, 0, 0, 0.25);
  margin: 4vw;
  padding: 0.125em 0.25em 0.3em;
  line-height: 1.2;
  word-break: break-word;
}

.popUp p {
  font-family: "Barlow condensed", sans-serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
  padding: 10px;
  margin: 12px;
  word-break: break-word;
  text-align: left;
  font-weight: 800;
}

.popUp li {
  font-family: "Barlow condensed", sans-serif;
  font-size: 14px;
  font-weight: 200;
  padding-bottom: 7px;
  letter-spacing: 0.22;
}

label {
  padding: 6%;
  font-size: 13px;
  font-family: "Barlow condensed", sans-serif;
  font-weight: 200;
  text-align: center;
  padding-bottom: 20px;
}

/* BUTTON TUTO */

#showPopUp {
  position: absolute;
  z-index: 1;
  padding: 0 2rem;
  background: none;
  border: dotted 2px yellow;
  font-family: "HomemadeApple-Regular.ttf", serif;
  font-size: 2rem;
  color: yellow;
  left: 85%;
  top: 81.5%;
  cursor: pointer;
}

#showPopUp:hover {
  background-color: rgba(255, 255, 0, 0.3);
}

.btnDisabled {
  background-color: rgb(1, 48, 48);
  opacity: 0.5;
}

.tooltip2 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip2 .tooltiptext2 {
  @include tooltipMultiplierDesign;
  visibility: hidden;
  top: -180px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip2:hover .tooltiptext2 {
  visibility: visible;
}