/* Header
=========== */

.hanging-plant {
  position: absolute;
  right: 25%;
  top: calc(var(--header-height) - 10px);
  z-index: 200;
  transition: transform 1s ease-out ;
  animation: 1.5s ease-in-out 0s 1 hangingUpPlants;
}

@media only screen and (max-width: 1100px) {
  .hanging-plant {
    right: 0%;
  }
}

@media only screen and (max-width: 800px) {
  .hanging-plant {
    height: 230px;
    right: -10%;
  }
}

@media only screen and (max-width: 465px) {
  .hanging-plant {
    height: 150px;
    right: -27%;
    top: calc(var(--header-height) - 7px)
  }
}

@media only screen and (min-width: 1700px) {
  .hanging-plant {
    right: 35%;
  }
}




/* Column 1 / Grid
==================== */

.intro-content {
  height: max(calc(100vh - var(--header-height)), 500px);
  display: flex;
  gap: 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 50ch;
  margin: 0 auto;
}



/* Arrows */

.arrows {
	width: 30px;
	height: 62px;
}

.arrows path {
	stroke: var(--button-accent);
	fill: transparent;
	stroke-width: 2px;
	animation: arrow 1.5s infinite;
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:0.5}
80% {opacity:1}
100% {opacity:0.5}
}

.arrows path.a1 {
	animation-delay:-0.4s;
}

.arrows path.a2 {
	animation-delay:-0.2s;
}

.arrows path.a3 {
	animation-delay:0s;
}

@media only screen and (max-height: 650px) {
  .arrows {
    display: none;
  }
}

/* More Info */

.more-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}


.list ul {
  text-align: left;
  margin-left: 2rem;
}

/* Column 2 / Grid
=================== */


.yoga-setting {
  height: 600px;
  width: 600px;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  overflow: visible
}

#mandala {
  position: absolute;
  filter: blur(1px);
  opacity: 0.3;
  z-index: 10;
}

#animation {
  position: relative;
  z-index: 30;
}

#arm {
  transform-origin: 465px 450px;
  animation: 6s ease-in-out 0s infinite alternate rotateArm ;
}

#plant {
 animation: 1.5s ease-in-out 0s 1 slideInFromRight;
}


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


/* Footer
=========== */

footer video {
  width: min(100%, 300px);
  border-radius: 50%;
  display: block;
}