html {
 font-size: 16px;
 position: relative;
 min-height: 100%;
}

body {
 min-height: 100vh;
 margin-bottom: 60px;
}

.bg-black {
 background: #232427;
}

.user-message-icon {
 width: 20vw;
 height: auto;
}

.txt-white {
 color: white;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
 box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Fonts types */
.fnt-TmnRoman {
 font-family: Times, "Times New Roman", Georgia, serif;
}

.fnt-TmnRoman-large {
 font-family: Times, "Times New Roman", Georgia, serif;
 font-size: 1.3rem;
}

.fnt-LucHand {
 font-family: 'Lucida Handwriting', 'Brush Script MT', cursive;
}

.fnt-Courier {
 font-family: 'Courier New', monospace;
}

/* Text indents */
.txt-indn-4 {
 text-indent: 4%;
}

.txt-indn-10 {
 text-indent: 10%;
}

.txt-indn-20 {
 text-indent: 20px;
}

.txt-indn-50 {
 text-indent: 50px;
}

/* Font sizes */
.fnt-em-11 {
 font-size: 1.1em;
}

.fnt-em-12 {
 font-size: 1.2em;
}

.fnt-em-15 {
 font-size: 1.5em;
}

.fnt-em-20 {
 font-size: 2.0em;
}

/* Cursor types */
.crs-plain {
 cursor: default;
}

.no-link-underline {
 text-decoration: none !important;
 font-weight: bold;
}

 .no-link-underline:hover {
  color: white;
 }

/* Spinner loader */
.full-content {
 display: none;
}

.loader-spinner {
 height: 100vh;
 width: 100vw;
 overflow: hidden;
 background-color: #16191e;
 position: absolute;
}

 .loader-spinner > div {
  height: 100px;
  width: 100px;
  border: 15px solid #45474b;
  border-top-color: #FF0090;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
  animation: spin 1.5s infinite linear;
 }

@keyframes spin {
 100% {
  transform: rotate(360deg);
 }
}
/* END Spinner loader */

/* Progress circle */
#progress {
 height: 80px;
 width: 80px;
 border-radius: 50%;
 position: fixed;
 bottom: 10px;
 right: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, .2);
 display: grid;
 place-items: center;
 color: #FF0090;
 z-index: 1;
 box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #ff1177, 0 0 14px #ff1177, 0 0 80px #ff1177, 0 0 20px #ff1177, 0 0 30px #ff1177;
}

#progress-value {
 display: block;
 height: calc(100% - 20px);
 width: calc(100% - 20px);
 background-color: #ffffff;
 border-radius: 50%;
 display: grid;
 place-items: center;
 font-weight: 600;
 font-size: 20px;
}
/* End of progress circle*/

/* Card images */
.character-card-text {
 text-align: left;
 text-indent: 20px;
}

.card-image {
 max-height: 10vw;
 height: 10vw;
 max-width: auto;
 width: auto;
}

.container .card {
 position: relative;
 height: 48vh;
 box-shadow: inset 5px 5px 5px rgba(0,0,0,0.2), inset -5px -5px 15px rgba(255,255,255,0.1), 5px 5px 15px rgba(0,0,0,0.3), -5px -5px 15px rgba(255,255,255,0.1);
 border-radius: 15px;
}

 .container .card .box {
  position: absolute;
  top: 2vh;
  left: 1vw;
  right: 1vw;
  bottom: 2vh;
  background: #2a2b2f;
  border-radius: 15px;
  border: 2px solid #1e1f23;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  transition: 0.4s;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
 }

 .container .card:hover .box {
  transform: translateY(-50px);
  box-shadow: 0 40px 70px rgba(0,0,0,0.5);
 }

 .container .card .box .content {
  text-align: center;
 }

  .container .card .box .content h3 {
   color: rgba(255,255,255,0.5);
   transition: 0.4s;
  }

  .container .card .box .content p {
   color: rgba(255,255,255,0.5);
   transition: 0.4s;
  }

 .container .card:hover .box .content h3,
 .container .card:hover .box .content p {
  color: rgba(255,255,255,1);
 }

 .container .card .box .content a {
  text-decoration: none;
  color: #fff;
 }
/* End of card images */

/* Glow buttons */
.glow-button {
 border-radius: 1px;
 position: relative;
 display: inline-block;
 color: #03e9f4;
 text-decoration: none;
 text-transform: uppercase;
 transition: 0.5s;
 letter-spacing: 4px;
 overflow: hidden;
 margin-bottom: 10%;
}

 .glow-button:hover {
  background: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
 }

