#instructions {
  width: 600px;
  padding: 14px;
  border-radius: 4px;
  position: fixed;
  bottom: 14px;
  left: 14px;
  background-color: #8A0638;
  color: white;
  font-family: "DM Sans";
  font-size: 16px;
  z-index: 1;
  direction: __MSG_@@bidi_dir__;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "description description" "icons browser" "buttons buttons";
  gap: 20px;
}

.description {
  grid-area: description;
}
.description > :last-child {
  margin-bottom: 0;
}

.description-text {
  font-family: "DM Sans";
  margin-top: 0;
}

.browser {
  grid-area: browser;
  display: grid;
}

.browser-bar {
  width: 200px;
}

.browser-window {
  width: 200px;
  height: 100px;
  background: rgb(14, 14, 14);
  border: 1px #b3b3b3 solid;
  box-sizing: border-box;
  overflow: hidden;
}

.browser-window-image {
  height: 100%;
  margin: auto;
  display: block;
  transition: 0.5s linear;
}
.browser-window-image.zoom {
  animation: zoomAnimation 4.5s linear infinite;
}
@keyframes zoomAnimation {
  0%, 16.6666666667% {
    transform: scale(1);
  }
  33.3333333333%, 50% {
    transform: scale(3);
  }
  66.6666666667%, 83.3333333333% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
.browser-window-image.reset-zoom {
  animation: resetZoomAnimation 3s linear infinite;
}
@keyframes resetZoomAnimation {
  0%, 33.33% {
    transform: scale(1);
  }
  50%, 83.33% {
    transform: scale(4);
  }
  100% {
    transform: scale(1);
  }
}
.browser-window-image.pan {
  animation: panAnimation 6s linear infinite;
}
@keyframes panAnimation {
  0%, 12.5% {
    transform: scale(4);
  }
  25%, 37.5% {
    transform: scale(4) translate(40px, -10px);
  }
  50%, 62.5% {
    transform: scale(4) translate(-60px, -25px);
  }
  75%, 87.5% {
    transform: scale(4) translate(-20px, 30px);
  }
  100% {
    transform: scale(4);
  }
}
.browser-window-image.scroll-vertically {
  animation: scrollVerticallyAnimation 4.5s linear infinite;
}
@keyframes scrollVerticallyAnimation {
  0%, 16.6666666667% {
    transform: scale(4) translate(0, 0);
  }
  33.3333333333%, 50% {
    transform: scale(4) translate(0, -30px);
  }
  66.6666666667%, 83.3333333333% {
    transform: scale(4) translate(0, 30px);
  }
  100% {
    transform: scale(4) translate(0, 0);
  }
}
.browser-window-image.scroll-horizontally {
  animation: scrollHorizontallyAnimation 4.5s linear infinite;
}
@keyframes scrollHorizontallyAnimation {
  0%, 16.6666666667% {
    transform: scale(4) translate(0, -20px);
  }
  33.3333333333%, 50% {
    transform: scale(4) translate(-50px, -20px);
  }
  66.6666666667%, 83.3333333333% {
    transform: scale(4) translate(50px, -20px);
  }
  100% {
    transform: scale(4) translate(0, -20px);
  }
}
.browser-window-image.rotate {
  animation: rotateAnimation 4.5s linear infinite;
}
@keyframes rotateAnimation {
  0%, 16.6666666667% {
    transform: scale(1);
  }
  33.3333333333%, 50% {
    transform: scale(1) rotate(30deg);
  }
  66.6666666667%, 83.3333333333% {
    transform: scale(1) rotate(-60deg);
  }
  100% {
    transform: scale(1);
  }
}

.icons {
  grid-area: icons;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.icon {
  width: 64px;
  height: 64px;
}

.buttons {
  grid-area: buttons;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 14px;
}

.button-previous, .button-next {
  padding: 6px 10px;
  font-family: "DM Sans";
  font-weight: 600;
  font-size: 16px;
  border-radius: 4px;
  border-width: 0;
  cursor: pointer;
  min-width: 90px;
}

.button-next {
  background-color: #510925;
  color: white;
}

.button-previous {
  background-color: white;
  color: #8A0638;
}

/*# sourceMappingURL=tutorial.css.map */
