/* © LimitFinity 2025 */
/*                                                          
                       ...::::::::...                       
                  .::------------------::.                  
               .:--------------------------:.               
            .:---==++****++=------------------:.            
          .:----####******###=------------------:.          
         :-------=--------------------------------:         
        --------------=------------==+++*+++==------.       
       -------------*###*=--------=######**####*-----.      
      -------------+#####*-----------*####+--=+=------      
     :-------------+#####*----------+######-----------:     
    .---------------=*#*+------------#####*------------.    
    :---------------------------------+**=-------------:    
    ----------------------------------------------------    
    ----------------------------------------------------    
    :------------=+++=----------------------------------    
    .-------------++++=-+#######*++--------------------:    
     -------------+++++-=++====++*###=-----------------     
     .-----------=+++++------------=+=----------------:     
      :---------=+++++=--------====+++++=------------:      
       :------=++++++=====+++++++++++++==-----------:       
        .---=++++++++++++++++++====----------------:        
          :-+++++++++++++++++++=-----------------:.         
           :+++++++++++++++++++=---------------:.           
            +++++++++++++++++++=-------------:.             
            -++++++++++++++++++=----------:.                
             :++++++++++++++++=-----::..                    
              .-++++++++++++++-.                            
                 .:-===--::..                               
                                                          */
@font-face {
  font-family: ThinkFont;
  src: url('../fonts/font.otf');
}

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-user-select:none;
  user-select:none;
}

#bkg {
  z-index: -100;
  height: 100%;
  width: 100%;
  background-color: #ffcea8;
  animation: backgroundanim 40s ease infinite;
  position: absolute;
  left: 0;
  top: 0;
}

#flash {
  z-index: 1000;
  height: 100%;
  width: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  display: none;
  transition: opacity 1s ease;
}

#shadow {
  z-index: 999;
  height: 100%;
  width: 100%;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease;
}

#shadow img {
  height: 100%;
  width: 100%;
}

#speed {
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(2);
  transition: transform 1s ease;
  z-index: -99;
}

#bounce {
  z-index: 10;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: ThinkFont;
  position: relative;
  transition: transform 6.25s ease-in, filter 6.25s ease-in;
  animation-iteration-count: 1;
}

@keyframes backgroundanim {

  0%,
  100% {
    background-color: #ffcea8;
  }

  10% {
    background-color: #aefdf8;
  }

  20% {
    background-color: #81e196;
  }

  30% {
    background-color: #f682b8;
  }

  40% {
    background-color: #d9ff96;
  }

  50% {
    background-color: #a69ff4;
  }

  60% {
    background-color: #a69ff4;
  }

  70% {
    background-color: #d3a1a7;
  }

  80% {
    background-color: #efe4a6;
  }

  90% {
    background-color: #80e5f8;
  }
}

#after {
  display: none;
}

.container {
  max-width: 800px;
  text-align: center;
}

.animationup {
  animation-name: floatup;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

@keyframes floatup {
  0% {
    transform: translateY(0);
    
  }

  50% {
    transform: translateY(-50px);
  }

  100% {
    transform: translateY(0);
  }
}

.animationdown {
  animation-name: floatdown;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes floatdown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(50px);
  }

  100% {
    transform: translateY(0);
  }
}

#accessory {
  position: absolute;
  width: 100px;
  height: 100px;
  top: -80%;
  left: 5%;
  display: none;
}

#lowaccessory {
  position: absolute;
  width: 100px;
  height: 50px;
  top: 75%;
  left: 5%;
  display: none;
}

h1,
h2 {
  font-family: ThinkFont;
  color: #333;
  z-index:99;
  position:relative;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 16px;
}

.think-button {
  display: inline-block;
  padding: 15px 30px;
  background-color: #fdca4c;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  font-family: ThinkFont;
  text-decoration: none;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.think-button::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffed4a;
  background-image: url("../images/emoji-thinking.gif");
  background-size: 100% 100%;
  transform: translateY(100%);
  transition: transform 0.3s;
  border-radius: 16px;
}

.think-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.think-button:hover::before {
  transform: translateY(-100%);
}

.splasher {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  z-index: 100;
  transform: translate(-50%, -50%);
  transition: width 1s, height 1s, opacity 1s;
}

.goose, .grave, .ghost {
  width: 50px;
  height: 50px;
  position: absolute;
  transition: width 2s ease, height 2s ease;
}

