:root {
  --background-color: rgb(9, 22, 28);
  --unit: 16px;
  --white-space-x-1: --unit;
  --white-space-x-2: calc(--unit * 2);
  --white-space-x-3: calc(--unit * 2);
  --text-color-normal: rgba(255, 255, 255, 0.87);
  --text-color-title: rgba(255, 255, 255, 0.87);
  --text-color-subtitle: rgba(255, 255, 255, 0.87);
  --text-color-site-title: rgba(255, 255, 255, 0.87);
  --text-size-normal: 16px;
  --text-size-title: calc(var(--unit) * 3);
  --text-size-subtitle: calc(var(--unit) * 2);
  --text-weight-normal: 400px;
  --text-weight-title: 600px;
  --text-weight-subtitle: 400px;
  --text-font-family-normal: 'Ruluko', sans-serif;
  --text-font-family-title: 'Unica One', cursive;
  --text-font-family-subtitle: 'Ruluko', sans-serif;
}

:root {
  --background-color: rgb(9, 22, 28);
  --unit: 16px;
  --white-space-x-1: --unit;
  --white-space-x-2: calc(--unit * 2);
  --white-space-x-3: calc(--unit * 2);
  --text-color-normal: rgba(255, 255, 255, 0.87);
  --text-color-title: rgba(255, 255, 255, 0.87);
  --text-color-subtitle: rgba(255, 255, 255, 0.87);
  --text-color-site-title: rgba(255, 255, 255, 0.87);
  --text-size-normal: 16px;
  --text-size-title: calc(var(--unit) * 3);
  --text-size-subtitle: calc(var(--unit) * 2);
  --text-weight-normal: 400px;
  --text-weight-title: 600px;
  --text-weight-subtitle: 400px;
  --text-font-family-normal: 'Ruluko', sans-serif;
  --text-font-family-title: 'Unica One', cursive;
  --text-font-family-subtitle: 'Ruluko', sans-serif;
}

.column-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.column-container .subtitle {
  margin-top: 6vh;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  padding-top: 3vh;
}

.column-container .page-title {
  width: 100%;
  text-align: center;
}

@media (orientation: portrait) {
  .column-container .page-title {
    font-size: 3.5vh;
    padding-left: 17%;
    padding-right: 15%;
  }
}

.column-container .component {
  width: 100%;
}

.column-container .component #birthday-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (orientation: portrait) {
  .column-container .component #birthday-form {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.column-container .component #birthday-form .title-field {
  margin-right: 2vh;
  -webkit-transform: translateY(1vh);
          transform: translateY(1vh);
}

.column-container .component #birthday-form .title-field {
  font-size: 16px;
}

@media screen and (min-width: 320px) {
  .column-container .component #birthday-form .title-field {
    font-size: calc(16px + 2 * ((100vw - 320px) / 880));
  }
}

@media screen and (min-width: 1200px) {
  .column-container .component #birthday-form .title-field {
    font-size: 18px;
  }
}

@media (orientation: portrait) {
  .column-container .component #birthday-form .title-field {
    width: 100vw;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    font-size: 2.5vh;
    text-align: center;
    padding-bottom: 1.5vh;
  }
}

.column-container .component #birthday-form label {
  color: var(--text-color-normal);
  font-size: 1.5vh;
  text-transform: uppercase;
  letter-spacing: 0.1vh;
  z-index: 100;
  opacity: 1;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.column-container .component #birthday-form .form-field {
  position: relative;
  padding-top: 2vh;
}

.column-container .component #birthday-form .form-field label {
  color: var(--text-color-normal);
  font-size: 1.5vh;
  text-transform: uppercase;
  letter-spacing: 0.1vh;
  position: absolute;
  top: 0;
  left: 0.3vh;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.column-container .component #birthday-form .form-field input {
  background-color: white;
  border-radius: 0.5vh;
  border: 3px solid var(--text-color-normal);
  outline: none;
  padding: 1vh;
  font-weight: 800;
  position: relative;
}

.column-container .component #birthday-form .form-field input:placeholder-shown + label {
  opacity: 0;
  -webkit-transform: translateY(1rem);
          transform: translateY(1rem);
}

.column-container .component #birthday-form .form-field input:focus + label {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.column-container .component #birthday-form #day {
  width: 6vh;
  text-align: right;
  padding-right: 2vh;
  margin-right: 2vh;
}

