.mentenanta {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3a2c29;
}
.line:nth-child(1) {
  animation-delay: 100ms;
  animation: intro-line-1 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-1 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-1 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(20deg);
  }
}
@keyframes intro-line-reverse-1 {
  0% {
    transform: translateY(-50%) rotate(20deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-20deg);
  }
}
.line:nth-child(2) {
  animation-delay: 200ms;
  animation: intro-line-2 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-2 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-2 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(40deg);
  }
}
@keyframes intro-line-reverse-2 {
  0% {
    transform: translateY(-50%) rotate(40deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-40deg);
  }
}
.line:nth-child(3) {
  animation-delay: 300ms;
  animation: intro-line-3 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-3 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-3 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(60deg);
  }
}
@keyframes intro-line-reverse-3 {
  0% {
    transform: translateY(-50%) rotate(60deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-60deg);
  }
}
.line:nth-child(4) {
  animation-delay: 400ms;
  animation: intro-line-4 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-4 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-4 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(80deg);
  }
}
@keyframes intro-line-reverse-4 {
  0% {
    transform: translateY(-50%) rotate(80deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-80deg);
  }
}
.line:nth-child(5) {
  animation-delay: 500ms;
  animation: intro-line-5 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-5 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-5 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(100deg);
  }
}
@keyframes intro-line-reverse-5 {
  0% {
    transform: translateY(-50%) rotate(100deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-100deg);
  }
}
.line:nth-child(6) {
  animation-delay: 600ms;
  animation: intro-line-6 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-6 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-6 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(120deg);
  }
}
@keyframes intro-line-reverse-6 {
  0% {
    transform: translateY(-50%) rotate(120deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-120deg);
  }
}
.line:nth-child(7) {
  animation-delay: 700ms;
  animation: intro-line-7 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-7 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-7 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(140deg);
  }
}
@keyframes intro-line-reverse-7 {
  0% {
    transform: translateY(-50%) rotate(140deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-140deg);
  }
}
.line:nth-child(8) {
  animation-delay: 800ms;
  animation: intro-line-8 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-8 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-8 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(160deg);
  }
}
@keyframes intro-line-reverse-8 {
  0% {
    transform: translateY(-50%) rotate(160deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-160deg);
  }
}
.line:nth-child(9) {
  animation-delay: 900ms;
  animation: intro-line-9 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-9 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-9 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(180deg);
  }
}
@keyframes intro-line-reverse-9 {
  0% {
    transform: translateY(-50%) rotate(180deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-180deg);
  }
}
.line:nth-child(10) {
  animation-delay: 1000ms;
  animation: intro-line-10 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-10 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-10 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(200deg);
  }
}
@keyframes intro-line-reverse-10 {
  0% {
    transform: translateY(-50%) rotate(200deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-200deg);
  }
}
.line:nth-child(11) {
  animation-delay: 1100ms;
  animation: intro-line-11 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-11 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-11 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(220deg);
  }
}
@keyframes intro-line-reverse-11 {
  0% {
    transform: translateY(-50%) rotate(220deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-220deg);
  }
}
.line:nth-child(12) {
  animation-delay: 1200ms;
  animation: intro-line-12 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-12 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-12 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(240deg);
  }
}
@keyframes intro-line-reverse-12 {
  0% {
    transform: translateY(-50%) rotate(240deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-240deg);
  }
}
.line:nth-child(13) {
  animation-delay: 1300ms;
  animation: intro-line-13 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-13 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-13 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(260deg);
  }
}
@keyframes intro-line-reverse-13 {
  0% {
    transform: translateY(-50%) rotate(260deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-260deg);
  }
}
.line:nth-child(14) {
  animation-delay: 1400ms;
  animation: intro-line-14 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-14 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-14 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(280deg);
  }
}
@keyframes intro-line-reverse-14 {
  0% {
    transform: translateY(-50%) rotate(280deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-280deg);
  }
}
.line:nth-child(15) {
  animation-delay: 1500ms;
  animation: intro-line-15 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-15 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-15 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(300deg);
  }
}
@keyframes intro-line-reverse-15 {
  0% {
    transform: translateY(-50%) rotate(300deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-300deg);
  }
}
.line:nth-child(16) {
  animation-delay: 1600ms;
  animation: intro-line-16 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-16 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-16 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(320deg);
  }
}
@keyframes intro-line-reverse-16 {
  0% {
    transform: translateY(-50%) rotate(320deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-320deg);
  }
}
.line:nth-child(17) {
  animation-delay: 1700ms;
  animation: intro-line-17 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-17 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-17 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(340deg);
  }
}
@keyframes intro-line-reverse-17 {
  0% {
    transform: translateY(-50%) rotate(340deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-340deg);
  }
}
.line:nth-child(18) {
  animation-delay: 1800ms;
  animation: intro-line-18 1.8s cubic-bezier(0.65, -0.04, 0, 1.21) forwards,
    intro-line-reverse-18 2.2s cubic-bezier(0.65, -0.04, 0, 1.21) 2.2s forwards;
}
@keyframes intro-line-18 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}
@keyframes intro-line-reverse-18 {
  0% {
    transform: translateY(-50%) rotate(360deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(-360deg);
  }
}
.line {
  width: 50%;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: left;
  background-color: #fff;
  height: 1px;
  z-index: 1;
  scale: 2 1.3;
}
.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  height: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-size: 100%;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.98;
  animation: pulse 2s linear infinite;
  background-image: url(data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMjU2cHgiIGhlaWdodD0iMjU2cHgiIHZpZXdCb3g9Ii0xOTIgLTE5MiAyMzA0LjAwIDIzMDQuMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjAuMDE5MjAwMDAwMDAwMDAwMDAyIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApLCBzY2FsZSgxKSIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2U9IiM0NzY5NzciIHN0cm9rZS13aWR0aD0iNDIuMjM5OTk5OTk5OTk5OTk1Ii8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGQ9Ik0xNzcxLjczMSAyOTEuMDM3QzE2NzUuNzA5IDE5My42NTkgMTU0Ny45NDQgMTQwIDE0MTEuODE4IDE0MGgtLjExM2MtMTM2LjEyNSAwLTI2My43NzcgNTMuNjYtMzU5LjU3MyAxNTAuOTI0LTM3LjYxOCAzOC4wNy02OC41NzEgODAuOTk3LTkyLjI5NCAxMjcuNDI2LTIzLjYxLTQ2LjQyOS01NC41NjMtODkuMzU2LTkyLjA2OC0xMjcuMzEzQzc3MS44NiAxOTMuNjU5IDY0NC4yMDggMTQwIDUwNy45NyAxNDBoLS4xMTNjLTEzNi4wMTIgMC0yNjMuNzc3IDUzLjY2LTM1OS44IDE1MS4wMzctMTk3LjY5MSAyMDAuNjI5LTE5Ny42OTEgNTI3LjEwMyAxLjY5NSA3MjkuMDg4bDgxMC4wODYgNzYwLjE1NCA4MTEuODkzLTc2MS43MzZjMTk3LjY5Mi0yMDAuNDAzIDE5Ny42OTItNTI2Ljg3NyAwLTcyNy41MDYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPiA8L2c+Cg08L3N2Zz4=);
}
@keyframes pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.99);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.02);
  }
}
.mentenanta-text {
  height: fit-content;
  z-index: 3;
  background: #d1c7bd;
  width: 100%;
  padding: 20px;
  opacity: 0.92;
  font-size: 60px;
  box-shadow: inset 50px 50px 100px #a59d95, inset -50px -50px 100px #fdf1e5;
  transform: rotate(4deg) skewX(-13deg) rotateY(45deg) translateY(-30%);
}
.mentenanta-text h1{
    color: #000;
    font-size: 60px;
    text-shadow: 2px 2px 5px #fff;
}
.mentenanta-text p{
    color:  var(--coconut);
    text-shadow: 1px 1px 3px #000;
}
@media (max-height: 750px){
    .circle{
        height: 120%;
    }
    .mentenanta-text, .mentenanta-text h1{
        font-size: 40px;
    }
}
@media (max-width: 1200px){
    .mentenanta-text{
        background: transparent;
        box-shadow: none;
        font-size: 40px;
    }
    .mentenanta-text h1{
        text-shadow: none;
        font-size: 40px;
    }
}
@media (max-width: 750px) {
    .circle{
        width: 100%;
        height: auto;
    }
    .line{
        scale: 2 2;
    }
}
@media (max-width: 600px){
    .mentenanta-text, .mentenanta-text h1{
        font-size: 30px;
    }
}
@media (max-width: 500px){
    .mentenanta-text, .mentenanta-text h1{
        font-size: 24px;
    }
}