.ghost {
  z-index: 1;
}

.grave {
  z-index: -99;
  transform: scaleY(0);
  transition: transform 1s ease;
}

#marquee-container {
  position: fixed;
  bottom: 7.5%;
  color: #000;
  z-index: 11;
}

.marquee {
  animation: marquee-scroll 14s linear infinite;
}

#marquee {
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

@keyframes marquee-scroll {
  0% {
    left: 100%;
    transform: translateX(0);
  }
  100% {
    left: 0;
    transform: translateX(-100%);
  }
}

#typedText {
  bottom: -10px;
}

#thinkCount {
  top: -10px;
}

#typedText, #thinkCount {
  position: absolute !important;
  color: #000;
  padding: 5px 6px;
  z-index: 11;
  background-color: #fdca4c;
  border: #000 solid 2px;
  font-size: 12px;
  font-weight: bold;
  font-family: ThinkFont;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  transform: scale(0);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.25s ease-in;
}

#typedText.show {
  transform: scale(1);
  bottom: 10px;
}

#thinkCount.show {
  transform: scale(1);
  top: 10px;
}

#loading-progress {
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

#loading-spinner {
  z-index: 50;
  width: 50px;
  height: 50px;
  transition: all 0.5s linear;
}

#loading-spinner.spin {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes slow-expand {
  0% {
    transform: rotate(0);
  }
  50% {
    opacity: 1;
    transform: rotate(-45deg) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: rotate(0) scale(100);
  }
}

.copyright-notice {
  top: 0;
  font-size: 1.5vh;
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  transition: top 4s ease;
  white-space: nowrap;
}

.copyright-pull {
  width: 35vw;
  height: 5vh;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

#t-title {
  font-size: 10vh;
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  transition: top 1s ease;
  z-index: 100;
}

#t-version {
  font-size: 3vh;
  position: absolute;
  display: none;
  top: calc(10% + 26vh);
  left: 50%;
  transform: translateX(-50%) scale(100);
  opacity: 0;
  transition: transform 1s ease-in, opacity 1s ease-in;
  z-index: 100;
}

#muchthinking {
  z-index: 102;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  transition: backdrop-filter 0.2s ease;
}

.wasted {
  width: 0;
  height: 0;
  font-size: 0;
  color: rgba(255,255,255,1);
  text-align: center;
  margin: auto;
  line-height: 0;
  border-top: rgba(36,36,36,0.9) 2.5vh solid;
  border-bottom: rgba(36,36,36,0.9) 2.5vh solid;
  background-color: rgba(0,0,0,0.8);
  position: absolute;
  top: 40vh;
  left: 50vw;
  transition: all 1s ease;
  -webkit-text-stroke-width: 6px;
  -webkit-text-stroke-color: black;
}

#strText {
  position: absolute;
  z-index: 11;
  font-size: 40px;
  color: #fff;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
  transform-origin: bottom;
  transform: rotate(0) scale(1);
  transition: all 1s ease;
}

#timeleft {
  z-index: 11;
  position: absolute;
  font-size: 25px;
  color: #fff;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: black;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  transition: color 0.05s ease;
}

#s-text {
  text-align: center;
  position: absolute;
  font-size: 20px;
  color: #000;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
}

#dates {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

#dates-conf {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

#achmntunlk-container {
  background-color: #ffc166;
  padding: 5px;
  border-radius: 16px;
  position: fixed;
  top: 15%;
  right: -22vw;
  width: 20vw;
  max-width: 300px;
  height: auto;
  border: #000 solid 2px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

#achmntunlk-container.show {
  right: 1%;
}

#achmntunlk-title {
  font-size: 18px;
  font-weight: bold;
  font-family: ThinkFont;
  text-decoration: none;
  color: #000;
  margin-bottom: 10px;
  text-align: center;
}

#achmntunlk-ach {
  font-size: 16px;
  font-weight: bold;
  font-family: ThinkFont;
  text-decoration: none;
  color: #000;
  margin-bottom: 10px;
  text-align: center;
  max-width: 100%;
  word-wrap: break-word;
}