@media (orientation: landscape) {
  .column-container .component #birthday-form #day {
    min-width: 49px;
  }
}

.column-container .component #birthday-form #monthName {
  width: 14vh;
  margin-right: 2vh;
}

@media (orientation: landscape) {
  .column-container .component #birthday-form #monthName {
    min-width: 120px;
  }
}

.column-container .component #birthday-form #year {
  width: 7vh;
  text-align: right;
  padding-right: 2vh;
}

@media (orientation: landscape) {
  .column-container .component #birthday-form #year {
    min-width: 64px;
  }
}

.column-container .component #birthday-form #revealKin {
  width: 15vw;
  -webkit-transform: translateY(1vh);
          transform: translateY(1vh);
}

.column-container .component #birthday-form #revealKin:disabled {
  opacity: 0.6;
}

@media (orientation: portrait) {
  .column-container .component #birthday-form #day {
    width: 8vh;
  }
  .column-container .component #birthday-form #monthName {
    width: 18vh;
  }
  .column-container .component #birthday-form #year {
    width: 9vh;
  }
}

@media (orientation: portrait) {
  .column-container .component #birthday-form #revealKin {
    width: 100vw;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    font-size: 2.5vh;
    text-align: center;
    margin: 1.5vh 14%;
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
}

.column-container .kin-header {
  margin-top: 4vh;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  padding-top: 4vh;
  padding-bottom: 4vh;
}