.glow-button-cyan {
 filter: hue-rotate(0deg);
}

.glow-button-purple {
 filter: hue-rotate(70deg);
}

.glow-button-pink {
 filter: hue-rotate(110deg);
}

.glow-button-orange {
 filter: hue-rotate(200deg);
}

.glow-button-yellow {
 filter: hue-rotate(235deg);
}

.glow-button-green {
 filter: hue-rotate(270deg);
}

.glow-button .span-glow-btn {
 position: absolute;
 display: block;
}

 .glow-button .span-glow-btn:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,transparent,#03e9f4);
  animation: animate1 1s linear infinite;
 }

@keyframes animate1 {
 0% {
  left: -100%;
 }

 50%,100% {
  left: 100%;
 }
}

.glow-button .span-glow-btn:nth-child(2) {
 top: -100%;
 right: 0;
 width: 2px;
 height: 100%;
 background: linear-gradient(180deg,transparent,#03e9f4);
 animation: animate2 1s linear infinite;
 animation-delay: 0.25s;
}

@keyframes animate2 {
 0% {
  top: -100%;
 }

 50%,100% {
  top: 100%;
 }
}

.glow-button .span-glow-btn:nth-child(3) {
 bottom: 0;
 right: 0;
 width: 100%;
 height: 2px;
 background: linear-gradient(270deg,transparent,#03e9f4);
 animation: animate3 1s linear infinite;
 animation-delay: 0.50s;
}

@keyframes animate3 {
 0% {
  right: -100%;
 }

 50%,100% {
  right: 100%;
 }
}

.glow-button .span-glow-btn:nth-child(4) {
 bottom: -100%;
 left: 0;
 width: 2px;
 height: 100%;
 background: linear-gradient(360deg,transparent,#03e9f4);
 animation: animate4 1s linear infinite;
 animation-delay: 0.75s;
}

@keyframes animate4 {
 0% {
  bottom: -100%;
 }

 50%,100% {
  bottom: 100%;
 }
}

.submit-button {
 background: none;
 border-style: none;
 font-weight: bold;
 letter-spacing: 4px;
 width: 10vw;
}
/* End of Glow buttons */

/* NEON glow text */
.neon-col-red {
 animation: neon1 1.5s ease-in-out infinite alternate;
}

.neon-col-blue {
 animation: neon2 1.5s ease-in-out infinite alternate;
}

.neon-col-yellow {
 animation: neon3 1.5s ease-in-out infinite alternate;
}

.neon-col-green {
 animation: neon4 1.5s ease-in-out infinite alternate;
}

.neon-col-orange {
 animation: neon5 1.5s ease-in-out infinite alternate;
}

.neon-col-violet {
 animation: neon6 1.5s ease-in-out infinite alternate;
}

/*glow*/
@keyframes neon1 {
 from {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1177, 0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 100px #ff1177, 0 0 150px #ff1177;
 }

 to {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff1177, 0 0 35px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 75px #ff1177;
 }
}

@keyframes neon2 {
 from {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228dff, 0 0 70px #228dff, 0 0 80px #228dff, 0 0 100px #228dff, 0 0 150px #228dff;
 }

 to {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228dff, 0 0 35px #228dff, 0 0 40px #228dff, 0 0 50px #228dff, 0 0 75px #228dff;
 }
}

@keyframes neon3 {
 from {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ffdd1b, 0 0 70px #ffdd1b, 0 0 80px #ffdd1b, 0 0 100px #ffdd1b, 0 0 150px #ffdd1b;
 }

 to {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ffdd1b, 0 0 35px #ffdd1b, 0 0 40px #ffdd1b, 0 0 50px #ffdd1b, 0 0 75px #ffdd1b;
 }
}

@keyframes neon4 {
 from {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #b6ff00, 0 0 70px #b6ff00, 0 0 80px #b6ff00, 0 0 100px #b6ff00, 0 0 150px #b6ff00;
 }

 to {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #b6ff00, 0 0 35px #b6ff00, 0 0 40px #b6ff00, 0 0 50px #b6ff00, 0 0 75px #b6ff00;
 }
}

@keyframes neon5 {
 from {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff9900, 0 0 70px #ff9900, 0 0 80px #ff9900, 0 0 100px #ff9900, 0 0 150px #ff9900;
 }

 to {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff9900, 0 0 35px #ff9900, 0 0 40px #ff9900, 0 0 50px #ff9900, 0 0 75px #ff9900;
 }
}

@keyframes neon6 {
 from {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
 }

 to {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
 }
}
/* END NEON glow text */

/* Crousel images*/
.carousel-imag {
 width: 30%;
 height: 100%;
 object-fit: cover;
 -webkit-box-reflect: below 2px linear-gradient(transparent, transparent, #0004);
 transform-origin: center;
 transform: perspective(800px) rotateY(25deg);
 transition: 0.5s;
}

.container-carousel {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 20px;
}

 .container-carousel:hover .carousel-imag {
  opacity: 0.3;
 }

 .container-carousel .carousel-imag:hover {
  transform: perspective(800px) rotateY(0deg);
  opacity: 1;
 }
/* END Crousel images*/

.nv-itm {
 box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
 backdrop-filter: blur( 8px );
 -webkit-backdrop-filter: blur( 8px );
 border-radius: 10px;
 border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.active-neon {
 background: rgba( 253, 87, 214, 0.4);
 box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
 backdrop-filter: blur( 8px );
 -webkit-backdrop-filter: blur( 8px );
 border-radius: 10px;
 border: 1px solid rgba( 255, 255, 255, 0.18 );
 box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #ff1177, 0 0 14px #ff1177, 0 0 80px #ff1177, 0 0 20px #ff1177, 0 0 30px #ff1177;
}

.sp-field {
  display: none;
}

.char-counter {
  font-weight: bold;
  font-size: 1.2rem;
}

/* Neon Logo */
.text-logo {
  text-align: center;
  margin: auto;
  top: 10vh;
  left: 0;
  right: 0;
  bottom: 0;
  user-select: none;
  letter-spacing: 4px;
}

.text-logo b {
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: clamp(1.8rem, 10vw, 5rem);
  color: #fee;
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #f20c92, 0 0 0.5em #f20c92, 0 0 0.1em #f20c92, 0 10px 3px #000;
}

.text-logo b span {
  animation: blink linear infinite 2s;
}

.text-logo b span:nth-of-type(2) {
  animation: blink linear infinite 3s;
}

@keyframes blink {
 78% {
  color: inherit;
  text-shadow: inherit;
 }

 79% {
  color: #333;
 }

 80% {
  text-shadow: none;
 }

 81% {
  color: inherit;
  text-shadow: inherit;
 }

 82% {
  color: #333;
  text-shadow: none;
 }

 83% {
  color: inherit;
  text-shadow: inherit;
 }

 92% {
  color: #333;
  text-shadow: none;
 }

 92.5% {
  color: inherit;
  text-shadow: inherit;
 }
}
/* END Neon Logo */

/* Fragment page */
.container-top-2 {
  margin-top: 2%;
}

.fragment-row {
  border-radius: 10px;
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.fragment-image {
  height: 20vh;
  border-radius: 10px;
}

.fragment-text {
  padding-top: 5%;
}

.blur-1 {
  filter: blur(1px);
  font-style: italic;
}

.blur-2 {
  filter: blur(2px);
  font-style: italic;
}

.blur-3 {
  filter: blur(3px);
  font-style: italic;
}
/* END FRAGMENT PAGE */

.gif-image {
  max-height: 10vw;
  height: 10vw;
  max-width: auto;
  width: auto;
  filter: brightness(20%);
}

.index-top-container {
  margin-left:2%;
  margin-right:2%;
}

.index-video {
  max-height: 45vh;
  height: 45vh;
  max-width: auto;
  width: auto;
}

/* Theme page */
.theme-title {
  font-size: 28px;
}

.theme-image {
 width: 8vw;
 min-width: 8vw;
 height: auto;
 min-height: auto;
 border-radius: 50%;
 border-style: ridge;
 border-width: 1px;
 border-color: white;
}

.theme-container {
 font-family: Times, "Times New Roman", Georgia, serif;
 color: white;
 border-radius: 20px;
 border-style: outset;
 border-width: 1px;
 border-color: white;
 background: linear-gradient(145deg, #141515, #111212);
 box-shadow: 41px 41px 82px #080808, -41px -41px 82px #1e2020;
 color: white;
}
/* END THEME PAGE */

/* NEWS VERTICAL BOX*/
.news-wrap {
 height: auto;
 width: 40vw;
 max-width: 40vw;
 overflow: hidden;
 box-sizing: border-box;
 padding-left: 1vw;
}

.news-container {
 font-weight: 400;
 width: 100%;
 height: 40vh;
 overflow: hidden;
 padding: 0;
 margin: 0;
}

.news-list {
 font-size: 14px;
 list-style-type: none;
}

.news-container p {
 text-align: left;
 overflow: hidden;
}

.news-container li {
 margin-bottom: 24px;
 background-color: #808080;
 text-align: center;
 border-bottom: 0px solid;
 text-decoration: none;
}

.news-img {
 margin-top: 6px;
 margin-right: 10px;
 float: left;
 height: 4vh;
 width: auto;
 max-width: auto;
}

.news-button {
 background-image: linear-gradient(to right, #B24592 0%, #F15F79 51%, #B24592 100%);
}

.news-button {
  margin: 3px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  color: white;
  box-shadow: 0 0 5px #eee;
  border-radius: 10px;
  display: block;
  width: 10vw;
  max-width: 10vw;
}

.news-button:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}
/* END NEWS vertical box*/

/* MOBILE CSS */
@media only screen and (max-width: 600px) {
 .gif-image {
  max-height: 22vw;
  height: 22vw;
  max-width: auto;
  width: auto;
  filter: brightness(20%);
}

.index-top-container {
  margin-left: -5%;
  margin-right: 2%;
}

.index-video {
  max-width: 92vw;
  width: 92vw;
  max-height: auto;
  height: auto;
}

.news-button {
  width: 90vw;
  max-width: 90vw;
}

.news-wrap {
  height: 35vh;
  width: 90vw;
  max-width: 90vw;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 2%;
  margin-bottom: 2%;
}

 .news-list {
  padding-left:0;
 }

 .nv-itm {
  background: rgba( 253, 87, 214, 0.7);
  margin-top: 3px;
  margin-bottom: 3px;
  box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 6px #fff, 0 0 8px #ff1177, 0 0 14px #ff1177, 0 0 80px #ff1177, 0 0 20px #ff1177, 0 0 30px #ff1177;
  padding-left: 12px;
  font-weight: 800;
  letter-spacing: 1px;
 }

.card-image {
  max-height: 40vw;
  height: 40vw;
  max-width: auto;
  width: auto;
}

.card {
  height: 60vh;
  min-height: 60vh;
}

.glow-button {
  margin-bottom: 10%;
}

.submit-button {
  width: 40vw;
}

.user-message-icon {
  width: 75vw;
  height: auto;
}

.carousel-imag:hover {
  object-fit: cover;
  -webkit-box-reflect: below 2px linear-gradient(transparent, transparent, #0004);
  transform-origin: center;
  transform: perspective(800px) rotateY(25deg);
  transition: 0.6s;
  width: 60%;
}

 .fragment-text {
  padding-top: 0;
 }

 .fragment-image {
  height: 40vh;
  border-radius: 10px;
  position: absolute;
  z-index: 0;
  opacity: 0.4;
  padding: 8px;
 }

 .row-resizer-3 {
  width: 20vw;
  max-width: 20vw;
  position: absolute;
  opacity: 0.5;
 }

 .row-resizer-9 {
  width: 50vw;
  max-width: 50vw;
 }

 #modalCookie {
  width: 100vw;
  max-width: 100vw;
  padding-right: 0;
  padding-left: 0;
 }


 /* Theme page */
 .theme-title {
  font-size: 22px;
 }

 .theme-image {
  width: 20vw;
  min-width: 20vw;
  height: auto;
  min-height: auto;
 }

 .theme-container {
  margin-left: 1%;
  margin-right: 1%;
 }

 .cntct-bar {
  width: 90vw;
  max-width: 90vw;
 }

 /* END THEME PAGE */
}
/* END OF MOBILE */

/* Checkbox style */
 .checkbox-label span {
  color: #888;
 }

input[type="checkbox"] {
 position: relative;
 width: 120px;
 height: 40px;
 -webkit-appearance: none;
 appearance: none;
 background: linear-gradient(0deg, #333, #000);
 outline: none;
 border-radius: 20px;
 box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 0, 0, 0.2);
}

input:checked[type="checkbox"] {
 background: linear-gradient(0deg, #f198b3, #DB5079);
 box-shadow: 0 0 2px #f198b3, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 0, 0, 0.2);
}

input:checked[type="checkbox"] ~ span {
  color: #f198b3;
}

input[type="checkbox"]::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 80px;
 height: 40px;
 background: linear-gradient(0deg, #000, #6b6b6b);
 border-radius: 20px;
 box-shadow: 0 0 0 1px #232323;
 transform: scale(.98, .96);
 transition: 0.5s;
}

input:checked[type="checkbox"]::before {
 left: 40px;
}

input[type="checkbox"]::after {
 content: "";
 position: absolute;
 top: calc(50% - 2px);
 left: 65px;
 width: 4px;
 height: 4px;
 background: linear-gradient(0deg, #6b6b6b, #000);
 border-radius: 50%;
 transition: 0.5s;
}

input:checked[type="checkbox"]::after {
 background: #e9658d;
 left: 105px;
 box-shadow: 0 0 5px #e9658d, 0 0 15px #e75480;
}
/* END Checkbox style*/

/* Lateral neon bars */
.blue-neon-bar {
  position: fixed;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(to top, #008aff, #00ffe7);
  animation: animateNeonBarBlue 5s linear infinite;
}

@keyframes animateNeonBarBlue {
  0%, 100% {
   filter: hue-rotate(0deg);
  }

  50% {
   filter: hue-rotate(10deg);
  }
}

/* Blurring shadow*/
.blue-neon-bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #008aff, #00ffe7);
  filter: blur(10px);
}

.red-neon-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(to bottom, #FF0000, #df009c);
  animation: animateNeonBarRed 2s linear infinite;
}

@keyframes animateNeonBarRed {
  0%, 100% {
   filter: hue-rotate(0deg);
  }

  50% {
   filter: hue-rotate(10deg);
  }
}

/* Blurring shadow*/
.red-neon-bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #FF0000, #df009c);
  filter: blur(10px);
}
/* END Lateral neon bars */

/* Scroller image carousel */
.scroller-container {
  --slide-width: clamp(150px, 20vw, 300px);
  --slide-gap: calc(var(--slide-width) * 0.06);
  --slide-border-radius: calc(var(--slide-width) * 0.06);
  overflow: hidden;
  width: 90vw;
  position: relative;
}

.scroller-container::before {
  position: absolute;
  content: "";
  width: var(--slide-width);
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--background-color), transparent);
}

.scroller-container::after {
  position: absolute;
  content: "";
  width: var(--slide-width);
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent, var(--background-color));
}

.scroller-wrapper {
  display: flex;
  justify-content: flex-start;
  gap: var(--slide-gap);
  width: calc((var(--slide-width) + var(--slide-gap)) * 6);
  animation: moveLeft 30s linear infinite;
}

.scroller-slide {
  flex: none;
  width: var(--slide-width);
  aspect-ratio: 9/16;
  background: #eee;
  border-radius: var(--slide-border-radius);
  overflow: hidden;
  cursor: default;
}

@keyframes moveLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.scroller-image {
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* END Scroller image carousel */

/* Container as Book */
.book-container {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
}

@keyframes initAnimation {
 0% {
   transform: rotateY(0deg);
 }

100% {
   transform: rotateY(-27deg);
 }
}

.book {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-27deg);
  transition: 1.5s ease;
  animation: 2s ease 0s 2 initAnimation;
}

.book:hover {
  transform: rotateY(0deg);
}

.book > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 300px;
  transform: translateZ(37.5px);
  box-shadow: 5px 5px 20px #666;
}

.book::before {
  position: absolute;
  content: ' ';

  left: 0;
  top: 3px;
  width: 73px;
  height: 294px;
  transform: translateX(159.5px) rotateY(90deg);
  background: linear-gradient(90deg, #fff 0%, #f9f9f9 5%, #fff 10%, #f9f9f9 15%, #fff 20%, #f9f9f9 25%, #fff 30%, #f9f9f9 35%, #fff 40%, #f9f9f9 45%, #fff 50%, #f9f9f9 55%, #fff 60%, #f9f9f9 65%, #fff 70%, #f9f9f9 75%, #fff 80%, #f9f9f9 85%, #fff 90%, #f9f9f9 95%, #fff 100% );
}

.book::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 200px;
  height: 300px;
  transform: translateZ(-37.5px);
  border-radius: 0 2px 2px 0;
  box-shadow: -10px 0 50px 10px #666;
}
/* END Container as Book */

/* Music player */
.player img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center center;
}

/* Player */
.player-block {
 display: flex;
 align-self: center;
 justify-self: center;
 overflow: hidden;
 max-height: 453px;
 border-radius: 40px;
 font-family: Times, "Times New Roman", Georgia, serif;
 background: linear-gradient(145deg, #141515, #111212);
 box-shadow: 41px 41px 82px #080808, -41px -41px 82px #1e2020;
}

.player {
 position: relative;
 z-index: 1;
 overflow: hidden;
 padding: 50px;
 max-width: 625px;
 width: 100%;
 background: linear-gradient( -65deg, rgba(11, 11, 13, 1), rgba(18, 18, 19, 1), rgba(49, 51, 52, 1) );
 border-radius: 40px;
 border: transparent;
}

 .player::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 40px;
  border: 1px solid transparent;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 1), rgba(102, 102, 102, 1)) border-box;
  mask: linear-gradient(#fff 0, #fff 100%) padding-box, linear-gradient(#fff 0, #fff 100%);
  mask-composite: exclude;
 }

 .player.open-playlist + .playlist,
 .player.open-playlist + .playlist .playlist__content {
  width: 500px;
  opacity: 1;
 }

/* Player Playlist */
.playlist {
 width: 0;
 height: 100%;
 transition: all 0.4s;
 overflow: hidden;
}

.playlist__content {
 display: flex;
 flex-direction: column;
 height: 100%;
 gap: 20px;
 padding: 50px 50px 50px 30px;
 opacity: 0;
 transition: all 0.2s;
}

.playlist__top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 25px;
}

.playlist__title {
 margin: 0;
 font-size: 1.5rem;
 line-height: 1.5;
 font-weight: 400;
 color: #FF69B4;
 text-transform: uppercase;
}

.playlist__control {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 24px;
 height: 24px;
 cursor: pointer;
}

.playlist__content i {
 position: absolute;
 width: 15px;
 height: 3px;
 background-color: var(--player-color-dark-grey);
 transition: 0.3s background-color;
}

 .playlist__content i:first-child {
  transform: rotate(-45deg);
 }

 .playlist__content i:last-child {
  transform: rotate(45deg);
 }

.playlist__list {
 display: flex;
 flex-direction: column;
 gap: 5px;
 overflow-y: auto;
 max-height: 310px;
 padding-right: 16px;
}

 .playlist__list::-webkit-scrollbar {
  width: 4px;
 }

 .playlist__list::-webkit-scrollbar-track {
  background-color: transparent;
 }

 .playlist__list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
 }

