@import url('https://fonts.googleapis.com/css2?family=Amiko&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yatra+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

/* General Formatting */

:root {
    --lineLength: 0;
}

html {
    scroll-behavior: smooth;
  }

body {
    font-family: 'Amiko', sans-serif; 
    /* font-family: 'Yatra One', cursive; */
    background: rgb(219,200,243);
}

h1 {
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-size: 60px;
}

h2 {
    color: rgba(255, 0, 0, 0.2);
    font-family: 'Fredoka One', cursive;
    text-transform: uppercase;
    font-size: 38vw;
    position: absolute;
    top: 13500px;
    left: 14%;
}

p {
    text-decoration: none;
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    position: absolute; 
    top: 14945px;
    left: 140px;
}

a {
    text-decoration: none;
    color: white;
    font-size: 14px;
    text-transform: uppercase;
}

a:hover {
    font-style: italic;
    cursor: pointer;
}


/* Story3 formatting */

.body_gradient {
    height: 14000px;
    background: rgb(219,200,243);
    background: linear-gradient(180deg, rgba(219,200,243,1) 0%, rgba(163,95,134,1) 10%, rgba(143,86,122,1) 16%, rgba(92,63,92,1) 17%, rgba(43,28,46,1) 24%, rgba(29,11,13,1) 31%, rgba(43,15,16,1) 38%, rgba(84,27,23,1) 39%, rgba(124,39,34,1) 48%, rgba(150,46,40,1) 57%, rgba(212,48,30,1) 70%, rgba(255,47,0,1) 91%, rgba(255,158,0,1) 100%);
}

    /* Pole */

div.pole {
    position: fixed;
    left: 50%;
    height: auto; 
    width: 15px;
    top: 0px;
    z-index: 2;
}

span {
    position: absolute;
    display: block;
    top: 0;
    height: 100%;
    width: 7px;
    background-color:rgb(80, 80, 80);
  }

    /* Dancer */
@keyframes dancer {
    0% {top: -900px;}
    50% {top: -800px;}
    100% {top: -900px;}
  }

@keyframes rotatedancer  {
    0% {transform: scaleX(1);left: -300px;}
    45% {transform: scaleX(1);left: -300px;}
    50% {transform: scaleX(-1); left: -135px;} 
    95% {transform: scaleX(-1);left: -135px;}
    100% {transform: scaleX(1);left: -300px;}
  }

      /* LEG! */
@keyframes dancerleg {
    0% {top: -1500px;}
    50% {top: -1400px;}
    100% {top: -1500px;}
  }

@keyframes rotateleg{
    0% {transform: scaleX(1) rotate(-6deg); left: -235px;}
    45% {transform: scaleX(1) rotate(0deg); left: -235px;}
    50% {transform: scaleX(-1) rotate(-6deg); left: 50px;} 
    95% {transform: scaleX(-1)rotate(0deg); left: 50px;}
    100% {transform: scaleX(1) rotate(-6deg); left: -235px;}
  }
  

      /* Dancer's Hair */
@keyframes hairdance {
    0% {top: -1350px;}
    50% {top: -1250px;}
    100% {top: -1350px;}
  }

  @keyframes rotatehair {
    0% {transform: scaleX(1) skewY(0deg);left: 80px;}
    45% {transform: scaleX(1)skewY(50deg);left: 80px;}
    50% {transform: scaleX(-1)skewY(50deg); left: -135px;} 
    95% {transform: scaleX(-1)skewY(0deg);left: -135px;}
    100% {transform: scaleX(1)skewY(00deg);left: 80px;}
  }

div.dancer1 {
    width: 450px;
    height: auto;
    z-index: 3;
    position: relative;
    animation-name: dancer, rotatedancer;
    animation-duration: 6s, 10s;
    animation-iteration-count: infinite;
}
div.leg1 {
    width: 200px;
    height: auto;
    z-index: 3;
    position: relative;
    animation-name: dancerleg, rotateleg;
    animation-duration: 6s, 10s;
    animation-iteration-count: infinite;
}
div.dancerhair1{
    width: 100px;
    height: auto;
    z-index: 2;
    position: relative;
    animation-name: hairdance, rotatehair;
    animation-duration: 6s, 10s;
    animation-iteration-count: infinite;
}

    /* SVGs + their Positioning */

.container {
    position: relative;
}

.handleft {
    position: absolute;
    top: 500px;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 45vw;
    height: auto;
}

#handleftID {
    fill:transparent;
    stroke:#fff;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:6px;
}

.handright {
    position: absolute;
    top: 400px;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 45vw;
    height: auto;
}

#handrightID{
    fill:transparent;
    stroke:#fff;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:6px;
}

/* animation hand left 2 */
@keyframes handleft2 {
    0% {top: 12770px;}
    50% {top: 12700px;}
    100% {top: 12770px;}
    }

.handleft2 {
    position: absolute;
    left: 1%;
    width: 45vw;
    height: auto;
    animation-name: handleft2;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

/* animation hand right 2 */
@keyframes handright2 {
    0% {top: 12700px;}
    50% {top: 12770px;}
    100% {top: 12700px;}
    }

.handright2 {
    position: absolute;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 45vw;
    height: auto;
    animation-name: handright2;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

.angel1 {
    position: absolute;
    top: 800px;
    left: 70%;
    width: 20vw;
    height: auto;
    transform: rotate(15deg);
}

#angel1ID {
    stroke:#fff;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:10px;
    fill:transparent;
    transition: fill 250ms;
}

.angel2 {
    position: absolute;
    top: 1050px;
    left: 60%;
    width: 20vw;
    height: auto;
    transform: rotate(25deg);
}

#angel2ID {
    stroke:#fff;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:10px;
    fill:transparent;
    transition: fill 250ms;
}

