@import "../fonts/fontello/css/fontello.css";
@import "../fonts/chivo-mono/chivo-mono.css";
body {
  margin: 0;
  background: #000000;
  color: white;
}
.wrapper {
  position: relative;
  width: 90vw;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo {
  position: relative;
  width: 25vw;
}
.logo .font {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 100px;
}
.logo .video {
  position: absolute;
  height: calc(100% - 5px);
  width: calc(100% - 5px);
  object-fit: fill;
  z-index: -1;
}
.logo .mask {
  display: block;
  position: relative;
  top: -2px;
  width: 100%;
}
.logo .mask .st0 {
  fill: #000000;
}
.counter {
  position: relative;
  margin-left: 5vw;
  font-family: "Chivo Mono", monospace;
}
.counter .number {
  font-size: 20vh;
}
.counter .underline {
  text-align: right;
}
.background.instagram {
  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%) text, radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%) text, radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%) text, radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%) text, radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%) text, radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%) text, radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent) text, linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%) text;
}
@media (orientation: portrait) {
  .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
  }
}
/* KEYFRAMES */
@-webkit-keyframes instagram {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes instagram {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes instagram {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* FONTS */
/*

	background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),
	radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
	radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
	radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),
	radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
	radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),
	radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
	linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);

*/