.playlist__item {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 5px 10px;
 max-height: 30px;
 border-radius: 6px;
 background-color: transparent;
 cursor: pointer;
 transition: all 0.3s;
 font-family: Times, "Times New Roman", Georgia, serif;
}

 .playlist__item.current {
  background-color: rgba(255, 255, 255, 0.05);
 }

.playlist__song,
.playlist__duration {
 font-size: 0.875rem;
 font-weight: 300;
 line-height: 1.4;
 color: #FF69B4;
}

.playlist__duration {
 padding-top: 14px;
}

.playlist__song-name {
 color: #e6e6e6;
}

/* Player Settings */

.player__settings {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 20px;
}

 .player__settings input {
  display: none;
 }

.player__playlist-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 8px;
 border-radius: 50%;
 background-color: transparent;
 cursor: pointer;
 transition: all 0.3s;
}

 .player__playlist-btn.active {
  filter: brightness(0) saturate(100%) invert(97%) sepia(100%) saturate(0%) hue-rotate(66deg) brightness(105%) contrast(104%);
 }

/* Players Bars */
.player__box {
 margin-top: 15px;
}

.player__bars {
 position: relative;
 display: flex;
 align-items: flex-end;
 gap: 4px;
 width: 100%;
 height: 155px;
 cursor: pointer;
}

