@font-face {
  font-family: myfontheading;
  src: url(/static/font/PPTelegraf-Regular.otf)
}

@font-face {
  font-family: myfontheadingBold;
  src: url(/static/font/PPTelegraf-UltraBold.otf)
}

@font-face {
  font-family: myfontPara;
  src: url(/static/font/garet/Garet-Book.otf)
}


.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}


@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Jura:wght@500;600;900&display=swap");

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


h1 {
  text-align: center;
}

.div {
  --col-gap: 2rem;
  --barH: 1rem;
  --roleH: 2rem;
  --flapH: 2rem;

  width: min(60rem, 90%);
  margin-inline: auto;

  display: flex;
  flex-wrap: wrap;

  gap: var(--col-gap);
  padding-inline: calc(var(--col-gap) / 2);

  justify-content: center;
  align-items: flex-start;
  list-style: none;
}

.div .span {
  width: 7em;
  display: grid;
  grid-template:
    "role"
    "icon"
    "title"
    "descr";
  align-items: flex-start;
  /* gap: 1rem; */
  /* padding-block-end: calc(var(--flapH) + 1rem); */
  padding-block-end: 26px;
  text-align: center;
  background: var(--accent-color);
  background-image: linear-gradient(rgba(0, 0, 0, 0.6) var(--roleH),
      rgba(0, 0, 0, 0.4) calc(var(--roleH) + 0.5rem),
      rgba(0, 0, 0, 0) calc(var(--roleH) + 0.5rem + 5rem));
  clip-path: polygon(calc(var(--col-gap) / -2 - 5px) 0,
      calc(100% + var(--col-gap) / 2 + 5px) 0,
      calc(100% + var(--col-gap) / 2 + 5px) calc(100% - var(--flapH)),
      50% 100%,
      calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH)));
}

/* bar */
.div .span::before {
  content: "";
  grid-area: role;
  height: var(--barH);
  width: calc(100% + var(--col-gap));
  margin-left: calc(var(--col-gap) / -2);
  margin-top: calc(var(--roleH) / 2 - var(--barH) / 2);
  background: black;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.2) 30%,
      rgba(255, 255, 255, 0.1) 40%,
      rgba(0, 0, 0, 0.1) 60%,
      rgba(0, 0, 0, 0.2) 70%,
      rgba(0, 0, 0, 0.4));
}

/* role */
.div .span::after {
  content: "";
  grid-area: role;
  background: var(--accent-color);
  background-image: linear-gradient(rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.2) 30%,
      rgba(255, 255, 255, 0.1) 40%,
      rgba(0, 0, 0, 0.1) 60%,
      rgba(0, 0, 0, 0.2) 70%,
      rgba(0, 0, 0, 0.4));
  height: var(--roleH);
}

