.content-container{
  position: relative;
  width: 90%;
  height: 100%;
  margin: auto;
}

.section{
  position: relative;
  width: 100%;
  height: calc(100vh - 65px);
  margin: auto;
  padding: 0;
}

.section.first-section{
  height: 100vh;
}

.decoration{
  position: absolute;
  width: 100%;
  height: 100%;
  /* z-index: -10; */
  overflow-y: clip;
}

.center-point{
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: white;
  left: calc(50% - 1px);
}

/*-------------------- title page ------------------*/
.title-page{
  position: relative;
  background-color: #222222;
}

.star-1{
  position: absolute;
  background-image: url(../images/CommetAndMummylandStar/RoundStarGif_10.gif);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 4vw;
  aspect-ratio: 1/1;
  top: 23vh;
  left: 7vw;
}

.star-2{
  position: absolute;
  background-image: url(../images/CommetAndMummylandStar/RoundStarGif_30.gif);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 2.5vw;
  aspect-ratio: 1/1;
  bottom: 10vh;
  left: 9vw;
}

.star-3{
  position: absolute;
  background-image: url(../images/CommetAndMummylandStar/RoundStarGif_20.gif);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 5vw;
  aspect-ratio: 1/1;
  top: 40vh;
  left: 20vw;
}

.star-4{
  position: absolute;
  background-image: url(../images/CommetAndMummylandStar/RoundStarGif_10.gif);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 4vw;
  aspect-ratio: 1/1;
  top: 24vh;
  right: 15.5vw;
}

.star-5{
  position: absolute;
  background-image: url(../images/CommetAndMummylandStar/RoundStarGif_30.gif);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 2.5vw;
  aspect-ratio: 1/1;
  bottom: 10vh;
  right: 8vw;
}

.star-6{
  position: absolute;
  background-image: url(../images/CommetAndMummylandStar/RoundStarGif_20.gif);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 5vw;
  aspect-ratio: 1/1;
  bottom: 50vh;
  right: 2vw;
}

.star-7{
  position: absolute;
  background-image: url(../images/CommetAndMummylandStar/RoundStarGif_20.gif);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 2.5vw;
  aspect-ratio: 1/1;
  bottom: 31vh;
  left: 3vw;
}