.player__bar {
 min-height: 2px;
 width: 8px;
 height: 0;
 max-height: 155px;
 background: linear-gradient( to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05) );
 transition: height 0.2s ease-out, background 1s ease-out;
 cursor: pointer;
 pointer-events: all;
}

 .player__bar.color {
  background: linear-gradient( 120deg, rgba(59, 180, 155, 0.5) 0%, rgba(137, 58, 255, 0.5) 53%, rgba(253, 134, 241, 0.4) 100% );
 }

.player__audio {
 display: none;
}

/* Player Controls */
.player__info {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 margin-top: 30px;
}

.player__music-info {
 display: flex;
 flex-direction: column;
}

.player__music-author,
.player__duration {
 font-size: 1rem;
 line-height: 1.5;
 font-weight: 400;
 color: rgba(255, 255, 255, 0.4);
 text-transform: uppercase;
}

.player__music-title {
 margin: 0;
 font-size: 1.5rem;
 line-height: 1.5;
 font-weight: 400;
 color: white;
 text-transform: uppercase;
}

.player__controller {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-top: 25px;
}

.player__controls {
 display: flex;
 align-items: center;
 gap: 44px;
}

.player__next-btn,
.player__prev-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 5px;
 border-radius: 50%;
 background-color: transparent;
 cursor: pointer;
 transition: 0.3s all ease-in-out;
}

 .player__next-btn.disabled,
 .player__prev-btn.disabled {
  filter: brightness(0) saturate(100%) invert(45%) sepia(1%) saturate(914%) hue-rotate(318deg) brightness(91%) contrast(101%);
  cursor: default;
  pointer-events: none;
 }

