.hero-homepage-content {
  min-height: 88vh;
}
.hero-homepage-content .hero-homepage-content_fix {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 0%;
}
.hero-homepage-content:has(.countdown) {
  height: 100vh;
}
.hero-homepage-content .hero-homepage-content_fix:has(.countdown) {
  min-height: 100vh;
  max-height: 100vh;
}
.homepage.home-game-over .hero-homepage-content,
.homepage.home-game-over .hero-homepage-content .hero-homepage-content_fix {
  height: 100vh;
}

.hero-homepage-content h1 {
  margin-inline: 1.25rem;
  /* margin-block-end: 46.54dvh; */
  padding-block-start: 6rem;
  font-size: 2.25rem;
  color: var(--white);
  text-transform: uppercase;
  text-align: center;
  text-shadow: #A5703A 0px 3px 4px;
  line-height: 1.1;
  /* transform:translateX(calc(var(--translate-direction) * .5rem)); */
}
.hero-homepage-content h1 b,
.hero-homepage-content h1 strong {
  display: block;
  font-size: 2.875rem;
  font-family: 'modish';
  text-transform: capitalize;
  color: var(--white);
  font-weight: normal;
}
.hero-homepage-content .desktop-image {
  display: none;
}
.hero-homepage-content .mobile-image {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.hero-homepage-content .mobile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-homepage-content .toggle-play {
  display: inline-flex;
  position: relative;
  max-width: calc(100% - 2.5rem);
  color: var(--brown);
  background: var(--white);
  padding:1.25rem;
  padding-inline: 5.1875rem 1.875rem;
  margin-block-end: 2rem;
  border-radius: 1.875rem;
  font-family: 'sofia-pro';
}
.hero-homepage-content .toggle-play::before {
  content: "";
  background: url('../../images/praline/praline-top.png') no-repeat;
  background-size: 3.25rem 3.25rem;
  display: block;
  position: absolute;
  width: 3.25rem;
  height: 3.25rem;
  top: calc(50% - 1.625rem);
  inset-inline-start: .3125rem;
  z-index: 1;
  transition: 0.4s;
  animation-duration: 5s;
  animation-name: slideInTwice;
  animation-delay: 2s;
}
@keyframes slideIn {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(var(--translate-direction) * 1rem));
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInTwice {
  from {
    transform: translateX(0);
  }
  16% {
    transform: translateX(calc(var(--translate-direction) * .5rem));
  }
  33% {
    transform: translateX(0);
  }
  49% {
    transform: translateX(calc(var(--translate-direction) * .5rem));
  }
  66% {
    transform: translateX(0);
  }
  82% {
    transform: translateX(calc(var(--translate-direction) * .5rem));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideToBtnBorder {
  from {
    inset-inline-start: 0;
  }
  to {
    inset-inline-start: calc(100% - 57px);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.hero-homepage-content .toggle-play::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - .8125rem);
  inset-inline-start: 2.9375rem;
  width: 1.625rem;
  height: 1.625rem;
  background: url('../../images/svg/icons/move-right.svg') no-repeat;
  background-size: 1.625rem 1.625rem;
}
.hero-homepage-content .toggle-play:hover {
  text-decoration: none;
}
.hero-homepage-content .toggle-play:hover::before {
  animation: slideIn .75s linear;
}
.hero-homepage-content .toggle-play.toggled span {
  animation: fadeOut .3s linear;
  animation-fill-mode: forwards;
  animation-delay: .25s;
}
.hero-homepage-content .toggle-play.toggled::after {
  animation: fadeOut .3s linear;
  animation-fill-mode: forwards;
  animation-delay: .125s;
}
.hero-homepage-content .toggle-play.toggled::before {
  animation: slideToBtnBorder .5s linear;
  animation-fill-mode: forwards;
}

html[dir="rtl"] .hero-homepage-content .toggle-play::after  {
  background: url('../../images/svg/icons/move-left.svg') no-repeat;
  background-size: 1.625rem 1.625rem;
}
/* If the Game is not started yet */
.hero-homepage-content .countdown {
  position: relative;
  margin-block-end: 1.25rem;
  min-width: calc(100% - 2.5rem);
  color: var(--brown);
  text-align: center;
}
/* When the game is over */
.hero-homepage-content .after-information {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline-start: 50%;
  min-width: calc(100% - 2.5rem);
  transform: translateX(calc(var(--translate-direction)* -50%));
  color: var(--brown);
  text-align: center;
}
.hero-homepage-content .after-information .after-information_title {
  font-size: .9375rem;
  line-height: 1.33;
  font-weight: 700;
}
.hero-homepage-content .after-information .after-information_link {
  display: inline-block;
  margin-block-start: 0.625rem;
}
/* button position */
/* 360x640 2.77% */
@media screen and (min-width:360px) and (min-height:640px){
  .hero-homepage-content .toggle-play {
    margin-block-end: 2rem;
  }
  .hero-homepage-content .countdown {
    margin-block-end: 3rem;
  }
}
/* 360x660 iphone12 */
@media screen and (min-width:360px) and (min-height:660px){
  .hero-homepage-content .toggle-play {
    margin-block-end: 3.5rem;
  }
  .hero-homepage-content .countdown {
    margin-block-end: 3.25rem;
  }
}
/* 360x780 4.03% */
@media screen and (min-width:360px) and (min-height:780px){
  .hero-homepage-content .toggle-play {
    margin-block-end: 5rem;
  }
  .hero-homepage-content .countdown {
    margin-block-end: 4rem;
  }
}
/* 360x800 11.29% */
@media screen and (min-width:360px) and (min-height:800px){
  .hero-homepage-content .toggle-play {
    margin-block-end: 5.25rem;
  }
  .hero-homepage-content .countdown {
    margin-block-end: 4rem;
  }
}
/* 375x812 3.34% */
@media screen and (min-width:375px) and (min-height:812px){
  .hero-homepage-content .toggle-play {
    margin-block-end: 5.25rem;
  }
  .hero-homepage-content .countdown {
    margin-block-end: 4.5rem;
  }
}
/* 385x854 3.17% */
@media screen and (min-width:385px) and (min-height:854px){
  .hero-homepage-content .toggle-play {
    margin-block-end: 5.5rem;
  }
  .hero-homepage-content .countdown {
    margin-block-end: 5rem;
  }
}
/* 390x844 7.22% */
@media screen and (min-width:390px) and (min-height:844px){
  .hero-homepage-content .toggle-play {
    margin-block-end: 5.5rem;
  }
  .hero-homepage-content .countdown {
    margin-block-end: 4.75rem;
  }
}
/* 393x873 5.43% */
@media screen and (min-width:393px) and (min-height:873px){
  .hero-homepage-content .toggle-play {
    margin-block-end: 5.5rem;
  }
  .hero-homepage-content .countdown {
    margin-block-end: 4.75rem;
  }
}
/* 412x915 4.76% */
@media screen and (min-width:412px) and (min-height:915px){
  .hero-homepage-content .toggle-play {
    margin-block-end: 6rem;
  }
  .hero-homepage-content .countdown {
    margin-block-end: 5.25rem;
  }
}
/* 414x896 4.93% */
@media screen and (min-width:414px) and (min-height:896px){
  .hero-homepage-content .toggle-play {
    margin-block-end: 5.75rem;
  }
  .hero-homepage-content .countdown {
    margin-block-end: 5.25rem;
  }
}
/* 428x926 2.88% */
@media screen and (min-width:428px) and (min-height:926px){
  .hero-homepage-content .toggle-play {
    margin-block-end: 6rem;
  }
  .hero-homepage-content .countdown {
    margin-block-end: 5.75rem;
  }
}
@media screen and (min-width:64rem){
  .hero-homepage-content {
    height: 100dvh;
  }
  .hero-homepage-content .hero-homepage-content_fix {
    min-height: 100dvh;
    max-height: 100dvh;
  }
  .hero-homepage-content .toggle-play {
    margin-block-end: 2.5rem;
  }
  .hero-homepage-content .countdown {
    margin-block-end: 1rem;
  }
  .hero-homepage-content h1 b,
  .hero-homepage-content h1 strong {
    font-size: 4.375rem;
  }
  .hero-homepage-content .mobile-image {
    display: none;
  }
  .hero-homepage-content .desktop-image {
    display: block;
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
  }
  .hero-homepage-content .desktop-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-homepage-content h1 {
    margin-inline: 6.25rem;
    padding-block-start: 6.25rem;
    /* margin-block-end: 60.34dvh; */
    font-size: 1.8125rem;
  }
  .hero-homepage-content .after-information {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    background: var(--brown);
    color: white;
    min-width: 50%;
    max-width: 50%;
    height: 100dvh;
    transform: translateX(0);
      display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-inline: 7.5rem;
  }
  .hero-homepage-content .after-information .after-information_title {
    font-size:2.8125rem;
    line-height:1;
    padding-block-end: 1.25rem;
    text-transform: uppercase;
  }
  .hero-homepage-content .after-information .after-information_link {
    margin-block-start: 1.25rem;
  }
}