.burndown-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 300;
  font-size: 120%;
  letter-spacing: .2em;
  margin: 0;
  padding-left: .5rem;
}

.title-container {
  margin: -1.5rem;
}

.progressbar {
  height: 100%;
  background: none;
  opacity: 0.8;
}

.progressbar-bar {
  background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-size: 1rem 1rem;
  animation: progress-bar-stripes 1s linear infinite;
}

.beer-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  position: absolute;
  font-weight: 300;
  font-size: 290%;
  color: rgba(230, 228, 228, 0.7);
  -webkit-text-stroke-width: .5px;
  -webkit-text-stroke-color: rgb(34, 34, 34);
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.beer-title > span {
  writing-mode: initial;
  text-orientation: unset;
}

.beer-meter {
  position: absolute;
  top: 95%;
  left: 55%;
  transform: translate(-50%, -50%);
  font-size: 300%;
  color: rgba(255, 255, 255, 0.8);
  -webkit-text-stroke-width: .5px;
  -webkit-text-stroke-color: rgb(34, 34, 34);
}

.beer-meter > span {
  font-size: 50%;
  color: rgba(255, 255, 255, 0.7);
  -webkit-text-stroke-width: .5px;
  -webkit-text-stroke-color: rgb(34, 34, 34);
}

.title {
    font-size: 250%;
    color: rgba(255, 255, 255, 0.7);
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: rgb(34, 34, 34);
    position: absolute;
    top: 0;
    right: 0;
    height: fit-content;
  }

.mn-r-2 {
  margin-left: -2rem;
}


.fade-in {
	-webkit-animation: fade-in 1.2s both;
	        animation: fade-in 1.2s both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }

  }
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}