.player__pause-icon,
.player__play-icon img {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 11px;
 border-radius: 50%;
 background-color: transparent;
 cursor: pointer;
 transition: 0.3s all ease-in-out;
}

 .player__pause-icon:active,
 .player__play-icon:active {
  background-color: rgba(255, 255, 255, 0.05);
 }

 .player__pause-icon.hidden,
 .player__play-icon.hidden,
 .player__play-btn.hidden {
  display: none;
 }

.player__volume-btn {
 position: relative;
 cursor: pointer;
 padding-right: 5px;
 height: 24px;
}

.player__volume-block {
 position: absolute;
 overflow: hidden;
 z-index: 10;
 width: 0;
 bottom: -10px;
 left: 30px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 10px;
 background-color: #414143;
 transition: all 0.3s;
}

 .player__volume-block input {
  overflow: hidden;
  margin: 20px;
  width: 100%;
  height: 10px;
  --range: 20%;
  appearance: none;
  outline: none;
  border-radius: 2px;
  background: linear-gradient( to right, white var(--range), rgba(87, 87, 87, 0.46) var(--range) );
  cursor: pointer;
 }

  .player__volume-block input[type="range"]::-webkit-slider-thumb {
   cursor: pointer;
   appearance: none;
   width: 1px;
   height: 1px;
   opacity: 0;
  }