.game-title{
  background-image: url("../images/UF_Logo_2021_Extended_2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 75%;
  height: 40vh;
  margin: auto;
}

.cover-image-container{
  position: absolute;
  width: 100%;
  /* height: 120%; */
  aspect-ratio: 16/9;
  bottom: -20%;
  left: 1%;
}

.cover-image.active{
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

.cover-image{
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.container.catchphrase{
  position: absolute;
  width: 30vw;
  height: fit-content;
  right: 0;
  bottom: 10vh;
  align-items: start;
}

.container.catchphrase .title{
  margin-bottom: 2vh;
}

.cta-button-container{
  position: relative;
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.cta-button{
  position: relative;
  width: fit-content;
  margin: 20px 20px 0 0;
}

.cta-button .button:hover{
  background-color: white;
  color: black !important;
  border: black 2px solid;
}

.cta-button .button{
  background-color: black;
  color: white;
  border: white 2px solid;
  font-size: 24px;
  padding: 12px 16px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.cta-button .button .fab{
  margin-right: 20px;
  font-size: 24px;
  margin: -5px 15px 0 0;
}

.cta-button .bg.bg-3{
  text-align: center;
}

.cta-button:hover .bg.bg-3{
  background-color: white;
}

.news-container{
  position: absolute;
  left: 7vw;
  bottom: 10vh;
  width: 25%;
  height: fit-content;
}

.news-container.mobile-view{
  display: none;
}

.news-container .title{
  font-family: 'Amatic';
  font-size: 40px;
  text-align: center;
}

.news{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 3px solid white;
}

.prev-news, .next-news{
  position: absolute;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 10%;
  top: calc(50% - 1rem);
  cursor: pointer;
  background-color: #111111bb;
}

.prev-news i, .next-news i{
  color: white;
  font-size: 2rem;
}

.prev-news:hover, .next-news:hover{
  background-color: #0e0e0e;
  border: 1px solid white;
}

.prev-news{
  left: 0;
}

.next-news{
  right: 0;
}

.news-item{
  position: absolute;
  z-index: 1;
  display: none;
  background-color: #222222;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: deactiveNews .25s linear 0s;
}

.news-item.active{
  animation: activeNews .25s linear 0s;
}

@keyframes activeNews{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes deactiveNews{
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.dots{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.dot{
  width: 1rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: white;
  margin: 1vh 1rem 0;
  cursor: pointer;
}

.dot.active{
  background-color: crimson;
}

/*-------------------- video page ------------------*/
.video-page{
  background-color: #111111;
  display: flex;
}

.video-page .content-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: fit-content;
  margin: auto;
}

.catchphrase-container{
  width: 80%;
  height: fit-content;
  margin: 0 auto;
}

.catchphrase-container.bottom-margin{
  margin: 0 auto 5%;
}

.catchphrase-container div{
  font-family: 'Amatic';
  font-size: 40px;
  text-align: center;
}

.video-box-container{
  display: flex;
  width: 70%;
  height: fit-content;
  margin: 0 auto;
  z-index: 2;
  justify-content: center;
  align-items: start;
}

.video-box-container .video{
  width: 75%;
  aspect-ratio: 16/9;
}

.video-box-container .video .video-iframe{
  width: 100%;
  height: 100%;
}

.video-box-container .video-list-container{
  overflow: scroll;
  width: 25%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: #00000088; */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.video-box-container .video-list-container::-webkit-scrollbar{
  display: none;
}

.video-list-container .video-item{
  position: relative;
  width: 100%;
  height: 54px;
  margin: 0 0 20px;
  cursor: pointer;
}

.cta-button .bg,
.video-item .bg{
  position: absolute;
  width: 105%;
  height: 105%;
  top: 0;
  left: 0;
}

.cta-button .bg.bg-1,
.video-item .bg.bg-1{
  display: none;
  background-color: black;
  border: white 2px solid;
  transform: rotate(4deg) translate(-5px, -2px);
}

.cta-button .bg.bg-2,
.video-item .bg.bg-2{
  display: none;
  background-color: black;
  border: white 2px solid;
  transform: rotate(-3deg) translate(-5px, -2px);
}

.cta-button .bg.bg-3,
.video-item .bg.bg-3{
  width: 100%;
  height: 100%;
  background-color: black;
  border: white 1px solid;
  transform: rotate(0deg);
  opacity: 0;
}

.cta-button:hover .bg-2,
.cta-button:hover .bg-1,
.video-item:hover .bg-2, 
.video-item:hover .bg-1{
  display: block;
}

.cta-button:hover .bg-3,
.video-item:hover .bg-3{
  opacity: 1;
}

.video-item:hover .text{
  opacity: 1;
}

.video-item .text{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 4px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: .4;
  line-height: 20px;
  text-align: center;
}

.video-item.active .text{
  color: black;
  opacity: 1;
}

.video-item.active .bg-1,
.video-item.active .bg-2{
  display: block;
}

.video-item.active .bg-3{
  background-color: white;
  opacity: 1;
}

.mask{
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 1/1;
}

.mask.big-one{
  background-image: url(../images/Mask/MaskGIF1.gif);
  width: 50vw;
  bottom: -15vh;
  right: -13vw;
  opacity: .1;
}

.mask.big-two{
  background-image: url(../images/Mask/MaskGIF3.gif);
  width: 60vw;
  top: -35vh;
  left: -17vw;
  opacity: .1;
}

/*-------------------- selling page ------------------*/
.section.selling-point{
  height: fit-content;
}

.subsection{
  position: relative;
  height: fit-content;
  padding: 10vh 0;
}

.gameplay{
  position: relative;
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.portal-section{
  width: 100%;
  height: fit-content;
  padding: 10vh 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.memfragment{
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 1/1;
  animation: memfragment-anim 5s linear 0s infinite;
}

.memfragment.big-one{
  background-image: url(../images/memory_fragment/Item_Card_6_t.png);
  width: 10vw;
  bottom: 2vh;
  right: -3vw;
  opacity: .2;
  animation-duration: 7s;
}

.memfragment.big-two{
  background-image: url(../images/memory_fragment/Item_Card_1_t.png);
  width: 15vw;
  top: -2vh;
  right: 2vw;
  opacity: .2;
  animation-duration: 10s;
}

.memfragment.big-three{
  background-image: url(../images/memory_fragment/Item_Card_9_t.png);
  width: 25vw;
  top: 6vh;
  left: -8vw;
  opacity: .2;
}

@keyframes memfragment-anim {
  0% {transform: rotate(0deg);}
  25% {transform: rotate(10deg);}
  50% {transform: rotate(0deg);}
  75% {transform: rotate(-10deg);}
  100% {transform: rotate(0deg);}
}

.portal-container{
  position: relative;
  width: 25%;
  aspect-ratio: 1/1;
}

.portal-container .portal{
  position: absolute;
  width: 0%;
  aspect-ratio: 1/1;
  margin: 50%;
  background-image: url(../images/Portal/portal_red.gif);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 0;
  transition: width .25s ease-in-out, 
              margin .25s ease-in-out,
              opacity .2s ease-in-out;
}

.portal-icon:hover ~ .portal{
  transition: opacity .1 ease-in-out;
  width: 150%;
  margin: -25%;
  opacity: 1;
}

.portal-container .portal.active{
  width: 1700%;
  margin: -800%;
  opacity: 1;
  z-index: 100;
  transition: width 1s ease-in-out, 
              margin 1s ease-in-out;
}

.portal-container .portal.deactive{
  width: 0%;
  margin: 50%;
  z-index: 100;
  transition: width .75s ease-in-out, 
              margin .75s ease-in-out,
              opacity .25s ease-in-out .5s;
}

.portal-container .portal-icon{
  position: absolute;
  cursor: pointer;
  width: 80%;
  aspect-ratio: 1/1;
  margin: 10%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
}

.portal-container .portal-icon.mem-fragment{
  filter: invert(10%);
  background-image: url(../images/memory_fragment/MemoryFragmentsIcon-1.png);
}

.portal-container .portal-icon.mem-association{
  filter: invert(10%);
  background-image: url(../images/memory_fragment/MemoryAssociation.png);
  width: 70%;
  margin: 15%;
}

.portal-container .portal-icon.mem-manipulation{
  filter: invert(10%);
  background-image: url(../images/memory_fragment/MemoryManipulationIcon-BOTH.png);
}


.visual{
  /* background-color: #111111; */
  display: flex;
  justify-content: space-evenly;
}

.slideshow-container{
  position: relative;
  width: 55%;
  aspect-ratio: 16/9;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/video_bg/video_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 10px;
}

.slideshow-container video{
  position: relative;
  object-fit: inherit;
  width: 90%;
  height: 90%;
  z-index: 1;  
}

.floatingobj{
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 1/1;
  opacity: .4;
}

.floatingobj.one{
  background-image: url(../images/FloatingObject/FloatingObj_Elephant.png);
  width: 15vw;
  top: 0vh;
  left: -6vw;
  animation: floatingobj-anim 5s alternate 0s ease-in-out infinite;
}

.floatingobj.two{
  background-image: url(../images/FloatingObject/FloatingObj_Music.png);
  width: 15vw;
  bottom: 10vh;
  left: 2vw;
  animation: floatingobj-anim 3s alternate 0s ease-in-out infinite;
}

.floatingobj.three{
  background-image: url(../images/FloatingObject/FloatingObj_Swan.png);
  width: 20vw;
  top: 4vh;
  right: -8vw;
  animation: floatingobj-anim 7s alternate 0s ease-in-out infinite;
}

@keyframes floatingobj-anim {
  0% {transform: scaleX(1);}
  100% {transform: scaleX(.8);}
}

.visual .catchphrase{
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.catchphrase .title{
  font-family: 'Amatic';
  font-size: 40px;
  margin-bottom: 5vh;
}

.music{
  background-color: black;
}

.coming-soon{
  position: relative;
  display: flex;
  width: 70%;
  height: 70vh;
  margin: auto;
  font-size: 60px;
  font-family: 'Amatic';
  justify-content: center;
  align-items: center;
  text-align: center;
}

.music-container{
  position: relative;
  display: flex;
  width: 70%;
  margin: auto;
  justify-content: space-evenly;
  align-items: center;
  background-color: #111111cc;
  border-radius: 20px;
}

.music-control-container{
  display: flex;
  flex-direction: column;
  width: 30%;
  /* background-color: #222222; */
  justify-content: center;
  align-items: center;
  border-radius: 10%;
}

.music-item-container{
  display: flex;
  width: 90%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.music-image{
  margin: 10px 0;
  position: relative;
  display: flex;
  width: 100%;
  border-radius: 20px;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  justify-content: center;
  align-items: center;
}

.music-image .fa{
  background-color: #0009;
  padding: 27.5px 27.5px 27.5px 37.5px;
  border-radius: 100%;
}

.music-image .fa:hover{
  color: rgb(164, 255, 180);
}

.music-volume-control{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 90%;
  height: 20px;
  margin: 10px 0;
}

.music-volume-control input{
  width: 70%;
  background-color: transparent;
  border: none;
  margin: auto;
}

.music-volume-control .fa{
  font-size: 24px;
  margin: 0 10px 0 0;
}

.volume-icon{
  display: flex;
  width: 30px;
  aspect-ratio: 1/1;
  margin: auto;
  align-items: center;
}

.visualizer-area{
  position: relative;
  width: 60%;
  height:fit-content;
  text-align: center;
}

.music-title{
  font-family: 'Amatic';
  font-size: 40px;
}

.visualizer-canvas{
  position: relative;
  height: 150px;
  margin: 5vh;
  display: flex;
  align-items: end;
  justify-content: center;
}

.visualizer-canvas .bar{
  display: inline-block;
  width: 10px;
  margin: 0 2px;
  background-color: white;
}

.duration-bar{
  width: 80%;
  height: 5px;
  margin: auto;
  background-color: #555555;
}

.current-duration{
  width: 0%;
  height: 5px;
  background-color: white;
}

.prev-music-button,
.next-music-button,
.prev-image-button,
.next-image-button{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75px;
  aspect-ratio: 1/1;
  border-radius: 10%;
  background-color: #222222;
  color: white;
}

.prev-music-button:hover,
.next-music-button:hover,
.prev-image-button:hover,
.next-image-button:hover{
  background-color: #555555;
}

.prev-music-button{
  left: -100px;
}

.prev-image-button{
  background-color: transparent;
  width: 50px;
  left: -20px;
}

.next-music-button{
  right: -100px;
}

.next-image-button{
  background-color: transparent;
  width: 50px;
  right: -20px;
}

.prev-image-button .fa,
.next-image-button .fa{
  font-size: 24px;
}

.subsection.music .decoration{
  margin-top: -10vh;
  overflow: visible;
}

.comet{
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 1/1;
}

.comet.one{
  background-image: url(../images/CommetAndMummylandStar/Comet\ 1.png);
  width: 10%;
  animation: comet-one 12s linear 4s infinite;
}

@keyframes comet-one {
  0% {top: -5%; left: 20%; opacity: 0;}
  5% {opacity: .3;}
  95% {opacity: .3;}
  100% {top: 80%; left: -20%; opacity: 0;}
}

.comet.two{
  background-image: url(../images/CommetAndMummylandStar/Comet\ 3.png);
  width: 7%;
  animation: comet-two 10s linear 1s infinite;
}

@keyframes comet-two {
  0% {top: -10%; right: -30%; opacity: 0;}
  5% {opacity: .3;}
  95% {opacity: .3;}
  100% {top: 90%; right: 10%; opacity: 0;}
}

.comet.three{
  background-image: url(../images/CommetAndMummylandStar/Comet\ 3.png);
  width: 5%;
  animation: comet-three 12s linear 5s infinite;
}

@keyframes comet-three {
  0% {top: -10%; right: 20%; opacity: 0;}
  5% {opacity: .3;}
  95% {opacity: .3;}
  100% {top: 20%; right: 40%; opacity: 0;}
}

/*-------------------- character page ------------------*/
.section.character{
  background-color: #0e0e0e;
}

.section.character .content-container{
  padding: 10vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.character-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.character-item{
  position: relative;
  width: 25%;
  height: 100%;
}

.character-container.active{
  width: 30%;
  height: 60%;
}

.light{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: .2;
  z-index: 1;
}

.light:hover{
  opacity: 1;
}

.character-container .character:hover + .light{
  opacity: 1;
}

.character-container .character{
  /* position: absolute; */
  width: 87%;
  height: 100%;
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  margin: auto;
  /* z-index: 2; */
}

.character.nala{
  background-image: url(../images/Mannequin/Mannekin_Nala_NoSpotlight.png);
}

.character-item.nala:hover .character.nala{
  background-image: url(../images/Mannequin/Mannekin_Nala_Spotlight.png);
  /* width: 114.3%; */
}

.character.the-flower{
  background-image: url(../images/Mannequin/Mannekin_TheFlower_NoSpotlight.png);
}

.character-item.the-flower:hover .character.the-flower{
  background-image: url(../images/Mannequin/Mannekin_TheFlower_Spotlight.png);
}

.character.grandpa{
  background-image: url(../images/Mannequin/Mannekin_Grandpa_NoSpotlight.png);
}

.character-item.grandpa:hover .character.grandpa{
  background-image: url(../images/Mannequin/Mannekin_Grandpa_Spotlight.png);
}

.transition-petal{
  position: fixed;
  opacity: 1;
  width: 200%;
  aspect-ratio: 1/1;
  left: 100%;
  bottom: 100%;
  transform: rotate(0deg);
  background-image: url(../images/petals/Petal_3B.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
  transition: left 1s ease-in 0s,
              bottom 1s ease-in 0s
}

.transition-petal.active{
  opacity: 1;
  width: 200%;
  left: -75%;
  bottom: -200%;
  /* transform: rotate(180deg); */
  transition: left 1s ease-out 0s,
              bottom 1s ease-out 0s
}

.character.nala .transition-petal{
  background-image: url(../images/petals/Petal_3BW.png);
  left: 12%;
  top: 22%;
}

.character.the-flower .transition-petal{
  background-image: url(../images/petals/Petal_2BW.png);
  left: 31%;
  top: 6%;
}

.character.grandpa .transition-petal{
  background-image: url(../images/petals/Petal_5BW.png);
  left: 45%;
  top: 10%;
}

.character.nala .transition-petal.active{
  left: 50%;
  top: -15%;
}

.character.the-flower .transition-petal.active{
  left: -50%;
  top: -15%;
}

.character.grandpa .transition-petal.active{
  left: -150%;
  top: -15%;
}

.petal{
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 1/1;
}

.petal.nala-one{
  background-image: url(../images/petals/Petal_3BW.png);
  width: 50px;
  animation: petal-nala-one-anim 5s linear 1s infinite;
}

@keyframes petal-nala-one-anim{
  0% {top: 0%; left: 45%; transform: rotate(0deg); opacity:0}
  5% {opacity: 1;}
  90% {opacity:1}
  100% {top: 70%; left: 30%; transform: rotate(360deg); opacity:0}
}

.petal.nala-two{
  background-image: url(../images/petals/Petal_5BW.png);
  width: 30px;
  animation: petal-nala-two-anim 10s linear 2s infinite;
  z-index: 10;
}

@keyframes petal-nala-two-anim{
  0% {top: 0%; left: 50%; transform: rotate(0deg); opacity:0}
  5% {opacity: 1;}
  90% {opacity:1}
  100% {top: 80%; left: 60%; transform: rotate(180deg); opacity:0}
}

.petal.nala-three{
  background-image: url(../images/petals/Petal_2BW.png);
  width: 60px;
  animation: petal-nala-three-anim 7s linear 1.5s infinite;
}

@keyframes petal-nala-three-anim{
  0% {top: 0%; left: 47.5%; transform: rotate(0deg); opacity:0}
  5% {opacity: 1;}
  90% {opacity:1}
  100% {top: 75%; left: 52.5%; transform: rotate(-270deg); opacity:0}
}

.petal.flower-one{
  background-image: url(../images/petals/Petal_4BW.png);
  width: 50px;
  animation: petal-flower-one-anim 7s linear 2s infinite;
}

@keyframes petal-flower-one-anim{
  0% {top: 0%; left: 40%; transform: rotate(0deg); opacity:0}
  5% {opacity: 1;}
  90% {opacity:1}
  100% {top: 70%; left: 50%; transform: rotate(-270deg); opacity:0}
}

.petal.flower-two{
  background-image: url(../images/petals/Petal_3BW.png);
  width: 30px;
  animation: petal-flower-two-anim 5s linear 1.5s infinite;
}

@keyframes petal-flower-two-anim{
  0% {top: 0%; left: 45%; transform: rotate(0deg); opacity:0}
  5% {opacity: 1;}
  90% {opacity:1}
  100% {top: 80%; left: 30%; transform: rotate(180deg); opacity:0}
}

.petal.flower-three{
  background-image: url(../images/petals/Petal_1BW.png);
  width: 60px;
  animation: petal-flower-three-anim 10s linear 1s infinite;
  z-index: 10;
}

@keyframes petal-flower-three-anim{
  0% {top: 0%; left: 42.5%; transform: rotate(0deg); opacity:0}
  5% {opacity: 1;}
  90% {opacity:1}
  100% {top: 75%; left: 52.5%; transform: rotate(-360deg); opacity:0}
}

.petal.grandpa-one{
  background-image: url(../images/petals/Petal_5BW.png);
  width: 50px;
  animation: petal-grandpa-one-anim 7s linear 1s infinite;
  z-index: 10;
}

@keyframes petal-grandpa-one-anim{
  0% {top: 0%; right: 45%; transform: rotate(0deg); opacity:0}
  5% {opacity: 1;}
  90% {opacity:1}
  100% {top: 70%; right: 60%; transform: rotate(-180deg); opacity:0}
}

.petal.grandpa-two{
  background-image: url(../images/petals/Petal_1BW.png);
  width: 30px;
  animation: petal-grandpa-two-anim 10s linear 1.5s infinite;
}

@keyframes petal-grandpa-two-anim{
  0% {top: 0%; right: 50%; transform: rotate(0deg); opacity:0}
  5% {opacity: 1;}
  90% {opacity:1}
  100% {top: 80%; right: 40%; transform: rotate(360deg); opacity:0}
}

.petal.grandpa-three{
  background-image: url(../images/petals/Petal_4BW.png);
  width: 60px;
  animation: petal-grandpa-three-anim 5s linear 2s infinite;
}

@keyframes petal-grandpa-three-anim{
  0% {top: 0%; right: 47.5%; transform: rotate(0deg); opacity:0}
  5% {opacity: 1;}
  90% {opacity:1}
  100% {top: 75%; right: 40%; transform: rotate(270deg); opacity:0}
}

/*-------------------- sosmed page ------------------*/
.sosmed{
  background-color: #333333;
  height: calc(100vh - (65px + 170px));
}

.wayang{
  position: absolute;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.wayang.lamp{
  width: 120px;
  height: 170%;
  bottom: -105.5%;
  background-image: url(../images/Wayang/Wayang_Lampu_Jalan_1k.png);
}

.wayang.tree{
  background-image: url(../images/Wayang/Wayang_Pohon_1k.png);
}

.wayang.lamp.left-one{
  left: 15%;
}

.wayang.lamp.right-one{
  right: 15%;
}

.wayang.tree.left-one{
  width: 450px;
  height: 215%;
  bottom: -125%;
  left: -2vw;
}

.wayang.tree.left-two{
  width: 350px;
  height: 160%;
  bottom: -95%;
  left: -10vw;
}

.wayang.tree.right-one{
  width: 450px;
  height: 250%;
  bottom: -145%;
  right: -12vw;
}

.wayang.tree.right-two{
  width: 350px;
  height: 170%;
  bottom: -100%;
  right: 1vw;
}

.wayang.flower{
  background-image: url(../images/Wayang/Wayang_The_Flower_1k.png);
  width: 100px;
  height: 100%;
  bottom: -65%;
  left: calc(50% - 50px);
  animation: flower-walk 10s alternate 0s ease-in-out infinite, flower-jump 1s alternate 0s ease-in-out infinite;
}

@keyframes flower-walk{
  0% {left:20%; transform: scaleX(1);}
  100% {left:70%; transform: scaleX(1);}
}

@keyframes flower-jump{
  0% {bottom: -60%;}
  100% {bottom: -55%;}
}

.sosmed-container{
  position: absolute;
  width: 100%;
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index:5;
}

.sosmed-text{
  font-family: 'Amatic';
  font-size: 40px;
}

.icon-container{
  width: 100%;
  height: fit-content;
  padding-top: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.fa, .fab{
  font-size: 50px;
  margin: 0 20px;
}

.fa:hover, .fab:hover{
  color: black;
}

/*-------------------- fixed page - gameplay ------------------*/
.fixed-page{
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  background-color: black;
  width: 100vw;
  height: 100vh;
  left: 0;
  right: 0;
  top:0;
  bottom: 0;
  z-index: 1000;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.fixed-page.active{
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

.gameplay-item{
  display: flex;
  align-items: center;
  width: 85%;
  padding: 50px;
  /* background-color: #222222; */
  border-radius: 10px;
}

.gameplay-video{
  position: relative;
  display: flex;
  width: 65%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  background-image: url(../images/video_bg/video_bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
}

.gameplay-video video{
  position: relative;
  width: 90%;
  height: 90%;
  z-index: 1;
  object-fit: inherit;
}

.gameplay-description,
.character-description{
  display: flex;
  flex-direction: column;
  width: 30%;
  margin-left: 5%;
  text-align: center;
}

.gameplay-description{
  margin-left: 0;
}

.gameplay-description .title{
  font-family: 'Amatic';
  font-size: 40px;
  margin-bottom: 5vh;
}

.prev-gameplay-button,
.next-gameplay-button,
.prev-character-button,
.next-character-button,
.close-button{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 50px;
  aspect-ratio: 1/1;
  border-radius: 10%;
}

.prev-gameplay-button:hover,
.next-gameplay-button:hover,
.prev-character-button:hover,
.next-character-button:hover,
.close-button:hover{
  background-color: #555555;
}

.prev-gameplay-button,
.prev-character-button{
  left: 5vw;
}

.next-gameplay-button,
.next-character-button{
  right: 5vw;
}

.close-button{
  top: 5vh;
  right: 5vw;
}

.memfragment.big-one.overlay{
  width: 20vw;
  bottom: -1vh;
  right: -4vw;
  opacity: .15;
}

.memfragment.big-two.overlay{
  width: 20vw;
  top: -2vh;
  right: 14vw;
  opacity: .15;
}

.memfragment.big-three.overlay{
  width: 30vw;
  top: auto;
  bottom: 1vh;
  right: -8vw;
  opacity: .2;
}

/*-------------------- fixed page - character ------------------*/
.character.fixed-page{
  transition: opacity .25s ease-in-out .75s;
}

.character.fixed-page.active{
  transition: opacity .25s ease-in-out;
}

.silhouette{
  position: absolute;
  width: 90%;
  height: 220%;
  top: -15%;
  right: -17%;
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .2;
  z-index: -1;
}

.ov-character-item{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 70%;
  height: 80%;
}

.character-image{
  position: relative;
  width: 55%;
  height: 200%;
  margin-top: 15%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

.character-description{
  width: 40%;
  margin-left: -3%;
}

.character-description{
  text-align: left;
}

.character-description .name,
.character-description .title{
  margin-left: 5%;
  font-family: 'Amatic';
  font-size: 100px;
  font-weight: bold;
}

.character-description .title{
  margin-top: -5%;
  margin-left: 6%;
  font-size: 30px;
  font-weight: normal;
  margin-bottom: 5vh;
}

.petal.nala-one.overlay{
  animation: petal-one-anim-overlay 5s linear -1s infinite;
  width: 75px;
  z-index: -1;
}

@keyframes petal-one-anim-overlay{
  0% {top: 5%; left: 45%; transform: rotate(0deg); opacity:0}
  5% {opacity: 1;}
  90% {opacity:1}
  100% {top: 70%; left: 30%; transform: rotate(360deg); opacity:0}
}

.petal.nala-two.overlay{
  animation: petal-two-anim-overlay 10s linear -2s infinite;
  width: 75px;
}

@keyframes petal-two-anim-overlay{
  0% {top: 5%; left: 50%; transform: rotate(0deg); opacity:0}
  5% {opacity: 1;}
  90% {opacity:1}
  100% {top: 80%; left: 60%; transform: rotate(180deg); opacity:0}
}

.petal.nala-three.overlay{
  animation: petal-three-anim-overlay 7s linear -1.5s infinite;
  width: 75px;
}

@keyframes petal-three-anim-overlay{
  0% {top: 5%; left: 47.5%; transform: rotate(0deg); opacity:0}
  5% {opacity: 1;}
  90% {opacity:1}
  100% {top: 75%; left: 52.5%; transform: rotate(-270deg); opacity:0}
}