.div .span .icon,
.div .span .title,
.div .span .descr {
  /* padding-inline: 1rem; */
  color: white;
  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

.div .span .icon {
  font-size: 3rem;
}

.div .span .title {
  font-size: 1.25rem;
  font-weight: 700;
}

.div .li .descr {
  font-size: 0.9rem;
}

.credits {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

.credits a {
  color: var(--color);
}


* {
  box-sizing: border-box;
}

.ribbon {
  position: relative;
  top: 0;
  left: 0;
  margin: 0 auto;
  right: 0;

  [class*="ribbon-"] {
    margin: 74px auto 0;
    transform-origin: 50% 50%;
    transform: rotate(-8.5deg);
    position: relative;
    z-index: 4;
    width: 287px;
    height: 56px;

    .inner {
      background: #b90d03;
      color: #fff;
      text-transform: uppercase;
      text-align: center;
      display: block;
      width: 0;
      height: 100%;
      padding: 11px 0;
      font-size: 22px;
      text-shadow: 3px 3px 1px #001b47;

      z-index: 2;
      transform: skewX(-9deg);
      transition: width .12s ease-in-out;
    }

    &:before {
      content: '';
      transform-origin: 0 0;
      transform: rotate(-17.25deg) skewX(-9deg) translateX(158px);
      display: block;
      width: 0;
      height: 100%;
      position: absolute;
      top: 0;
      left: 4px;
      background: #000057;
      z-index: -1;
      transition: all .12s ease-in-out .7s;
    }
  }

  /* .ribbon-1 {
  .inner {
    letter-spacing: 19px;
    font-weight: 700;
  }
} */

  &.active .inner {
    width: 100%;
  }

  &.active [class*="ribbon-"]:before,
  &.active [class*="ribbon-"]:after {}

  &.active .ribbon-1 {
    .inner {
      transition-delay: .82s;
    }

    &:before {
      width: 158px;
      transform: rotate(-17.25deg) skewX(-9deg) translateX(0);
    }
  }

  .ribbon-2 {
    z-index: 3;
    font-size: 45px;
    width: 350px;
    height: 70px;
    margin-top: 22px;

    .inner {
      padding: 19px 0;

      &:before,
      &:after {
        content: '';
        
      }

      &:before {
        transform-origin: 50% 50%;
        transform: rotate(180deg);
      }
    }

    &:before {
      width: 0;
      left: 11px;
      transform: rotate(-10.25deg) skewX(-9deg) translateX(451px);
      height: 47px;
      transition-delay: .94s;
    }
  }

  &.active .ribbon-2 {
    .inner {
      transition-delay: 1.06s;

      &:before,
      &:after {
        opacity: 1;
      }
    }

    &:before {
      width: 320px;
      transform: rotate(-10.25deg) skewX(-9deg) translateX(0);
    }
  }

  .ribbon-3 {
    z-index: 2;
    font-size: 9px;
    width: 326px;
    height: 55px;
    margin-top: 24px;

    .inner {
      color: #e8a713;
      padding: 10px 0;
    }

    &:before {
      width: 0;
      height: 47px;
      left: 11px;
      transform: rotate(-10.25deg) skewX(-9deg) translateX(387px);
      transition-delay: 1.18s;
    }

    &:after {
      content: '';
      transform-origin: 100% 100%;
      transform: rotate(-15.3deg) skewX(9deg) translateX(72px);
      display: block;
      width: 0;
      height: 45px;
      position: absolute;
      bottom: 0;
      right: 4px;
      background: #001b47;
      z-index: -1;
      transition-delay: 1.42s;
    }
  }

  &.active .ribbon-3 {
    .inner {
      transition-delay: 1.3s;
    }

    &:before {
      width: 340px;
      transform: rotate(-10.25deg) skewX(-9deg) translateX(0);
    }

    &:after {
      width: 56px;
      transform: rotate(-15.3deg) skewX(9deg) translateX(0);
    }
  }

  .ball {
    width: 190px;
    height: 190px;
    background: #000057;
    border-radius: 95px;
    padding: 85px 20px 0;
    text-align: center;
    color: #001b47;
    border: 10px solid #b90d03;
    margin: -87px auto 0;
    position: relative;
    left: 18px;
    z-index: 1;
    transform-origin: 50% 50%;
    transform: rotate(-8.5deg);

    .ball-text {
      font-size: 17px;
      line-height: 1.2;
      text-align: center;
      display: block;
      width: 119px;
      color: white;
      font-family: myfontheadingBold
    }

  }

  .fadeLeft {
    opacity: 0;
    transform: translateX(-100%);
    transition: all .3s ease-in-out 1.56s;
    display: block;
  }

  .fadeRight {
    opacity: 0;
    transform: translateX(100%);
    transition: all .3s ease-in-out 1.56s;
    display: block;
  }

  .fadeIn {
    opacity: 0;
    transition: all .3s ease-in-out 1.42s;
    display: block;
  }

  &.active {

    .fadeLeft,
    .fadeRight {
      opacity: 1;
      transform: translateX(0);
    }

    .fadeIn {
      opacity: 1;
    }
  }
}

/* .Blogpagging {
    animation: wiggle 2s linear infinite;
  } */

  /* Keyframes */
  @keyframes wiggle {

    0%,
    7% {
      transform: rotateZ(0);
    }

    15% {
      transform: rotateZ(-15deg);
    }

    20% {
      transform: rotateZ(10deg);
    }

    25% {
      transform: rotateZ(-10deg);
    }

    30% {
      transform: rotateZ(6deg);
    }

    35% {
      transform: rotateZ(-4deg);
    }

    40%,
    100% {
      transform: rotateZ(0);
    }
  }

  .Blogpagging {
    position: relative;
    /* left: calc(50% - 3em); */
    /* top: calc(50% - 2em); */
    height: 2em;
    width: 9em;
    background: red;
    background: linear-gradient(top, #555, #333);
    border: none;
    border-top: 4px solid black;
    border-radius: 0 0 0.2em 0.2em;
    color: #fff;
    font-family: Helvetica, Arial, Sans-serif;
    font-size: 1em;
    transform-origin: 50% 5em;
  }

  .Blogpaggingactive {
    position: relative;
    /* left: calc(50% - 3em); */
    /* top: calc(50% - 2em); */
    height: 2em;
    width: 3em;
    background: red;
    background: linear-gradient(top, #555, #333);
    border: none;
    border-top: 4px solid black;
    border-radius: 0 0 0.2em 0.2em;
    color: #fff;
    font-family: Helvetica, Arial, Sans-serif;
    font-size: 1em;
    transform-origin: 50% 5em;
  }

  #mybutton {
    position: fixed;
    bottom: -4px;
    right: 10px;

  }