body {
   font-family: 'Prompt', sans-serif;
   color: #fff;
   overflow: hidden;
   margin: 0;
   padding: 0;
   background-color: #000;
}

.QUALITYROOM {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.7);
   width: 80%;
   text-align: center;
}

#myVideo {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 100vw;
   height: 100vh;
   object-fit: cover;
}

p {
   font-size: 3vw;
   z-index: 99;
   position: relative;
}

.glow {
   font-size: 7vw;
   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;
   text-transform: uppercase;
}

/* General Styles */
.q-room-main {
   height: 50vh;
}

.q-room-text {
   position: fixed;
   text-align: center;
   margin-bottom: 10vh;
   width: 80vw;
   height: auto;
   left: 50%;
   transform: translateX(-50%);
}

.q-room-input {
   margin-top: 30%;
}

input {
   position: relative;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 90%;
   height: 100%;
   outline: none;
   border: none;
   display: block;
   background-image: url("../img/Button 01.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   padding: 10px;
   background-color: transparent;
   box-shadow: none;
}

.wavy {
   animation-name: wavy;
   animation-duration: 1.3s;
   animation-timing-function: ease;
   animation-iteration-count: infinite;
   position: relative;
   top: 0;
   left: 0;
}

@keyframes wavy {
   0% {
     top: 0px;
   }
   50% {
     top: -15px;
   }
   100% {
     top: 0px;
   }
}

:root {
   --glow-hue: 222deg;
   --shadow-hue: 180deg;
   --spring-easing: linear(
   0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%,
   1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%,
   1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%,
   0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%,
   0.998 84%, 1
 );
   --spring-duration: 1.33s;
}
@property --shimmer {
   syntax: "<angle>";
   inherits: false;
   initial-value: 33deg;
}

@keyframes shimmer {
   0% {
       --shimmer: 0deg;
   }
   100% {
       --shimmer: 360deg;
   }
}

@keyframes shine {
   0% {
       opacity: 0;
   }
   15% {
       opacity: 1;
   }
   55% {
       opacity: 1;
   }
   100% {
       opacity: 0;
   }
}
@keyframes text {
   0% {
       background-position: 100% center;
   }    
   100% {
       background-position: -100% center;
   }    
}

.qrsbtn {
   color: var(--bg);
   font-weight: 600;
   /*     background-image: linear-gradient(90deg, #fcecfe, #fbf6e7, #e6fcf5); */
   background-image: linear-gradient(
       315deg,
       #ffc4ec -10%,
       #efdbfd 50%,
       #ffedd6 110%
   );
   padding: .8em 1.4em;
   position: relative;
   isolation: isolate;
   box-shadow: 0 2px 3px 1px hsl(var(--glow-hue) 50% 20% / 50%), inset 0 -10px 20px -10px hsla(var(--shadow-hue),10%,90%,95%);
   border-radius: 0.66em;
   scale: 1;
   transition: all var(--spring-duration) var(--spring-easing);
}

.qrsbtn:hover:not(:active),
.qrsbtn.active {
   transition-duration: calc(var(--spring-duration)*0.5);
   scale: 1.2;
   box-shadow: 0 4px 8px -2px hsl(var(--glow-hue) 50% 20% / 50%), inset 0 0 0 transparent;
}
.qrsbtn:active {
   scale: 1.1;
   transition-duration: calc(var(--spring-duration)*0.5);
}

.shimmer {
   position: absolute;
   inset: -40px;
   border-radius: inherit;
   mask-image: conic-gradient(
       from var(--shimmer, 0deg),
       transparent 0%,
       transparent 10%,
       black 36%,
       black 45%,
       transparent 50%,
       transparent 60%,
       black 85%,
       black 95%,
       transparent 100%
   );
   mask-size: cover;
   mix-blend-mode: plus-lighter;
   animation: shimmer 1s linear infinite both;
}
.qrsbtn:hover .shimmer::before,
.qrsbtn:hover .shimmer::after,
.qrsbtn.active .shimmer::before,
.qrsbtn.active .shimmer::after {
   opacity: 1;
   animation: shine 1.2s ease-in 1 forwards;
}
.shimmer::before,
.shimmer::after {
   transition: all 0.5s ease;
   opacity: 0;
   content: "";
   border-radius: inherit;
   position: absolute;
   mix-blend-mode: color;
   inset: 40px;
   pointer-events: none;
}
.shimmer::before {
   box-shadow: 0 0 3px 2px hsl(var(--glow-hue) 20% 95%),
       0 0 7px 4px hsl(var(--glow-hue) 20% 80%),
       0 0 13px 4px hsl(var(--glow-hue) 50% 70%),
       0 0 25px 5px hsl(var(--glow-hue) 100% 70%);
   z-index: -1;
}

.shimmer::after {
   box-shadow: inset 0 0 0 1px hsl(var(--glow-hue) 70% 95%),
       inset 0 0 2px 1px hsl(var(--glow-hue) 100% 80%),
       inset 0 0 5px 2px hsl(var(--glow-hue) 100% 70%);
   z-index: 2;
}

.qrsbtn .text {
   color: black;
   background-clip: text;
   background-color: var(--bg);
   background-image: linear-gradient(120deg, transparent, hsla(var(--glow-hue),100%,80%,0.66) 40%, hsla(var(--glow-hue),100%,90%,.9) 50%, transparent 52%);
   background-repeat: no-repeat;
   background-size: 300% 300%;
   background-position: center 200%;
}

.qrsbtn:hover .text,
.qrsbtn.active .text {
   animation: text .66s ease-in 1 both;
}

#fish-name, #fish-detail {
   transition: opacity 0.5s ease-in-out;
}

