@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --bouncy: cubic-bezier(0,2,.75,1);
}

body {
  margin: 0;
  background-color: rgb(25, 25, 25);
  color: white;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
  user-select: none;
}

a {
  text-decoration: none;
  color: white;
}

.version {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  opacity: 0.5;
}

.version:hover {
  text-decoration: underline;
}

#topButtons {
  position: absolute;
  top: 10px;
  left: 10px;
  color: grey;
  z-index: 2;
  transition: opacity ease-in-out 0.5s;
}

.topButton {
  cursor: pointer;
  transition: letter-spacing var(--bouncy) 0.25s;
}

.topButton:hover {
  letter-spacing: 1px;
}

.topButton:active {
  letter-spacing: 0;
}

.menu-container {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 5;
  background-color: rgba(0, 0, 0, 25%);
  backdrop-filter: blur(10px);
  transition: backdrop-filter ease-in-out 0.25s;
}

#menu {
  width: 700px;
  height: 300px;
  padding: 5px;
  display: flex;
  background-color: rgb(40, 40, 40);
  flex-direction: column;
  box-shadow: 2px 2px inset rgb(50, 50, 50), -2px -2px inset rgb(30, 30, 30);
}

#menuHeader, #devtoolsHeader {
  display: flex;
  gap: 10px;
}

#menuHeaderText {
  box-shadow: 2px 2px inset rgb(50, 50, 50), -2px -2px inset rgb(30, 30, 30);
  padding: 5px;
  width: 100%;
  text-align: center;
}

#menuX {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 2px 2px inset rgb(50, 50, 50), -2px -2px inset rgb(30, 30, 30);
}

#menuHeader {
  display: flex;
  justify-content: space-between;
}

.setting {
  display: flex;
  align-items: center;
  margin-top: 10px;
  position: relative;
}

.setting span {
  white-space: nowrap;
}

.settingText {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  line-height: 0.75;
}

.settingText em {
  color: gray;
  font-size: 0.75em;
  white-space: nowrap;
}

.settingLine {
  width: 100%;
  height: 1px;
  background-color: gray;
}

.buttonContainer {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#buttonSave {
  outline: 1px solid white;
  background-color: rgb(20, 20, 20);
  cursor: pointer;
  padding: 0px 50px;
}

#buttonSave:hover {
  filter: brightness(110%);
}

#buttonDelete {
  outline: 1px solid red;
  background-color: rgb(20, 20, 20);
  cursor: pointer;
  padding: 0px 50px;
  margin-top: 10px;
}

#buttonDelete:hover {
  filter: brightness(110%);
}

#stats-container {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
  z-index: 4;
}

#stats {
  height: calc(100vh - 10px);
  width: 700px;
  padding: 10px;
  overflow: scroll;
  background-color: rgb(40, 40, 40);
  box-shadow: 2px 2px inset rgb(50, 50, 50), -2px -2px inset rgb(30, 30, 30);
  z-index: 5;
}

#statProgressBarOverlay {
  height: 100%;
  width: 0;
  transition: width cubic-bezier(.5,0,.25,1) 3s;
  background-color: white;
  border-radius: 5px;
}

.statContainer {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background-color: rgb(40, 40, 40);
  box-shadow: 2px 2px inset rgb(50, 50, 50), -2px -2px inset rgb(30, 30, 30);
}

.stat img {
  width: 65px;
}

.statTitle {
  font-size: 1.5em;
  font-weight: 700;
}

.statText {
  display: flex;
  flex-direction: column;
}

.statMultiplier {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 65px;
  padding: 0 5px;
  background-color: rgb(40, 40, 40);
  box-shadow: 2px 2px inset rgb(50, 50, 50), -2px -2px inset rgb(30, 30, 30);
}

#devtools {
  position: absolute;
  display: none;
  padding: 5px;
  top: 400px;
  z-index: 6;
  background-color: rgb(40, 40, 40);
  box-shadow: 2px 2px inset rgb(50, 50, 50), -2px -2px inset rgb(30, 30, 30);
}

.devButton {
  margin-top: 10px;
  outline: 1px solid grey;
  background-color: rgb(20, 20, 20);
  cursor: pointer;
  display: flex;
  justify-content: center;
}

#achProgressContainer {
  position: absolute;
  top: -100px;
  left: 10px;
  transition: top ease-in-out 0.5s;
}