.player__volume-icon {
 position: absolute;
 inset: 0;
 opacity: 1;
 width: max-content !important;
 visibility: visible;
 transition: all 0.3s;
}

.player__volume-default.hidden,
.player__volume-high.hidden,
.player__volume-mute.hidden {
 opacity: 0;
 visibility: hidden;
}

.player__volume-btn:hover .player__volume-block {
 width: 180px;
}

@media screen and (max-width: 1280px) {
 .player-block {
  flex-direction: column;
  max-height: 100%;
 }

 .player.open-playlist + .playlist,
 .player.open-playlist + .playlist .playlist__content {
  width: 100%;
  height: 450px;
  opacity: 1;
 }

 .playlist__list {
  max-height: none;
 }

 .playlist {
  width: 100%;
  height: 0;
 }
}

@media screen and (max-width: 620px) {
 .player__controls {
  gap: 10px;
 }

 .player__volume-btn {
  width: 40px;
 }
}

@media screen and (max-width: 460px) {
 .player-block {
  border-radius: 20px;
 }

 .player {
  border-radius: 20px;
  padding: 40px 20px 20px;
 }

  .player::before {
   border-radius: 20px;
  }

 .player__settings {
  gap: 10px;
 }

 .playlist__content {
  padding: 20px;
 }

 .playlist__item {
  max-height: 100%;
 }

 .playlist__song {
  display: flex;
  flex-direction: column;
  gap: 5px;
 }
}