.fade-out {
   opacity: 0;
}

#preloader {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #fff;
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
}

.fade-out {
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
}

.center-screen {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.logo-qrs {
   padding-top: 10vh;
   position: relative;
   bottom: 0%;
   left: 50%;
   transform: translate(-50%, 0%);
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
   align-items: center;
   align-content: center;
}

.logo-qrs img {
   width: 100%;
   height: auto;
   padding: 10px;
}

.img-logo {
   position: relative;
   width: 10vh;
   height: auto;
   bottom: 2vh;
}

.carousel-item img {
   position: relative;
   width: 75% !important;
   top: 50%;
   left: 15%;
}

.carousel-item {
   width: 100%;
   transform: scale(0.9);
}

#fishCarousel {
   margin-bottom: 10vw;
   transform: scale(2);
   height: auto;
}

.bottom-content {
   left: 50%;
   transform: translate(-50%, 0%);
   width: 100vw;
   position: relative;
   bottom: 0;
}

.carousel-inner {
}

/* Media Queries */

/* For phones */
@media (max-width: 767px) {
   .QUALITYROOM {
      width: 90%;
      transform: translate(-50%, -50%) scale(0.7);
   }

   #myVideo {
      width: 100%;
      height: auto;
      position: absolute;
      left: 0;
      top: 0;
      transform: none;
   }

   .glow {
      font-size: 5vw;
   }

   p {
      font-size: 4vw;
   }

   .carousel-item img {
      width: 100% !important;
      left: 0;
      top: 0;
      transform: none;
   }

   #fishCarousel {
      transform: scale(1.5);
   }

   .qrsbtn {
      width: 80%;
      font-size: 1em;
      padding: 0.5em 1em;
   }
}

/* For tablets */
@media (min-width: 768px) and (max-width: 1024px) {
   .QUALITYROOM {
      width: 85%;
      transform: translate(-50%, -50%) scale(0.7);
   }

   .glow {
      font-size: 6vw;
   }

   p {
      font-size: 3.5vw;
   }

   .carousel-item img {
      width: 85% !important;
      left: 7.5%;
      top: 0;
      transform: none;
   }

   #fishCarousel {
      transform: scale(1.8);
   }

   .qrsbtn {
      width: 75%;
      font-size: 1.2em;
      padding: 0.6em 1.2em;
   }
}

/* For desktops */
@media (min-width: 1025px) {
   .QUALITYROOM {
      width: 70%;
      transform: translate(-50%, -50%) scale(0.7);
   }

   .glow {
      font-size: 7vw;
   }

   p {
      font-size: 3vw;
   }

   .carousel-item img {
      width: 75% !important;
      left: 12.5%;
      top: 0;
      transform: none;
   }

   #fishCarousel {
      transform: scale(2);
   }

   .qrsbtn {
      width: 70%;
      font-size: 1.4em;
      padding: 0.8em 1.4em;
   }
}