.container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.character-container {
  display: flex;
  margin: 75px;
}
.character-container > .character-ref-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 275px;
  height: 275px;
}
.character-container > .character-ref-link > .character {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease, filter 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
  pointer-events: visible;
}
.character-container > .character-ref-link > .character.kayla:hover > path {
  stroke: black;
  stroke-width: 15;
  fill: #631517;
}
.character-container > .character-ref-link > .character.krystal:hover > path {
  stroke: black;
  stroke-width: 30;
  fill: #E3A962;
}
.character-container > .character-ref-link > .character.shelby:hover > path {
  stroke: black;
  stroke-width: 40;
  fill: #313136;
}
.character-container > .character-ref-link > .character.luca:hover > path {
  stroke: black;
  stroke-width: 30;
  fill: #8AA5FF;
}
.character-container > .character-ref-link > .character.issy:hover > path {
  stroke: black;
  stroke-width: 30;
  fill: #FBFBFC;
}
.character-container > .character-ref-link > .character.jaden:hover > path {
  stroke: black;
  stroke-width: 30;
  fill: #274038;
}
.character-container > .character-ref-link > .character.kayla > path {
  stroke: #dedede;
  stroke-width: 15;
}
.character-container > .character-ref-link > .character > path {
  fill: black;
  stroke: #dedede;
  stroke-width: 25;
}
.character-container > .character-ref-link > .character:hover {
  transform: scale(1.1);
}
.character-container > .character-ref-link > .ref-hover-text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.4s ease, z-index 0s ease;
  height: -moz-fit-content;
  height: fit-content;
}
.character-container > .character-ref-link > .ref-hover-text > text {
  font-size: 100px;
  font-weight: bold;
  stroke: black;
  stroke-width: 10;
  paint-order: stroke;
}
.character-container > .character-ref-link:hover > .ref-hover-text {
  opacity: 1;
  transform: translateX(-50%) translateY(-100%);
  z-index: 2;
}

@media screen and (max-width: 1080px) {
  .character-container {
    margin: 35px;
  }
  .character-container > .character-ref-link {
    height: 200px;
  }
  .character-container > .character-ref-link > .ref-hover-text > text {
    font-size: 150px;
  }
}
@media screen and (max-width: 810px) {
  .character-container {
    margin: 10px 30px 20px 30px;
    flex-wrap: wrap;
  }
  .character-container > .character-ref-link {
    margin: 30px auto;
    flex-basis: 33.3333333333%;
  }
}
@media screen and (max-width: 768px) {
  .character-container {
    margin: 20px auto 10px auto;
    flex-direction: column;
  }
  .character-container > .character-ref-link {
    width: 200px;
    height: 200px;
  }
  .card {
    margin: 35px;
  }
  .card > .card__btns {
    margin-bottom: 30px;
  }
}
@media (hover: none), (pointer: coarse) {
  .character-container > .character-ref-link > .character {
    transform: scale(0.8);
  }
  .character-container > .character-ref-link > .character.kayla > path {
    stroke: black;
    stroke-width: 15;
    fill: #631517;
  }
  .character-container > .character-ref-link > .character.krystal > path {
    stroke: black;
    stroke-width: 30;
    fill: #E3A962;
  }
  .character-container > .character-ref-link > .character.shelby > path {
    stroke: black;
    stroke-width: 40;
    fill: #313136;
  }
  .character-container > .character-ref-link > .character.luca > path {
    stroke: black;
    stroke-width: 30;
    fill: #8AA5FF;
  }
  .character-container > .character-ref-link > .character.issy > path {
    stroke: black;
    stroke-width: 30;
    fill: #FBFBFC;
  }
  .character-container > .character-ref-link > .character.jaden > path {
    stroke: black;
    stroke-width: 30;
    fill: #274038;
  }
  .character-container > .character-ref-link > .ref-hover-text {
    opacity: 1;
    transform: translateX(-50%) translateY(-75%);
    z-index: 2;
  }
}
.kayla-gradient-start {
  stop-color: #631517;
}

.kayla-gradient-end {
  stop-color: #490C14;
}

.krystal-gradient-start {
  stop-color: #E3A962;
}

.krystal-gradient-end {
  stop-color: #D8894A;
}

.shelby-gradient-start {
  stop-color: #313136;
}

.shelby-gradient-end {
  stop-color: #E8F9F8;
}

.luca-gradient-start {
  stop-color: #8AA5FF;
}

.luca-gradient-end {
  stop-color: #FBFBFC;
}

.issy-gradient-start {
  stop-color: #FBFBFC;
}

.issy-gradient-end {
  stop-color: #FEF9DC;
}

.jaden-gradient-start {
  stop-color: #274038;
}

.jaden-gradient-end {
  stop-color: #A29141;
}/*# sourceMappingURL=RefsheetsPage.css.map */