main {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--prim-col-d-20)), to(var(--prim-col)));
  background-image: -o-linear-gradient(top, var(--prim-col-d-20), var(--prim-col));
  background-image: linear-gradient(to bottom, var(--prim-col-d-20), var(--prim-col));
  padding: var(--main-pt) var(--glob-px) 0;
  font-size: var(--fs);
}
main img:first-child {
  top: 0;
  left: 0;
  width: var(--img-w);
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, from(transparent), to(black));
  -webkit-mask-image: linear-gradient(to top, transparent, black);
          mask-image: -webkit-gradient(linear, left bottom, left top, from(transparent), to(black));
          mask-image: linear-gradient(to top, transparent, black);
}
main img:last-child {
  margin: min(5vmin, 100px) 0;
  width: min(var(--img-w), 500px);
}
main h3 {
  margin: var(--h3-my) 0;
}
main h1 {
  color: var(--white-col);
  text-shadow: 0 0 4px black;
}
main ul {
  padding-left: var(--ul-pl);
  list-style-type: disc;
  overflow: hidden;
}
main ul li {
  font-family: "Roboto";
  font-size: var(--li-fs);
  color: var(--sec-col);
  margin: min(5vmin, 30px) 0;
  -webkit-transform: translate(-30px, 10%);
      -ms-transform: translate(-30px, 10%);
          transform: translate(-30px, 10%);
  opacity: 0;
}
main ul li.active {
  -webkit-animation: showListItems 0.5s 1 forwards;
          animation: showListItems 0.5s 1 forwards;
}
main ul li.active:first-child {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
main ul li.active:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
main ul li.active:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
main ul li.active:nth-child(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
main ul li.active:nth-child(5) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
main ul li.active:nth-child(6) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
main ul li.active:last-child {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
main ul.second-ul li.active {
  -webkit-animation: showListItems 0.5s 1 forwards;
          animation: showListItems 0.5s 1 forwards;
}
main ul.second-ul li.active:first-child {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
main ul.second-ul li.active:nth-child(2) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
main ul.second-ul li.active:nth-child(3) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
main ul.second-ul li.active:nth-child(4) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
main ul.second-ul li.active:nth-child(5) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
main ul.second-ul li.active:last-child {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

@-webkit-keyframes showListItems {
  from {
    -webkit-transform: translate(-30px, 10%);
            transform: translate(-30px, 10%);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes showListItems {
  from {
    -webkit-transform: translate(-30px, 10%);
            transform: translate(-30px, 10%);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}
@media screen and (min-width: 0px) {
  main {
    --fs: 4.5vmin;
    --main-pt: 20vmin;
    --img-w: 100%;
    --ul-pl: 5vmin;
    --li-fs: min(1em, 22px);
    --h3-my: min(15vmin, 100px);
  }
}
@media screen and (min-width: 768px) {
  main {
    --fs: 4.5vmin;
    --main-pt: 20vmin;
  }
}
@media screen and (min-width: 1200px) {
  main {
    --fs: 4.5vmin;
    --main-pt: 20vmin;
  }
}