body {
  width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
  margin: 0;
  background-image: url("https://cdn.glitch.global/1152d106-d528-4253-8e56-a12e67a09616/unknown.png?v=1661646920655");
  background-size: cover;
  animation: enchantment 1s alternate infinite;
  background-blend-mode: luminosity;
}

h1{
  text-align: center;
  color: black;
  text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white;
}
.points{
    font-size: small;
    text-align: center;
    color: black;
    text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white;

}
.level {
  text-align: center;
  color: black;
  text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white;
}
button {
  margin-left: calc(50% - 2em);
  background-color: gray;
  color: white;
  border: 1px solid black;
  border-radius: 0.3em;
  margin-bottom: 1em;
  margin-top: 1em;
  padding: 0.5em;
  box-shadow: 0 0.2em black;
  transition: 100ms;
  display: block;
}
button:hover {
  background-color: darkgray
}
button:active {
  transform: translateY(0.1em);
  background-color: lightgray;
  box-shadow: 0 0.1em black;
  
}
.paragraph-styling {
  text-align: center;
}
.button-style {
  margin-left: calc(50% - 2em);
}
.input-style {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.stuff {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40em;
  height: 20em;
  padding: 15px;
  background-color: aliceblue;
  
}
.return {
  display: flex;
  cursor: pointer;
  border: solid 1px #da7c0c;
  background: #478dad;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: 0.5em 2em 0.55em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 0.3em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 3em;
  margin-left: calc(50% - 3.5em);
}

.return:hover {
  background: #f47c20;
}
.return:active {
  position: relative;
  top: 1px;
}
#progress {
  border-bottom: 1em solid lightgreen;
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
}
@keyframes enchantment {
  from {
    background-color: darkblue;
  }
  to {
    background-color: indigo;
  }
}
a::after {
    line-height: 0.5;
    text-indent: 0;
    content: "◄";
}
a {
    text-decoration: none;
    top: .2em !important;
    position: absolute;
    left: 0.2em !important;
    border: 0;
    width: 1em;
    height: 1em;
    display: block;
    color: black;
    font-size: xx-large;
    text-shadow: 0px 0px 10px white, 0px 0px 10px white, 0px 0px 5px white, 0px 0px 10px white;
    transition: 200ms;
}

a:hover {
    animation: back 1s alternate infinite;
}

@keyframes back {
    0% {
    transform: translateX(0px);
    } 20% {
    transform: translateX(-9px);
    } 60% {
    transform: translateX(3px);
    } 80% {
    transform: translateX(-9px);
    } 100% {
    transform: translateX(0px)
    }
}