/*
 * Globals
 */


/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: #ae0d6e;
  background-color: rgb(255, 181, 193, 0.5);
  text-shadow: none; /* Prevent inheritance from `body` */
}
.btn {
  color: #962569;
  background-color: rgb(255, 181, 193, 0.5);
}


/*
 * Base structure
 */

body {
  /* overflow-x: hidden; */
  text-shadow: 0 .025rem .08rem rgba(0, 0, 0, .3);
  font-family: 'Space Grotesk';
  /* box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); */
  /* background-color: rgb(22, 18, 50); */
  /* background-image: url("../images/black.jpeg"); */
  /* background-size: cover;
  background-repeat: no-repeat; */
  /* filter: brightness(110%) grayscale(10%) saturate(0.9); */
}
#overlay {
  background-color: rgba(205, 208, 253, 0.35);
  z-index: 10;
  height: 250vh;
  width: 100vw;
  position: absolute;
  pointer-events: none;
}

.fadein { animation: fadein 1s; }
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cover-container {
  max-width: 42em;
}


/*
 * Header
 */

.nav-masthead .nav-link {
  color: rgba(240, 186, 203, 0.868);
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  color: rgb(255, 223, 245);
  border-bottom-color: rgb(246, 195, 231);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: rgb(255, 223, 245);
  border-bottom-color: rgb(255, 221, 245);
}


/* ----------------------------------------------- */

#oldDiv {
  background-color: rgba(8, 5, 35, 0);
  border-radius: 20px;
  padding: 2em;
}

#desc {
  font-size: 15px;
}

.grow-on-hover {
  transition: transform 0.5s ease; /* Add a smooth transition effect */
}

.grow-on-hover:hover {
  transform: scale(1.05); /* Scale the element on hover */
}

@keyframes rainbowAnimation {
  0%   { color: #FF6792; }
  28%  { color: #FFA287; }
  42%  { color: #FFD781; }
  57%  { color: #A8FF6D; }
  71%  { color: #75FFFF; }
  85%  { color: #938FFF; }
  100% { color: #FF6792; }
}

.rainbow-text {
  animation: rainbowAnimation 10s infinite linear; 
}

.pear-text {
  /* animation: pearAnimation 10s infinite ease;  */
  color: #1d221b;
  transition: color 0.7s ease;
}
@keyframes pearAnimation {
  0%   { color: #1d221b; }
  50%  { color: #262c22; }
  100% { color: #1d221b; }
}
.pear-text:hover {
  color: #35492d;
}

.rotating-text {
  color: rgb(173, 65, 141);
  padding-top: 3px;
  padding-right: 50px;
  font-size: 20px;
  font-weight: bold;
  transform-style: preserve-3d;
  transform-origin: center;
  animation: rotateInPlace 5s infinite; 
  animation-play-state: paused;
  transition: color 4s ease;
}

@keyframes rotateInPlace {
  0% {
    transform: rotateY(0deg); /* Initial rotation state */
  }
  100% {
    transform: rotateY(720deg); /* Fully rotated state */
  }
}
.rotate-container {
  position: absolute;
  padding-left: 15px;
  border-radius: 5px;
  /* background-color: rgb(131, 27, 99, 0.1); */
  width: 100px;
  height: 30px;
}
.rotate-container:hover .rotating-text {
  color: rgb(255, 255, 255);
  animation-play-state: running; /* Resume animation on hover */
}

.maidq-text {
  text-decoration: none;
  color:rgb(255, 149, 200);
  font-weight: bold;
  font-size: 22px;
  transition: color 4s ease;
}
.maidq-text:hover {
  color:rgb(255, 218, 236);
}
@media only screen and (max-height: 700px) {
  .maidq-text {
    display: none;
  }
  
}
.typewriter {
  /* z-index: 10; */
  transform: translateY(10%);
  display: inline-block;
}
.typewriter-text {
  letter-spacing: 0px;
  font-family: 'Space Grotesk';
  border-right: 3px solid rgb(0, 0, 0);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation:
    typing 2s,
    cursor .5s step-end infinite alternate;
}

@keyframes cursor {
  50% { border-color: transparent; }
}

@keyframes typing {
  from { width: 0 }
}