#achmntunlk-img {
  width: 50px;
  height: 50px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  #achmntunlk-container {
    width: 80vw;
    right: 50%;
    transform: translateX(50%);
    top: -20%;
  }

  #achmntunlk-container.show {
    top: 5%;
    right: 50%;
  }

  #achmntunlk-title {
    font-size: 16px;
  }

  #achmntunlk-ach {
    font-size: 14px;
  }

  #achmntunlk-img {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  #achmntunlk-container {
    width: 90vw;
    right: 50%;
    transform: translateX(50%);
    top: -20%;
  }

  #achmntunlk-container.show {
    top: 5%;
    right: 50%;
  }

  #achmntunlk-title {
    font-size: 14px;
  }

  #achmntunlk-ach {
    font-size: 12px;
  }

  #achmntunlk-img {
    width: 30px;
    height: 30px;
  }
}

.achievements-container {
  display: none;
}

.a-keyhint {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 114;
  opacity: 0;
  transition: opacity 1s ease;
  font-size: xx-large;
  text-align: center;
  padding: 10px;
}

.achievements-backdrop {
  background-image: url("../images/curtain.jpg");
  background-size: cover;
  position: absolute;
  top: 0;
  width: 50vw;
  height: 80vh;
  transition: left 2s cubic-bezier(0.165, 0.84, 0.44, 1), right 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  filter: saturate(0.5);
  z-index: 110;
}

#a-back1 {
  left: -50vw;
}
#a-back1.show {
  left: 0;
}

#a-back2 {
  right: -50vw;
  background-position: right;
}
#a-back2.show {
  right: 0;
}

.achievements-drawstring {
  background-color: #ffcc4b;
  position: absolute;
  top: calc(-20vh - 30px);
  right: 5%;
  width: 15px;
  height: 20vh;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  transition: top 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 113;
  background-image: linear-gradient(45deg, #ffcc4b 25%, #d4a33a 25%, #d4a33a 50%, #ffcc4b 50%, #ffcc4b 75%, #d4a33a 75%, #d4a33a 100%);
  background-size: 20px 20px;
}

.achievements-drawstring::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background-color: #d4a33a;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #ffcc4b;
}

.achievements-drawstring.show {
  top: -5vh;
}

.achievements-drawstring.clicked {
  top: calc(-20vh - 30px);
  animation: adsClicked 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@keyframes adsClicked {
  0% {
    top: -5vh;
  }
  40% {
    top: 0;
  }
  100% {
    top: calc(-20vh - 30px);
  }
}

.achievements-floor {
  background-color: #45220a;
  position: absolute;
  left: 0;
  width: 100vw;
  height: 20vh;
  transition: bottom 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 112;
}

#a-floor {
  bottom: -20vh;
}
#a-floor.show {
  bottom: 0;
}

.a-trophies {
  position: absolute;
  gap: 20px;
  bottom: -80vh;
  left: 0;
  width: 100vw;
  height: 60vh;
  transition: bottom 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 111;
}

.a-trophies.show {
  bottom: 20vh;
}

.a-trophy {
  width: 20vw;
  min-width: 300px;
  height: 100%;
  transition: width 2s ease, height 2s ease;
  position: absolute;
  left: -20vw;
  right: calc(100% - max(20vw,300px));
  transform: translateX(-100%);
  filter: brightness(0.3);
  transition: left 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), right 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.a-trophy.focused {
  left: 50%;
  transform: translateX(-50%);
  filter: brightness(1) !important;
}

.a-trophy.focused + .a-trophy {
  right: 0 !important;
  left: calc(100% - max(20vw,300px)) !important;
  transform: translateX(70%) !important;
  filter: brightness(0.5) !important;
}

.a-trophy:has(+.a-trophy.focused) {
  left: 0 !important;
  right: calc(100% - max(20vw,300px)) !important;
  transform: translateX(-70%) !important;
  filter: brightness(0.5) !important;
}

.a-trophy.focused ~ .a-trophy {
  right: -20vw;
  transform: translateX(200%);
  left: calc(100% - max(20vw,300px));
  filter: brightness(0.3);
}

.a-pedestal {
  width: 300px;
  height: 40%;
  background-color: #5f3110;
  bottom: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
}

