@import url('https://fonts.googleapis.com/css2?family=Imperial+Script&family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Rajdhani:wght@500&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,700&display=swap');
:root{
  --border-radius: 5px;
  --pale-pink:rgba(255, 230, 242, .2);
  --pink: #e06377;
  --white: #ffffff;
  /* CSS HEX */
  --misty-rose: #ffe5ecff;
  /* --pink: #ffc2d1ff; */
  --cherry-blossom-pink: #ffb3c6ff;
  --bakermiller-pink: #ff8fabff;
  --rose-pompadour: #fb6f92ff;

}
body{
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  border: none;
  
}
.playfair-display{
  font-family: "Playfair Display", serif;
}
.imperial-script{
  font-family: "Imperial Script", cursive;
  display: flex;
  font-style: italic;
  font-size: 4rem;
}
.lavendar{
  /* background-color: rgb(216, 216, 248); */
  background-color: #cbcaf0;
  border-radius: 4rem;
  padding: 2rem;
}
.nav-link{
  font-size: .8rem;
}
a, .nav-link{
  color: black;
}
.nav-underline .nav-link.active{
  color: var(--pink);
}
.navbar-toggler{
  border-color: var(--pink);
}
.navbar-toggler i, i{
  color: var(--pink);
}

.navbar-toggler:focus{
  box-shadow: none;
}
hr{
  color: var(--pink);
  margin: 2rem 0;
}

.rectangle{
  /* width: 100%; */
  margin: 1rem;
  padding:0 1rem 1rem 1rem;
  /* background-color: #f5ecec; */
  background-color: var(--misty-rose);
  border-bottom-left-radius: 40%;
  border-bottom-right-radius: 40%;
  /* height: 100vh; */
  /* z-index: 3 !important; */
}
img{
  max-width: 100%;
}
.image{
  max-width: 99%;
  border-bottom-left-radius: 40%;
  border-bottom-right-radius: 40%;
  
  /* z-index: 2; */
}
.button2{
  border:1px solid var(--pink);
  border-radius: var(--border-radius);
  padding: 10px 20px;
  color: var(--white);
  /* text-align: center; */
  background-color: var(--pink);
}
.visible{
  display: block;
}
.hidden{
  display: none;
}
.portfolio{
  background-color: var(--pale-pink);
  padding: 3rem 0;
}
.portfolio .row{
  row-gap: 2rem;
  height: 100%;
}
.portfolio .container{
  --bs-gutter-x: .8rem !important;
}
.icons{
  padding: .8vw 13px;
}
@media (max-width: 991px){
  .visible{
    display: none;
    }

  .hidden{
    display: block;
    }
}
.hand::before{
  rotate: 90deg;
}
.hand{padding-right: 1rem;}

.btn-shine {
  padding-right: 2rem;
  color: var(--pink);
  background: linear-gradient(to right, var(--pink) 0,#fad3f6 10%, var(--pink) 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  font-family: "Poppins", sans-serif;
}
@-moz-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
@-webkit-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
@-o-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}

/* CSS for fullscreen image */
.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Keep aspect ratio */
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
  z-index: 9999; /* Ensure image is on top of other content */
  cursor: pointer; /* Change cursor to pointer */
}























/* 
.container {
  width: 100%;
  height: 100%;
  --size: 150px; /* control the size *
  --color: #f4b0e8;

  background: radial-gradient(
      circle at 15% 30%,
      transparent 40%,
      var(--color) 41%
    ),
    radial-gradient(circle at 85% 30%, transparent 40%, var(--color) 41%),
    radial-gradient(circle at 50% 70%, transparent 40%, var(--color) 41%),
    radial-gradient(circle at 15% 70%, transparent 40%, var(--color) 41%),
    radial-gradient(circle at 85% 70%, transparent 40%, var(--color) 41%),
    linear-gradient(
      45deg,
      var(--color) 25%,
      rgba(211, 66, 182, 0.067) 0,
      rgba(213, 74, 74, 0.067) 50%,
      var(--color) 0,
      var(--color) 75%,
      #1111 0,
      #1111 100%,
      var(--color) 0
    );
  background-size: var(--size) var(--size);
} */