/* FONTS */
@font-face {
  font-family: "alphabet";
  src: url("../fonts/osp_alfphabet/Alfphabet-IV.ttf");
  font-weight: normal;
  font-style: normal; }

/* ANIMS */
@keyframes appear {
  from {
    height: 0; }
  to {
    height: 80vh; } }

@keyframes rotateAppear {
  from {
    transform: rotate(-360deg);
    opacity: 0;
    height: 0; }
  to {
    transform: rotate(0);
    opacity: 1;
    height: 80vh; } }

@keyframes hiItsMe {
  from {
    margin: 0 0 0 -200%; }
  to {
    margin: 0 -200% 0 0; } }

/* STYLE */
main {
  font-family: "alphabet"; }
  main .slides {
    font-size: 8vw; }
    main .slides div.sing {
      background: linear-gradient(#f1f441, #f44141);
      text-align: center; }
      main .slides div.sing .blue {
        color: blue;
        display: inline; }
    main .slides [data-slide='18.6'] img {
      animation-duration: 1s;
      animation-name: appear;
      animation-iteration-count: 4; }
    main .slides [data-slide='22.6'] img {
      animation-duration: 2s;
      animation-name: rotateAppear;
      animation-iteration-count: 2;
      height: 80vh; }
    main .slides [data-slide='26.6'] img {
      animation-duration: 2s;
      animation-name: hiItsMe;
      animation-iteration-count: 2;
      height: 80vh; }
    main .slides [data-slide='30.4'] .text {
      position: absolute; }
    main .slides [data-slide='30.4'] img {
      height: 80vh; }
    main .slides [data-slide='30.4'] .text {
      width: 100%;
      color: blue;
      z-index: 9;
      text-align: center; }