#achProgress {
  background-color: rgb(35, 35, 35);
  width: 400px;
  padding: 10px;
  border-radius: 5px;
  border: 2px solid rgb(15, 15, 15);
}

#achProgressText {
  display: flex;
  justify-content: space-between;
}

#achProgressBar {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background-color: rgb(30, 30, 30);
}

#achProgressBarOverlay {
  width: 0;
  height: 10px;
  border-radius: 5px;
  background-color: white;
  transition: width ease-in-out 0.5s;
}

.percentAnimate {
  animation: percent 0.5s ease-out 1 forwards;
}

@keyframes percent {
  from {
    font-weight: 900;
    transform: scale(150%);
  }
  to {
    font-weight: 700;
    transform: scale(100%);

  }
}

.achInfo {
  cursor: help;
}

.dialogue-container {
  position: absolute;
  top: 10px;
  width: 100vw;
  height: 125px;
  display: flex;
  justify-content: center;
  align-content: center;
}

#dialogue {
  width: 750px;
  height: 0px;
  display: flex;
  align-items: center;
  padding: 0px;
  overflow: hidden;
  background-image: url(media/portraits/debread/bg.png);
  background-size: 100%;
  transition: height ease-in-out 0.25s, padding ease-in-out 0.25s;
}

#dialogueImg {
  width: 125px;
}

#dialogueName {
  font-size: 1.25em;
  font-weight: 900;
}

.dialogueTxt-container {
  display: flex;
  margin-left: 15px;
  width: 100%;
  height: 100%;
  text-align: left;
  flex-direction: column;
}

.dBig {
  font-size: 1.5em;
  font-weight: 700;
}

.dShake {
  animation: shake 10s ease-in-out infinite;
  display: inline-flex;
}