.a-pedestal-plaque {
  width: 70%;
  height: 50%;
  background-color: #ffcc4b;
  color: #444;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  border-radius: 16px;
  font-size: x-large;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.a-trophy img {
  width: 300px;
  height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom:40%;
  left: 50%;
  transform: translateX(-50%) perspective(1500px) rotateY(60deg);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.a-trophy.focused img {
  transform: translateX(-50%) perspective(1500px) rotateY(0);
}

.a-trophy.focused + .a-trophy img {
  transform: translate(-60%, 2%) perspective(1500px) rotateY(-50deg) !important
}

.a-trophy:has(+.a-trophy.focused) img {
  transform: translate(-40%, 2%) perspective(1500px) rotateY(50deg) !important;
}

.a-trophy.focused ~ .a-trophy img {
  transform: translateX(-50%) perspective(1500px) rotateY(-60deg);
}

.a-trophy .flash {
  width: 300px;
  height: 300px;
  background-color: #fff;
  position: absolute;
  bottom:40%;
  left: 50%;
  opacity: 0;
  mask-image: url("../images/trophies/default.png");
  transform: translateX(-50%);
  mask-size: 100%;
  z-index: 113;
}

.a-trophy.unlocked img {
  animation: trophy-animation 3.3s ease;
}

.a-trophy.unlocked .flash {
  animation: flash 3.3s ease;
}

@keyframes flash {
  0% {
    transform: translate(-50%, 0) perspective(1500px) scale(1) rotateY(0);
    opacity: 0;
  }
  4.5% {
    transform: translate(-50%, -30%) perspective(1500px) scale(1.2);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  18% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  95.5% {
    transform: translate(-50%, -30%) perspective(1500px) scale(1.2) rotateY(1080deg);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, 0) perspective(1500px) scale(1) rotateY(1080deg);
    opacity: 0;
  }
}

@keyframes trophy-animation {
  0% {
    transform: translate(-50%, 0) perspective(1500px) scale(1) rotateY(0);
    opacity: 1;
  }
  4.5% {
    transform: translate(-50%, -30%) perspective(1500px) scale(1.2);
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  18% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  95.5% {
    transform: translate(-50%, -30%) perspective(1500px) scale(1.2) rotateY(1080deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 0) perspective(1500px) scale(1) rotateY(1080deg);
    opacity: 1;
  }
}

.a-description {
  width: 50%;
  height: 80%;
  background-color: #333;
  color: #eee;
  border: #222 solid 5px;
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 113;
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  gap: 10px;
}

.a-description.show {
  opacity: 1;
}

.a-description h1 {
  color: #fff;
  margin: 0;
  font-size: xx-large;
}

.a-description p {
  color: #fff;
  margin: 0;
  font-size: large;
}

.a-description .locked {
  color: #777;
  margin: 0;
  font-size: medium;
}

@media screen and (max-width: 720px), screen and (max-height: 720px) {
  .a-description {
    width: 90%;
  }

  .a-description h1 {
    font-size: x-large;
  }

  .a-description p {
    font-size: medium;
  }
  .a-trophy img {
    width: 200px;
    height: 200px;
  }

  .a-trophy .flash {
    width: 200px;
    height: 200px;
  }
  
  .a-pedestal {
    width: 200px;
  }
}

#dates > div {
  margin: 0 10px;
}

#date {
  font-size: 25px;
}

.preview {
  width: 20vw;
  height: 20vh;
  background-color: #ffcea8;
  animation: backgroundanim 40s ease infinite;
  border-radius: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.preview-setbtn {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  right: 0;
  width: 5vw;
  height: 40%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
  background-color: #fdca4c;
  padding: 0px 20px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  font-size: 3vh;
  color: #000;
  display: flex;
  transition: right 0.5s ease;
}
.preview-setbtn i {
  font-size: auto;
}

#preview-typedText {
  position: absolute !important;
  color: #000;
  padding: 5px 6px;
  z-index: 11;
  background-color: #fdca4c;
  border: #000 solid 2px;
  font-size: 30px;
  font-weight: bold;
  font-family: ThinkFont;
  text-decoration: none;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  transform: scale(0);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.25s ease-in;
}

@media screen and (max-width: 720px) {
  #preview-typedText {
    font-size: 15px;
    border-radius: 8px;
  }
}

#preview-typedText.show {
  transform: scale(1);
  bottom: 10px;
}

#preview-typedText {
  bottom: -10px;
}

#date-earlier, #date-later, #date-count, #date-restart {
  display: none;
}

.settings-button, .birthdaymsg-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 10px;
  background-color: #fdca4c;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  font-family: ThinkFont;
  text-decoration: none;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
}

