@import url('https://fonts.googleapis.com/css?family=Fascinate+Inline&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Langar&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Metal Mania&display=swap');

html {
  background-color: black;
}

header {
  text-align: center;
  background-color: black;
  opacity: 87%;
  color: #800000;
  font-family: 'Nosifer', cursive;
  top: -22px;
  z-index: 1;
}

.heroselection > img {
    width: 100%;
}

.heroselection {
    width: 19.5%;
    display: inline-block;
    text-align: center;
}

.heroselection:not(.selectedHero) {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.heroSelectionContainer {
    overflow-x: hidden;
}

.heroName {
  color: white;
}

.selectedHero .heroframe {
    width: 175%;
    padding-top: 100%;
    left: -90px;
    top: 0px;
}

.heroframe {
    left: -35px;
    position: relative;
    width: 135%;
    padding-top: 90%;
}

.heroframe > .block {
  position: absolute;
  height: 100%;
  width: 30%;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.heroframe > .block:nth-of-type(1) {
  height: 80%;
  top: 10%;
  left: 17%;
  width: 15%;
}
.heroframe > .block:nth-of-type(2) {
  top: 0;
  left: 35%;
}
.heroframe > .block:nth-of-type(3) {
  height: 80%;
  top: 10%;
  left: 64%;
  width: 15%;
}
.heroframe > .block > .side {
  position: absolute;
  top: 0;
  left: 0;
  /* background-image: url('https://picsum.photos/id/1025/1024/768'); */
  background-size: auto 100%;
  box-shadow: -1vw 0.5vw 1vw rgba(0, 0, 0, 0.3);
}
.heroframe > .block > .side.-main {
  height: 100%;
  width: 100%;
  -webkit-transform: rotateY(30deg);
          transform: rotateY(30deg);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
}
.heroframe > .block > .side.-left {
  height: 100%;
  width: 20%;
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-transform: rotateY(-60deg) translateX(-100%);
          transform: rotateY(-60deg) translateX(-100%);
  -webkit-filter: brightness(40%);
          filter: brightness(40%);
}
.heroframe > .block:nth-of-type(1) > .side.-main {
  background-position: 4% 50%;
  background-size: auto 130%;
}
.heroframe > .block:nth-of-type(1) > .side.-left {
  background-position: 0 50%;
  background-size: auto 130%;
}
.heroframe > .block:nth-of-type(2) > .side.-main {
  background-position: 50% 0;
}
.heroframe > .block:nth-of-type(2) > .side.-left {
  background-position: 28.5% 0;
}
.heroframe > .block:nth-of-type(3) > .side.-main {
  background-position: 96% 50%;
  background-size: auto 130%;
}
.heroframe > .block:nth-of-type(3) > .side.-left {
  background-position: 78% 50%;
  background-size: auto 130%;
}

.treat-wrapper {
  text-align: center;
}

.treat-wrapper button {
  margin-left: auto;
  margin-right: auto;
}