.column-container .kin-header.reveal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (orientation: portrait) {
  .column-container .kin-header.reveal {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

@media (orientation: portrait) {
  .column-container .kin-header {
    padding-left: 4vh;
    padding-right: 4vh;
  }
}

.column-container .kin-header .kin-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 4vw;
}

.column-container .kin-header .kin-image .tone-container {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

@media (orientation: portrait) {
  .column-container .kin-header .kin-image .tone-container {
    transforn: scale(1);
  }
}

@media (orientation: portrait) {
  .column-container .kin-header .kin-image {
    margin-right: 0;
  }
  .column-container .kin-header .kin-image .tone-container {
    width: auto;
    margin-top: 0;
    margin-bottom: 2vh;
  }
}

.column-container .kin-header .kin-image .seal-image-sphere {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 16vh;
  height: 16vh;
  border-radius: 50%;
  margin-top: 1vh;
}

@media (orientation: portrait) {
  .column-container .kin-header .kin-image .seal-image-sphere {
    margin-bottom: 2vh;
    width: 10vh;
    height: 10vh;
  }
}

.column-container .kin-header .kin-image .seal-image-sphere .seal-image {
  display: none;
  width: 9vh;
  height: 9vh;
}

@media (orientation: portrait) {
  .column-container .kin-header .kin-image .seal-image-sphere .seal-image {
    width: 6vh;
    height: 6vh;
  }
}

.column-container .kin-header .kin-image .seal-image-sphere .seal-image.reveal {
  display: block;
}

.column-container .kin-header .kin-image .seal-image-sphere.blue-column {
  background: radial-gradient(at 50% 50%, #6aa4e7, #3476c2, #2d589e, #183faa, #1a189e);
}

.column-container .kin-header .kin-image .seal-image-sphere.blue-column .seal-image {
  -webkit-filter: invert(1);
          filter: invert(1);
}

.column-container .kin-header .kin-image .seal-image-sphere.white-column {
  background: radial-gradient(at 50% 50%, #ffffff, #e0e0df, #e0e0df, #e0e0df, #e0e0df);
}

.column-container .kin-header .kin-image .seal-image-sphere.yellow-column {
  background: radial-gradient(at 50% 50%, #faf5cd, #fff176, #ffee59, #ffeb38, #fae318);
}

.column-container .kin-header .kin-image .seal-image-sphere.red-column {
  background: radial-gradient(at 50% 50%, #e76a6a, #c23434, #9e2d2d, #aa1818, #9e182e);
}

.column-container .kin-header .kin-image .seal-image-sphere.red-column .seal-image {
  -webkit-filter: invert(1);
          filter: invert(1);
}

.column-container .kin-header .kin-name .full-name {
  border-top: none;
  margin-top: 0;
}

.column-container .kin-header .kin-name .seal-name {
  margin-top: 1vh;
}

.column-container .kin-header .kin-name .seal-name, .column-container .kin-header .kin-name .tone-name, .column-container .kin-header .kin-name .kin-number, .column-container .kin-header .kin-name .enchanted-wave {
  line-height: 1.5;
  font-size: 1.2rem;
}

@media (orientation: portrait) {
  .column-container .kin-header .kin-name .seal-name, .column-container .kin-header .kin-name .tone-name, .column-container .kin-header .kin-name .kin-number, .column-container .kin-header .kin-name .enchanted-wave {
    font-size: 1rem;
  }
}

@media (orientation: portrait) {
  .column-container .kin-header .kin-name .full-name.subtitle {
    margin: 2.5vh 0;
    font-size: 3.5vh;
  }
}

.column-container .kin-description {
  margin: 0 3vh;
}

.column-container .kin-description h1 {
  font-family: var(--text-font-family-title);
}

@media (orientation: portrait) {
  .column-container .kin-description h1.subtitle {
    font-size: 3.0vh;
  }
}

@media (orientation: portrait) {
  .column-container .kin-description p {
    font-size: 2.5vh;
    line-height: 1.5;
  }
}

.column-container .kin-description .seal-description {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr;
      grid-template-columns: 1fr 2fr;
  -ms-grid-rows: (min-content)[5];
      grid-template-rows: repeat(5, -webkit-min-content);
      grid-template-rows: repeat(5, min-content);
      grid-template-areas: "meaning meaning" "race action" "power function" "element archetype" "quality quality";
  padding-bottom: 2vh;
  margin-left: 5vw;
}

@media (orientation: portrait) {
  .column-container .kin-description .seal-description {
    margin-left: 0;
  }
}

.column-container .kin-description .seal-description .meaning {
  line-height: 1.7;
  font-size: 1.3rem;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: meaning;
}

.column-container .kin-description .seal-description .race {
  margin-top: 2vh;
  line-height: 1.7;
  font-size: 1.2rem;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: race;
}

.column-container .kin-description .seal-description .action {
  margin-top: 2vh;
  line-height: 1.7;
  font-size: 1.2rem;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: action;
}

.column-container .kin-description .seal-description .power {
  line-height: 1.7;
  font-size: 1.2rem;
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: power;
}

.column-container .kin-description .seal-description .function {
  line-height: 1.7;
  font-size: 1.2rem;
  -ms-grid-row: 3;
  -ms-grid-column: 2;
  grid-area: function;
}

.column-container .kin-description .seal-description .element {
  line-height: 1.7;
  font-size: 1.2rem;
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  grid-area: element;
}

.column-container .kin-description .seal-description .archetype {
  line-height: 1.7;
  font-size: 1.2rem;
  -ms-grid-row: 4;
  -ms-grid-column: 2;
  grid-area: archetype;
}

.column-container .kin-description .seal-description .quality {
  margin-top: 2vh;
  line-height: 1.5;
  font-size: 1.2rem;
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: quality;
}

.column-container .kin-description .tone-description {
  display: -ms-grid;
  display: grid;
  padding-bottom: 2vh;
  margin-left: 5vw;
}

@media (orientation: landscape) {
  .column-container .kin-description .tone-description {
    -ms-grid-columns: 1fr 2fr;
        grid-template-columns: 1fr 2fr;
    -ms-grid-rows: (min-content)[3];
        grid-template-rows: repeat(3, -webkit-min-content);
        grid-template-rows: repeat(3, min-content);
        grid-template-areas: "function resource" "attributes attributes" "question question";
  }
}

@media (orientation: portrait) {
  .column-container .kin-description .tone-description {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    -ms-grid-rows: (min-content)[4];
        grid-template-rows: repeat(4, -webkit-min-content);
        grid-template-rows: repeat(4, min-content);
        grid-template-areas: "function" "resource" "attributes" "question";
  }
}

@media (orientation: portrait) {
  .column-container .kin-description .tone-description {
    margin-left: 0;
  }
}

.column-container .kin-description .tone-description .function {
  margin-top: 2vh;
  line-height: 1.7;
  font-size: 1.2rem;
  -ms-grid-row: 3;
  -ms-grid-column: 2;
  grid-area: function;
}

.column-container .kin-description .tone-description .resource {
  margin-top: 2vh;
  line-height: 1.7;
  font-size: 1.2rem;
  grid-area: resource;
}

.column-container .kin-description .tone-description .attributes {
  margin-top: 2vh;
  line-height: 1.7;
  font-size: 1.2rem;
  grid-area: attributes;
}

.column-container .kin-description .tone-description .question {
  margin-top: 3vh;
  line-height: 1.5;
  font-size: 1.3rem;
  grid-area: question;
  margin-bottom: 1vh;
}

.column-container .kin-description .oracle-images {
  display: none;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
      grid-template-areas: ".......    guide  ......" "antipodal destiny analog" ".......    hidden ......";
  -webkit-column-gap: 2vw;
          column-gap: 2vw;
  row-gap: 5vh;
  padding-bottom: 4vh;
  padding-top: 4vh;
  margin-top: 4vh;
}

.column-container .kin-description .oracle-images.reveal {
  display: -ms-grid;
  display: grid;
}

.column-container .kin-description .oracle-images .center-content {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.column-container .kin-description .oracle-images .tone-container {
  width: 100%;
  margin-bottom: 0.5vh;
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
}

.column-container .kin-description .oracle-images .guide-image, .column-container .kin-description .oracle-images .antipodal-image, .column-container .kin-description .oracle-images .destiny-image, .column-container .kin-description .oracle-images .analog-image, .column-container .kin-description .oracle-images .hidden-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 10vh;
  width: 10vh;
  border-radius: 50%;
  margin-right: 0;
  -webkit-box-shadow: 0 0 10vh 5vh rgba(0, 0, 0, 0.6);
          box-shadow: 0 0 10vh 5vh rgba(0, 0, 0, 0.6);
}

.column-container .kin-description .oracle-images .oracle-seal-name {
  text-align: center;
  font-family: var(--text-font-family-title);
  z-index: 1000;
  position: relative;
}

.column-container .kin-description .oracle-images .oracle-power-name, .column-container .kin-description .oracle-images .oracle-position {
  z-index: 1000;
  position: relative;
  text-align: center;
  width: 100%;
}

.column-container .kin-description .oracle-images .oracle-position {
  text-align: center;
  margin-bottom: 0.5vh;
}

.column-container .kin-description .oracle-images .oracle-guide {
  justify-self: center;
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: guide;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.column-container .kin-description .oracle-images .oracle-antipodal {
  justify-self: center;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: antipodal;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.column-container .kin-description .oracle-images .oracle-destiny {
  justify-self: center;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: destiny;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.column-container .kin-description .oracle-images .oracle-analog {
  justify-self: center;
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  grid-area: analog;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.column-container .kin-description .oracle-images .oracle-hidden {
  justify-self: center;
  -ms-grid-row: 3;
  -ms-grid-column: 2;
  grid-area: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.column-container .kin-description .oracle-images .seal {
  height: 6vh;
  width: 6vh;
}

.column-container .kin-description .oracle-images .blue-column .seal, .column-container .kin-description .oracle-images.red-column .seal {
  -webkit-filter: invert(1);
          filter: invert(1);
}

.column-container .kin-description .oracle-images .blue-column {
  background: radial-gradient(at 50% 50%, #6aa4e7, #3476c2, #2d589e, #183faa, #1a189e);
}

.column-container .kin-description .oracle-images .white-column {
  background: radial-gradient(at 50% 50%, #ffffff, #e0e0df, #e0e0df, #e0e0df, #e0e0df);
}

.column-container .kin-description .oracle-images .yellow-column {
  background: radial-gradient(at 50% 50%, #faf5cd, #fff176, #ffee59, #ffeb38, #fae318);
}

.column-container .kin-description .oracle-images .red-column {
  background: radial-gradient(at 50% 50%, #e76a6a, #c23434, #9e2d2d, #aa1818, #9e182e);
}

.column-container .kin-description .oracle-images .red-column .seal {
  -webkit-filter: invert(1);
          filter: invert(1);
}

.column-container .kin-description .oracle-description {
  padding-bottom: 2vh;
  margin-left: 5vw;
}

.column-container .kin-description .enchanted-wave-images {
  display: none;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
      grid-template-areas: "tone-1 ......  ......  ......  ......" "tone-2 ......  ......  tone-13 tone-12" "tone-3 ......  ......  ......  tone-11" "tone-4 ......  ......  ......  tone-10" "tone-5 tone-6  tone-7  tone-8  tone-9";
  padding-bottom: 4vh;
  padding-top: 4vh;
}

.column-container .kin-description .enchanted-wave-images.reveal {
  display: -ms-grid;
  display: grid;
}

.column-container .kin-description .enchanted-wave-images .wave-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 2vw;
  overflow: hidden;
  width: 100%;
}

.column-container .kin-description .enchanted-wave-images .wave-container .wave-question {
  text-align: center;
  padding-bottom: 1vh;
  z-index: 1000;
  overflow-wrap: break-word;
}

@media (orientation: portrait) {
  .column-container .kin-description .enchanted-wave-images .wave-container .wave-question {
    font-size: 14px;
  }
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-1 {
  justify-self: center;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: tone-1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-2 {
  justify-self: center;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: tone-2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-3 {
  justify-self: center;
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: tone-3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-4 {
  justify-self: center;
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  grid-area: tone-4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-5 {
  justify-self: center;
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: tone-5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-6 {
  justify-self: center;
  -ms-grid-row: 5;
  -ms-grid-column: 2;
  grid-area: tone-6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-7 {
  justify-self: center;
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  grid-area: tone-7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-8 {
  justify-self: center;
  -ms-grid-row: 5;
  -ms-grid-column: 4;
  grid-area: tone-8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-9 {
  justify-self: center;
  -ms-grid-row: 5;
  -ms-grid-column: 5;
  grid-area: tone-9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-10 {
  justify-self: center;
  -ms-grid-row: 4;
  -ms-grid-column: 5;
  grid-area: tone-10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-11 {
  justify-self: center;
  -ms-grid-row: 3;
  -ms-grid-column: 5;
  grid-area: tone-11;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-12 {
  justify-self: center;
  -ms-grid-row: 2;
  -ms-grid-column: 5;
  grid-area: tone-12;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container.wave-13 {
  justify-self: center;
  -ms-grid-row: 2;
  -ms-grid-column: 4;
  grid-area: tone-13;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.column-container .kin-description .enchanted-wave-images .wave-container .wave-seal-name {
  text-align: center;
  font-size: 14px;
}

.column-container .kin-description .enchanted-wave-images .center-content {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.column-container .kin-description .enchanted-wave-images .tone-container {
  width: 100%;
  margin-bottom: 0.5vh;
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
}

.column-container .kin-description .enchanted-wave-images .wave-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 10vh;
  height: 10vh;
  border-radius: 50%;
  margin-right: 0;
  -webkit-box-shadow: 0 0 10vh 5vh rgba(0, 0, 0, 0.6);
          box-shadow: 0 0 10vh 5vh rgba(0, 0, 0, 0.6);
  background-color: white;
}

@media (orientation: portrait) {
  .column-container .kin-description .enchanted-wave-images .wave-image {
    height: 10vw;
    width: 10vw;
  }
}

.column-container .kin-description .enchanted-wave-images .wave-image .seal {
  width: 6vh;
  height: 6vh;
}

@media (orientation: portrait) {
  .column-container .kin-description .enchanted-wave-images .wave-image .seal {
    height: 6vw;
    width: 6vw;
  }
}

.column-container .kin-description .enchanted-wave-images .wave-image.blue-column .seal, .column-container .kin-description .enchanted-wave-images .wave-image.red-column .seal {
  -webkit-filter: invert(1);
          filter: invert(1);
}

.column-container .kin-description .enchanted-wave-images .wave-image.blue-column {
  background: radial-gradient(at 50% 50%, #6aa4e7, #3476c2, #2d589e, #183faa, #1a189e);
}

.column-container .kin-description .enchanted-wave-images .wave-image.white-column {
  background: radial-gradient(at 50% 50%, #ffffff, #e0e0df, #e0e0df, #e0e0df, #e0e0df);
}

.column-container .kin-description .enchanted-wave-images .wave-image.yellow-column {
  background: radial-gradient(at 50% 50%, #faf5cd, #fff176, #ffee59, #ffeb38, #fae318);
}

.column-container .kin-description .enchanted-wave-images .wave-image.red-column {
  background: radial-gradient(at 50% 50%, #e76a6a, #c23434, #9e2d2d, #aa1818, #9e182e);
}

.column-container .kin-description .enchanted-wave-images .wave-image.red-column .seal {
  -webkit-filter: invert(1);
          filter: invert(1);
}
/*# sourceMappingURL=tu-kin.css.map */