@media (hover: hover) and (pointer: fine) {

 .playlist__control:hover i {
  background-color: white;
 }

 .player__pause-icon:hover,
 .player__play-icon:hover,
 .player__next-btn:hover,
 .player__prev-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
 }

 .player__playlist-btn:hover,
 .player__settings-btn:hover {
  filter: brightness(0) saturate(100%) invert(97%) sepia(100%) saturate(0%) hue-rotate(66deg) brightness(105%) contrast(104%);
  background-color: rgba(255, 255, 255, 0.05);
 }

 .playlist__item:hover {
  background-color: rgba(255, 255, 255, 0.05);
 }
}
/* END Music player */

/* User dashboard and products */
.round-capsule {
 border-radius: 10px;
 padding-right: 15px;
 padding-left: 15px;
 padding-top: 2px;
 padding-bottom: 2px;
}

.avatar-image {
 border-radius: 50%;
 width: 120px;
 max-width: 120px;
 height: auto;
 max-height: auto;
 margin-top: 10%;
 border-style: double;
}

.coin-value-image {
  width: 140px;
  max-width: 140px;
  height: auto;
  max-height: auto;
}

.user-amount-text {
 margin-top: 14px;
 margin-right: 4px;
 margin-left: 4px;
 font-weight: bold;
 font-size: 24px;
}

