@keyframes slide {
   from {
      background-position: 0 0;
   }

   to {
      background-position: -120px 60px;
   }
}

.intro-container {
   /* position: relative;
   width: 100%;
   height: 100%; */
   /* min-height: fit-content; */
   /* max-height: 0; */
   /* justify-content: stretch; */
   /* width: 100%;
   height: 100%; */
}

.intro-popup {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 0;
   align-items: center;
   position: absolute;
   top: 0px;
   right: 0px;
   width: 100%;
   height: 100%;

   /* position: absolute; */
   /* left: 0; */
   /* top: 0; */
   /* transform: translate(-50%, -50%); */
   /* width: 100%; */
   /* flex: 10 0 auto; */
   /* height: 100%; */
   /* min-height: 100%; */
   /* width: auto; */
   /* padding: 1rem 1rem; */
}

/* .intro-popup .animated-appear {
   opacity: 0;
   max-height: 0;
   animation: anim-popup 1.5s linear 2s forwards, anim-popup-expand 3.5s linear 1.5s forwards;
} */

.controls-popup {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: auto;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   padding: 1rem 1rem;
}

.checkerboard-background {
   background-color: var(--color-theme-normal);
   background-image: linear-gradient(
         45deg,
         var(--color-theme-accent) 25%,
         transparent 25%,
         transparent 75%,
         var(--color-theme-accent) 75%,
         var(--color-theme-accent)
      ),
      linear-gradient(
         -45deg,
         var(--color-theme-accent) 25%,
         transparent 25%,
         transparent 75%,
         var(--color-theme-accent) 75%,
         var(--color-theme-accent)
      );
   background-size: 60px 60px;
   background-position: 0 0;
   animation: slide 4s infinite linear;
}
 
.popup .message {
   margin-bottom: 1rem;
   margin-top: 0;
}

.popup .wide {
   flex-grow: 2;
}

.popup img {
   margin: 2px;
   object-fit: cover;
}
.popup .popup-btn {
   /* font-family:inherit; */
   /* font-size: inherit; */
   /* background: #FFE382; */
   background: white;
   /* color: white; */
   padding: 0.3rem 3.4rem;
   border: 3px solid black;
   /* margin-right: 2.6rem; */
   box-shadow: 0 0 0 black;
   transition: all 0.2s;
}
 
.popup-btn:last-child {
   margin: 0;
}

.popup-btn:hover {
   box-shadow: 0.2rem 0.2rem 0 black;
   transform: translate(-0.2rem, -0.2rem);
}
 
.popup-btn:active {
   box-shadow: 0 0 0 black;
   transform: translate(0, 0);
}
 
.popup .controls {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.arrow {
   transform: translate(3rem, 0);
   transform: rotate(-90deg);
   cursor: pointer;
   /* height: 1px; */
   /* height: 100%; */
   position: relative;
}

.arrow span {
   display: block;
   width: 1rem;
   height: 1rem;
   border-bottom: 5px solid black;
   border-right: 5px solid black;
   transform: rotate(45deg);
   /* margin: -10px; */
   animation: anim-arrow 2s infinite;
}

.arrow span:nth-child(2) {
   animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
   animation-delay: -0.4s;
}

@keyframes anim-arrow {
   0% {
       opacity: 0;
       transform: rotate(45deg) translate(-20px, -20px);
   }
   50% {
       opacity: 1;
   }
   100% {
       opacity: 0;
       transform: rotate(45deg) translate(20px, 20px);
   }
}

@keyframes anim-popup {
   0% {
      opacity: 0;
      top: -100px;
   }
   100% {
      opacity: 1;
      top: 0px;
   }
}

@keyframes anim-popup-expand {
   0% {
      max-height: 0;
   }
   100% {
      max-height: 300rem;
   }
}