.angel3 {
    position: absolute;
    top: 1325px;
    left: 70%;
    width: 20vw;
    height: auto;
    transform: rotate(25deg);
}

#angel3ID {
    stroke:#fff;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:10px;
    fill:transparent;
    transition: fill 250ms;
}

.angel4 {
    position: absolute;
    top: 800px;
    left: 10%;
    width: 20vw;
    height: auto;
    transform: rotate(-15deg) scaleX(-1);
}

#angel4ID {
    stroke:#fff;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:10px;
    fill:transparent;
    transition: fill 250ms;
}

.angel5 {
    position: absolute;
    top: 1050px;
    left: 20%;
    width: 20vw;
    height: auto;
    transform: rotate(-25deg) scaleX(-1);
}

#angel5ID {
    stroke:#fff;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:10px;
    fill:transparent;
    transition: fill 250ms;
}
.angel6 {
    position: absolute;
    top: 1325px;
    left: 10%;
    width: 20vw;
    height: auto;
    transform: rotate(-15deg) scaleX(-1);
}

#angel6ID {
    stroke:#fff;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:10px;
    fill:transparent;
    transition: fill 250ms;
}

.snake1 {
    position: absolute;
    top: 1700px;
    left: 20%;
    width: 20vw;
    height: auto;
}

#snake1ID {
    stroke:#fff;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:10px;
    fill:transparent;
    transition: fill 250ms;
}

.snake2 {
    position: absolute;
    top: 1700px;
    left: 60%;
    width: 20vw;
    height: auto;
    transform: scale(-1);
}

#snake2ID {
    stroke:#fff;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:10px;
    fill:transparent;
    transition: fill 250ms;
}

.lastsupper {
    position: absolute;
    top: 2475px;
    left: 10%;
    width: 85vw;
    height: auto;
}


.applehalf {
    position: absolute;
    top: 3295px;
    left: 40%;
    width: 20vw;
    }

#applehalfID{
    stroke:white;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:7px;
    fill:transparent;
    transition: fill 250ms;
}

.lipsright {
    position: absolute;
    top: 3250px;
    left: 70%;
    width: 20vw;
    }

.tree {
    position: absolute;
    top: 3100px;
    left: 0%;
    width: 45vw;
    }

.devil {
    position: absolute;
    top: 4000px;
    left: 10%;
    width: 30vw;
    }

.devil2 {
    position: absolute;
    top: 9200px;
    left: 60%;
    width: 30vw;
    transform: scaleX(-1);
    }


.praying {
    position: absolute;
    top: 4400px;
    left: 65%;
    width: 30vw;
    }

.praying2 {
    position: absolute;
    top: 9400px;
    left: 10%;
    width: 30vw;
    transform: scaleX(-1);
    }

.windowleft {
    position: absolute;
    top: 5300px;
    left: 5%;
    width: 30vw;
    transform: scaleX(-1);
    }


.windowright {
    position: absolute;
    top: 5300px;
    left: 65%;
    width: 30vw;
    }

.windowmiddle {
    position: absolute;
    top: 5400px;
    left: 40.25%;
    width: 20vw;
    }

.windowleft2 {
    position: absolute;
    top: 10300px;
    left: 5%;
    width: 30vw;
    transform: scaleX(-1);
    }


.windowright2 {
    position: absolute;
    top: 10300px;
    left: 65%;
    width: 30vw;
    }

.windowmiddle2 {
    position: absolute;
    top: 10400px;
    left: 40.25%;
    width: 20vw;
    }

.amphitheatre {
    position: absolute;
    top: 6300px;
    left: 32%;
    width: 35vw;
    }

.headleft {
    position: absolute;
    top: 7100px;
    left: 5%;
    width: 40vw;
    }

.headright {
    position: absolute;
    top: 6800px;
    left: 65%;
    width: 30vw;
    }

.handshake {
    position: absolute;
    top: 8200px;
    left: 15%;
    width: 70vw;
    }

.inprivate {
    position: absolute;
    top: 11500px;
    left: 15%;
    width: 70vw;
    }
    

.lildevilleft{
    position: absolute;
    top: 13500px;
    left: 2%;
    width: 45vw;
    }

.lildevilright{
    position: absolute;
    top: 13500px;
    left: 52%;
    width: 45vw;
    transform: scaleX(-1);
    }
    

    /* Parallax Effects */ 



    /* Audio */ 

a.trigger {
color: white;
text-decoration: none;
}

.trigger::before {
    content: '▶';
}

.playing .trigger::before {
content: 'II';
}

.paused .trigger::before {
content: '▶';
}

.player {
    position: fixed;
    top: 10px;
    left: 10px;   
    padding: 7px 15px;
    border: solid rgba(255, 255, 255, 0.5) 1px;
    background-color: rgba(0, 0, 0, 0.1);
    display: inline;
    display: inline-block;
}

.player:hover {
    background-color: rgba(0, 0, 0, 0.2);
}


    /* Navigation */ 
.menue {
    position: fixed;
    top: 8px;
    right: 16px;
    font-size: 18px;
    text-align: right;
}

a.navi {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    text-transform: none;
}

a.navi:hover {
    font-style: italic;
    cursor: pointer;
    color: white;
}