.user-amount-image {
 width: 60px;
 max-width: 60px;
 height: auto;
 max-height: auto;
}

hr.delimiter {
 border: 1.5px solid white;
 border-radius: 2px;
}

.text-col-pink {
 color: #ff69b4;
}
.text-col-orange {
 color: #ff9f00;
}
.text-col-green {
 color: #7fff00;
}
.text-col-yellow {
 color: #fff600;
}
.text-col-blue {
 color: #00b7eb;
}
.text-col-purple {
 color: #ba55d3;
}

.price-container {
 margin-top: 1vh;
 margin-bottom: 1vh;
}

.product-cost {
 margin-right: 8px;
 font-weight: bold;
 font-size: 22px;
}

.product-cost-icon {
 width: 30px;
 max-width: 30px;
 height: auto;
 max-height: auto;
}

.not-purchased-card {
 background-color: #9dffff;
}

.not-purchased-image {
 filter: sepia(60%) blur(2px);
 backdrop-filter: blur(10px);
}

.not-purchased-ribbon {
 background-color: #4effff;
 color: deeppink;
 padding-left: 2%;
 padding-right: 2%;
 font-weight: bold;
 font-size: 12px;
}

@media only screen and (max-width: 600px) {
 .not-purchased-ribbon {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
 }
}

.purchased-card {
 background-color: #ff69b4;
}

.product-full-image {
 border-radius: 50%;
 width: 180px;
 max-width: 180px;
 height: auto;
 max-height: auto;
 margin-top: 10%;
 border-style: double;
}

.cream-paper {
  background-image: radial-gradient(ellipse, rgba(245, 245, 220, 1) 0%, rgba(229, 203, 186, 1) 100%);
  color: black;
  border-radius: 10px;
  opacity: 90%;
  font-family: 'Lucida Handwriting', 'Brush Script MT', cursive;
}

.old-paper {
  background-color: #f8f5de;
  background-image: linear-gradient(to right, rgba(255,210,0,0.4), rgba(200, 160, 0, 0.1) 11%, rgba(0,0,0,0) 35%, rgba(200, 160, 0, 0.1) 65%);
  box-shadow: inset 0 0 75px rgba(255,210,0,0.3), inset 0 0 20px rgba(255,210,0,0.4), inset 0 0 30px rgba(220,120,0,0.8);
  color: rgba(0,0,0,0.6);
  font-family: 'Papyrus';
  font-weight: bold;

}

.product-image {
  max-width: 17vw;
  width: 17vw;
  height: auto;
  opacity: 0.3;
}

.product-image:hover {
  opacity: 1;
  transition: all .5s ease-in-out;
  transform: scale(1.8) translate(-10%, -20%);
}

@media only screen and (max-width: 600px) {
  .product-image {
    max-width: 80vw;
    width: 80vw;
    height: auto;
    opacity: 0.3;
    padding-bottom: 15%;
  }

  .product-image:hover {
    opacity: 1;
    transition: all .5s ease-in-out;
    transform: scale(1.2);
  }
}

.product-full-list {
 list-style-type: none;
 padding: 0;
}

.product-list-item {
 border-radius: 15px;
 background: linear-gradient(145deg, #2f343a, #383e44);
 box-shadow: 7px 7px 14px #1f2326, -7px -7px 14px #49515a;
}

.product-list-quote {
 font-style: italic;
 font-size: 20px;
 margin-bottom: 8px;
}

.quote-detailed {
 text-indent: 5%;
 font-size: 12px;
}
/* END User dashboard and products */

/* Javascript ALERT BOX */
.alert-box-center {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 padding: 20px;
 display: none;
 max-width: 50vw;
 background: rgba( 253, 87, 214, 0.4);
 box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
 backdrop-filter: blur( 8px );
 -webkit-backdrop-filter: blur( 8px );
 border-radius: 10px;
 border: 1px solid rgba( 255, 255, 255, 0.18 );
 box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #ff1177, 0 0 14px #ff1177, 0 0 80px #ff1177, 0 0 20px #ff1177, 0 0 30px #ff1177;
}

.alert-box-title {
 color: white;
 font-weight: bold;
 font-size: 22px;
}

.alert-box-text {
 color: white;
 font-size: 16px;
}

.alert-close-button {
 background-color: #ff9f00;
 color: white;
 border: none;
 border-radius: 5px;
 padding: 5px 10px;
 cursor: pointer;
 font-family: Times, "Times New Roman", Georgia, serif;
}
/* END JAVASCRIPT ALERT BOX*/