@keyframes shake {
    0% {transform: translateX(2.4px) translateY(0.8px)}
    1% {transform: translateX(-3.3px) translateY(2.3px)}
    2% {transform: translateX(2.8px) translateY(-3.8px)}
    3% {transform: translateX(1.8px) translateY(-4.7px)}
    4% {transform: translateX(3.5px) translateY(0px)}
    5% {transform: translateX(4.7px) translateY(-4.3px)}
    6% {transform: translateX(-3.2px) translateY(-3.9px)}
    7% {transform: translateX(-1.5px) translateY(4.1px)}
    8% {transform: translateX(-0.1px) translateY(1.2px)}
    9% {transform: translateX(-2.9px) translateY(3.4px)}
    10% {transform: translateX(4.1px) translateY(4.9px)}
    11% {transform: translateX(-1.4px) translateY(-1.3px)}
    12% {transform: translateX(-4.7px) translateY(-1px)}
    13% {transform: translateX(-2.8px) translateY(-4.4px)}
    14% {transform: translateX(-1.1px) translateY(-3.9px)}
    15% {transform: translateX(1px) translateY(-3.1px)}
    16% {transform: translateX(-3.6px) translateY(-0.1px)}
    17% {transform: translateX(3.7px) translateY(-3.6px)}
    18% {transform: translateX(1.6px) translateY(-1.6px)}
    19% {transform: translateX(-3.3px) translateY(4.9px)}
    20% {transform: translateX(-2.9px) translateY(-3.4px)}
    21% {transform: translateX(-1px) translateY(3.3px)}
    22% {transform: translateX(2.5px) translateY(3.4px)}
    23% {transform: translateX(-4px) translateY(-2.1px)}
    24% {transform: translateX(-1.9px) translateY(-2.6px)}
    25% {transform: translateX(-4.3px) translateY(-4.7px)}
    26% {transform: translateX(-1.8px) translateY(-4.9px)}
    27% {transform: translateX(-0.2px) translateY(2.6px)}
    28% {transform: translateX(-2.7px) translateY(-4.7px)}
    29% {transform: translateX(3.4px) translateY(2.4px)}
    30% {transform: translateX(0.3px) translateY(2.2px)}
    31% {transform: translateX(3.5px) translateY(5px)}
    32% {transform: translateX(-4px) translateY(4px)}
    33% {transform: translateX(-3.8px) translateY(3.9px)}
    34% {transform: translateX(4.2px) translateY(0.7px)}
    35% {transform: translateX(-0.1px) translateY(4.6px)}
    36% {transform: translateX(4.9px) translateY(-3.7px)}
    37% {transform: translateX(-4.6px) translateY(-2.8px)}
    38% {transform: translateX(-4.7px) translateY(-1.4px)}
    39% {transform: translateX(3.5px) translateY(-1.4px)}
    40% {transform: translateX(-2.4px) translateY(1.6px)}
    41% {transform: translateX(3.7px) translateY(-0.2px)}
    42% {transform: translateX(-4.6px) translateY(0.1px)}
    43% {transform: translateX(2.6px) translateY(2.5px)}
    44% {transform: translateX(-1.4px) translateY(2.1px)}
    45% {transform: translateX(-4px) translateY(2.5px)}
    46% {transform: translateX(-1px) translateY(4.5px)}
    47% {transform: translateX(-2.4px) translateY(-1px)}
    48% {transform: translateX(-3.5px) translateY(4.6px)}
    49% {transform: translateX(2.2px) translateY(0.6px)}
    50% {transform: translateX(5px) translateY(1.2px)}
    51% {transform: translateX(-3.3px) translateY(-1.9px)}
    52% {transform: translateX(-2.6px) translateY(-1.6px)}
    53% {transform: translateX(-2.9px) translateY(2px)}
    54% {transform: translateX(3.1px) translateY(2.9px)}
    55% {transform: translateX(4.5px) translateY(-0.5px)}
    56% {transform: translateX(0.8px) translateY(1.4px)}
    57% {transform: translateX(2.2px) translateY(-0.5px)}
    58% {transform: translateX(-4.3px) translateY(0.9px)}
    59% {transform: translateX(3.1px) translateY(-2.4px)}
    60% {transform: translateX(-2px) translateY(-3.4px)}
    61% {transform: translateX(-4.9px) translateY(0.5px)}
    62% {transform: translateX(1.8px) translateY(-4.4px)}
    63% {transform: translateX(-4.8px) translateY(0.9px)}
    64% {transform: translateX(4.1px) translateY(0.5px)}
    65% {transform: translateX(1.9px) translateY(4px)}
    66% {transform: translateX(0.3px) translateY(-4.7px)}
    67% {transform: translateX(-3.6px) translateY(-4.9px)}
    68% {transform: translateX(-2.6px) translateY(-3.6px)}
    69% {transform: translateX(1.1px) translateY(0.3px)}
    70% {transform: translateX(-2.3px) translateY(2.5px)}
    71% {transform: translateX(2.6px) translateY(0.9px)}
    72% {transform: translateX(-1.6px) translateY(-4.2px)}
    73% {transform: translateX(-0.3px) translateY(4.4px)}
    74% {transform: translateX(5px) translateY(2.8px)}
    75% {transform: translateX(3.5px) translateY(0.9px)}
    76% {transform: translateX(0.5px) translateY(-2.6px)}
    77% {transform: translateX(1.4px) translateY(-2px)}
    78% {transform: translateX(-1px) translateY(0.5px)}
    79% {transform: translateX(-1.2px) translateY(-2.1px)}
    80% {transform: translateX(-1.3px) translateY(-0.1px)}
    81% {transform: translateX(-3.2px) translateY(3.1px)}
    82% {transform: translateX(-2.1px) translateY(-4.5px)}
    83% {transform: translateX(4px) translateY(3px)}
    84% {transform: translateX(-1.9px) translateY(4.8px)}
    85% {transform: translateX(3.8px) translateY(-1.7px)}
    86% {transform: translateX(-1.9px) translateY(4.7px)}
    87% {transform: translateX(2px) translateY(-1.2px)}
    88% {transform: translateX(-0.1px) translateY(-1.3px)}
    89% {transform: translateX(0.3px) translateY(4px)}
    90% {transform: translateX(-0.7px) translateY(-4.2px)}
    91% {transform: translateX(1.6px) translateY(-4.9px)}
    92% {transform: translateX(-2.6px) translateY(3.5px)}
    93% {transform: translateX(0.2px) translateY(-4.2px)}
    94% {transform: translateX(-3.4px) translateY(-1.7px)}
    95% {transform: translateX(-3.8px) translateY(2px)}
    96% {transform: translateX(0.6px) translateY(-4.5px)}
    97% {transform: translateX(-1.6px) translateY(-3.6px)}
    98% {transform: translateX(-2.7px) translateY(4.8px)}
    99% {transform: translateX(-1.4px) translateY(3.2px)}
    100% {transform: translateX(-2.7px) translateY(1.2px)}
}

.space-container {
  display: flex;
  justify-content: center;
  align-items: end;
  height: 100%;
  width: calc(100% - 25px);
}

