body {
  background-color: #0a1010;
}

.v2 {
  font-family: "Iosevka Term Web";
  font-weight: 100;
  font-size: 104px;
  text-align: left;
  margin: 5% 5% 0;
  overflow: hidden;
}

@keyframes cover-trans {
  to {
    shape-inside: polygon(0 0,  100% 0, 100% 100%, 0 100%);
    -webkit-clip-path:  polygon(0 0,  100% 0, 100% 100%, 0 100%);
  }
}

.main-rect {
  background-color: #132020;
  color: cyan;
  display: inline-block;
  padding: 0 20px;
  #shape-inside: polygon(0 0, 0px 0, 0px 100% 0 100%);
  #shape-padding: 20px;
}

.main-label {
  animation: cover-trans 1s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
}

.time {
  display: inline-block;
  margin-left: 5%;
  margin-top: 10px;
  animation: cover-trans 1.1s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.41,.08,.46,.57);
  -webkit-clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%);
}

.name-label {
  font-size: 24;
  font-weight: 400;
  padding: 0px 8px;
  color: teal;
}

@font-face {
	font-family: 'Iosevka Term Web';
	font-weight: 100;
	font-style: normal;
	src: url('woff2/iosevka-term-thin.woff2') format('woff2');
}

@font-face {
	font-family: 'Iosevka Term Web';
	font-weight: 200;
	font-style: normal;
	src: url('woff2/iosevka-term-extralight.woff2') format('woff2');
}

@font-face {
	font-family: 'Iosevka Term Web';
	font-weight: 400;
	font-style: normal;
	src: url('woff2/iosevka-term-regular.woff2') format('woff2');
}