app.css

body {
  background-color: black;
  font-family: 'Play', sans-serif;
}
.bg-brown {
  background-color: #281916;
}
.splash, .header-title {
  font-family: 'Permanent Marker', cursive;
}
.splash {
  max-width: 414px;
  max-height: 736px;
  margin: auto;
}
.title-splash, .gif-splash {
  display: none;
}
h1, h3{
  color: #F5BC6B;
}
main {
  background-image: url(imgs/groot-img/groot___spores_by_megatruh-d7ysf32.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: fixed;
  height: 100vh;
  width: 100vw;
  max-width: 414px;
  max-height: 736px;
  margin: auto;
}
.btn {
  width: 96%;
  box-sizing: border-box;
  border: 1px solid #F5BC6B;
  background-color: #F5BC6B;
  color: #281916;
}
.task {
  background-color: #fff;
  margin: 0px 10px 5px;
  padding: 10px;
  border-radius: 6px;
}
span.pts {
  font-style: italic;
  color: #909090;
  font-size: 0.8em;
  bottom: 1px;
  position: relative;
  margin-left: 10px;
}
.h-fit-content {
  height: fit-content;
}
header {
  height: 9vh;
}
.header-img {
  max-width: 100%;
  max-height: 100%;
}
.header-logo {
  width: 15vw;
  height: 100%;
}
.header-hero {
  width: 15vw;
  height: 100%;
}
.level-progress{
  color:white;
  display: flex;
  flex-direction: row;
}