#space {
  height: 25px;
  transition: opacity ease-in-out 0.25s;
}

#achievement-container {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100vw - 50px);
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  align-items: center;
  padding: 25px;
  z-index: 2;
  user-select: none;
  pointer-events: none;
}

#achDesc {
  opacity: 1;
  transition: opacity ease-in-out 0.25s;
}

#achievement {
  width: 300px;
  height: 0px;
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 0px;
  background-color: rgb(15, 15, 15);
  transform: scale(150%);
  opacity: 0;
  transition: transform cubic-bezier(1,0,1,1) 0.25s, opacity ease-in-out 0.5s, height ease-in-out 0.25s, padding ease-in-out 0.25s;
}


.achievement-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#achImg {
  background-color: rgba(20, 20, 20);
  width: 50px;
  height: 50px;
}

#achName {
  font-weight: 700;
  font-size: 1.25em;
  height: 22px;
}

.button-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 25px;
  height: 100vh;
  width: 100vw;
}

.clickText {
  position: absolute;
  user-select: none;
  pointer-events: none;
  font-weight: 100;
  opacity: 0.5;
  text-align: center;
  transform: translateX(0) translateY(-5px) scale(0) rotate(0);
  transition: transform cubic-bezier(.75,.25,.75,.25) 0.25s, font-weight cubic-bezier(.75,.25,.75,.25) 0.25s, opacity ease-in-out 0.5s;
}

.button {
  width: 300px;
  cursor: pointer;
  transition: transform cubic-bezier(0,2,.75,1) 0.25s;
}

.button:hover {
  transform: scale(105%);
}

.button:active {
  transform: scaleY(90%) scaleX(110%);
}

.button-shine {
  position: absolute;
  width: 25vw;
  z-index: -1;
  opacity: 0;
}

#clicks {
  font-size: 2em;
  font-weight: 700;
}

#powerBarTXT {
  position: absolute;
  bottom: 15px;
  left: 5px;
}

#powerBarMultiplier {
  position: absolute;
  bottom: 15px;
  right: 5px;
  font-weight: 450;
  font-size: 2em;
}

.powerBar-container {
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 10px;
  background-color: rgb(20, 20, 20);
}

#powerBar {
  height: 10px;
  width: 0;
  background-color: white;
  transition: width linear 150ms;
}

#powerBar2 {
  position: absolute;
  height: 10px;
  width: 0;
  background-color: black;
  animation: rainbowGlow 1s linear infinite forwards;
  transition: width linear 150ms;
}

@keyframes rainbow {
  0% {
    background: linear-gradient(0.25turn, #ff5e5e, #ff9f5e, #ffe45e, #a4ff5e, #5eafff, #a15eff);
  }
  16.6% {
    background: linear-gradient(0.25turn, #a15eff, #ff5e5e, #ff9f5e, #ffe45e, #a4ff5e, #5eafff);
  }
  33.3% {
    background: linear-gradient(0.25turn, #5eafff, #a15eff, #ff5e5e, #ff9f5e, #ffe45e, #a4ff5e);
  }
  50% {
    background: linear-gradient(0.25turn, #a4ff5e, #5eafff, #a15eff, #ff5e5e, #ff9f5e, #ffe45e);
  }
  66.6% {
    background: linear-gradient(0.25turn, #ffe45e, #a4ff5e, #5eafff, #a15eff, #ff5e5e, #ff9f5e);
  }
  83.2% {
    background: linear-gradient(0.25turn, #ff9f5e, #ffe45e, #a4ff5e, #5eafff, #a15eff, #ff5e5e);
  }
  100% {
    background: linear-gradient(0.25turn, #ff5e5e, #ff9f5e, #ffe45e, #a4ff5e, #5eafff, #a15eff);
  }
}

@keyframes rainbowGlow {
  0% {
    box-shadow: #ff5e5e 0px 0px 10px 0px;
  }
  16.6% {
    box-shadow: #ff9f5e 0px 0px 10px 0px;
  }
  33.3% {
    box-shadow: #ffe45e 0px 0px 10px 0px;
  }
  50% {
    box-shadow: #a4ff5e 0px 0px 10px 0px;
  }
  66.6% {
    box-shadow: #5eafff 0px 0px 10px 0px;
  }
  83.2% {
    box-shadow: #a15eff 0px 0px 10px 0px;
  }
  100% {
    box-shadow: #ff5e5e 0px 0px 10px 0px;
  }
}