.settings-button:hover, .birthdaymsg-button:hover {
  transform: translateY(-2.5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  background-color: #ffed4a;
}

.settings-button:disabled{
  background-color: #787878
}

.date-pm {
  width: 40px;
  height: 40px;
  display: none;
}

.settings-x {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.backbtn {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}

.date-no-disp {
  display: none;
}

.birthdaymsg-button {
  position: absolute;
  bottom: 0;
}

.settings-menu {
  width: 50vw;
  height: 50vh;
  display: none;
  background-color: #ffc166;
  border-radius: 16px;
  padding: 20px;
  margin: 10px 0;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  border: #000;
  border-style: solid;
  border-color: #000;
  border-width: 2px;
  transform: translate(-50%, 100vh) scale(0);
  z-index: 100;
  transition: transform 1s ease;
}

@media screen and (max-width: 720px) {
  .settings-menu {
    width: 100vw;
    height: 100vh;
  }
}

@media screen and (max-height: 600px) {
  .settings-menu {
    width: 100vw;
    height: 100vh;
  }
}

.settings-container {
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: absolute;
  transition: left 1s ease;
}

.settings-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.settings-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
}

#general-options {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.settings-menu .title, .birthday-msg .title {
  position:absolute;
  font-size: 30px;
  top: 0;
}

.settings-section .subtitle {
  margin: 0;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none; 
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 6px;
  background: #ccc;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none; 
  height: 35px;
  width: 35px;
  background: transparent;
  background-image: url("../images/thinking.png");
  background-size: cover;
  border-radius: 50%;
  transition: .2s ease-in-out;
  transform: rotateZ(var(--thumb-rotate, 0deg));
}

input[type="range"]::-moz-range-thumb {
  height: 35px;
  width: 35px;
  background: transparent;
  background-image: url("../images/thinking.png");
  background-size: cover;
  border: none;
  border-radius: 50%;
  transform: rotateZ(var(--thumb-rotate, 0deg));
  transition: .2s ease-in-out;
}

input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 6px rgba(241, 145, 26, .2)
}
input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 6px rgba(241, 145, 26, .2)
}

.range {
  padding-top: 10px;
  padding-bottom: 10px;
}

.birthday-msg {
  width: 40vw;
  height: 40vh;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffc166;
  border-radius: 16px;
  padding: 20px;
  margin: 10px 0;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  border: #000;
  border-style: solid;
  border-color: #000;
  border-width: 2px;
  transform: translate(-50%, 100vh) scale(0);
  z-index: 100;
  transition: transform 1s ease;
}

#birthday-msg {
  text-align: center;
}

.settings-backdrop {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  display: none;
  transition: background-color 1s ease, backdrop-filter 1s ease;
}

#mobile-sec-input {
  position: absolute;
  opacity: 0;
  z-index: -99;
}

#mobile-input-act {
  position: absolute;
  bottom: 5%;
  left: 0;
  width: 1vw;
  height: 7.5%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
  background-color: #fdca4c;
  padding: 0px 20px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  font-size: 3vh;
  color: #000;
  display: flex;
}

#settings-act {
  position: absolute;
  bottom: 2%;
  right: 0;
  width: 1vw;
  height: 5%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
  background-color: #fdca4c;
  padding: 0px 20px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  font-size: 3vh;
  color: #000;
  display: flex;
  cursor: pointer;
}

@keyframes screen-shake {
  0% { transform: translate(1px, 1px) rotate(0deg) scale(1.05); }
  10% { transform: translate(-1px, -2px) rotate(-1deg) scale(1.05); }
  20% { transform: translate(-3px, 0px) rotate(1deg) scale(1.05); }
  30% { transform: translate(3px, 2px) rotate(0deg) scale(1.05); }
  40% { transform: translate(1px, -1px) rotate(1deg) scale(1.05); }
  50% { transform: translate(-1px, 2px) rotate(-1deg) scale(1.05); }
  60% { transform: translate(-3px, 1px) rotate(0deg) scale(1.05); }
  70% { transform: translate(3px, 1px) rotate(-1deg) scale(1.05); }
  80% { transform: translate(-1px, -1px) rotate(1deg) scale(1.05); }
  90% { transform: translate(1px, 2px) rotate(0deg) scale(1.05); }
  99% { transform: translate(1px, -2px) rotate(-1deg) scale(1.05); }
  100% { transform: scale(1); }
}

@media (max-width:448px), (max-height:524px) {
  .birthday-msg {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }
  .birthday-menu {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }
}

img.emoji {
  height: 1.1em;
  width: 1.1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

img {
  -webkit-user-drag: none;
  -webkit-touch-callout:none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

* {
  user-select: none;
}